要来就来一包!一包五颜六色的 Sea.js 插件,满足前端开发的各种需求!有校验插件,分页插件,ajax 插件,弹窗插件等等。 项目地址
必读
1. 所有插件默认拥有 newInstance
方法,用于创建新实例
以 seajs-autoPage 为例:
1 | var autoPage1 = require('seajs-autoPage'), |
2. 插件本身不兼容 IE8,如果需要兼容必须引用 fixJsForIE8
3. seajs-myUntils.js 和 seajs-httpClientConfig.js 的报错处理
如果你使用的模块中包含了 seajs-utils 或 seajs-httpClient 模块,那么你必须在项目根目录下创建 seajs-myUntils.js
和 seajs-httpClientConfig.js
。具体配置可参考它们的文档
4. 推荐使用 sealoader 来管理你的 seajs 插件
jquery
适用于 sea.js
的 jquery(v1.9.1)。
使用
1 | // 页面顶部全局引入 |
utils
常用工具集,最好默认所有页面都引用。
API
replaceAll(oldStr,newStr)
所有 String 类型的变量拥有该方法,用于全部替换某字符串
addClass(className)
所有 HTMLElement(所有标签)元素拥有该方法,用于添加 class
removeClass(className)
说明:所有 HTMLElement(所有标签)元素拥有该方法,用于移除 class
plusSign()
说明:所有 String,Number 类型的变量拥有该方法,用于给大于零的数字加正号。原值若 >0,则返回值会返回 “+” + 该值
format()
说明:所有的 Date 类型的变量拥有该方法,用于格式化时间
appendNodes(node/Array/nodeList)
所有 HTMLElement(所有标签)元素拥有该方法,用于批量对某元素追加子节点。返回值:元素数组
insertNodesBefore(insertNode,beforeNode)
所有 HTMLElement(所有标签)元素拥有该方法,用于批量对某元素插入子节点。返回值:元素数组
use(array,fuc)
用于按照一定的依赖顺序加载文件
每组 js 的加载是并行,且遵循各自组内依赖关系
1 | use( |
$id(idName)
通过 id 名获取元素
$name(name)
通过 name 获取 HTMLCollection
$tagName(tagName)
通过 tagName 获取 HTMLCollection
go(url,mode)
跳转页面的封装,该方法跳转页面会显示过渡动画
- url(String):跳转目标页地址
- mode(Boolean):新页面是否替换覆盖当前页。默认:false
back(index,mode)
后退页面的封装,用于后退到某些页面,需要同时刷新的需求
- index(Number):后退页数(不区分正负号)。默认:-1
- mode(Boolean):是否刷新后退页。默认:false
示例:
- back();后退一页
- back(true);后退一页并刷新
- back(2,true);后退两页并刷新
getParameter(name):
说明:用于获取 url 中指定的参数
bindClick(id/node,fuc)
通过 id/node 为指定节点绑定 click 事件
bindCopy()
通过 id/node 为指定节点绑定复制事件,点击该按钮即会复制指定的文本
1 | bindCopy({ |
其它:
- 某些浏览器后退会由于
BF Cache
机制不重新执行 js 以及还原页面元素,utils 插件会自动刷新该缓存类型的页面 - 此插件只保留以上基础 api,要求项目的根目录下必须创建seajs-myUtils.js模块来扩展项目的个性需求
- seajs-myUtils 不可依赖 seajs-utils,如果需要的话,可以通过添加如下模块解决:
1 | //该方法会自动执行 请勿随意手动调用 |
waitting
loading 提示,一般用于数据加载过程的等待提示。
使用
调用 show 方法后,等待提示会在 400 ms 后才会出现
1 | waitting.show('数据加载中...') |
1 | waitting.hide() |
commom-tip
用于在页面中央显示一条提示信息的 sea.js
插件。
API
show
显示一条提示信息,并在 1300ms 后自动消失
1 | seajs.use('seajs-commom-tip', function(tip) { |
validate
通用表单校验插件。
使用
给对应的表单标签增加对应的校验规则即可。
1 | <form> |
支持的校验规则
- validType:
- num 整数或小数
- int 整数
- float 整数或小数(等同于 num)
- phoneNum 手机号
- idCard 身份证
- bankCard 银行卡
- minNum:数字型的最小值(minNum=”0”:代表>=0;minNum=”!0”:代表>0)
- maxNum:数字型的最大值(maxNum=”10”:代表<=10;maxNum=”!10”:代表<10)
- maxLength:input 内容的最大长度
- minLength:input 内容的最小长度
- floatLength:小数位
- isEmpty:true 可为空(1204 版本之后效果等同于 minLength=”0”)
- errorTip:自定义错误提示
- firstZero:首位是否可为 0(默认:true)
- noSpace:空格不计入字数(默认:false)
- isByte:是否按照字节来计字数(默认:false)
- focusOnError:校验未通过的表单元素是否自动获得焦点(默认:true)
- noBorder:校验未通过的表单元素去除红色警告框(默认:false)
- notTipNext:1204 版本之后,错误提示的位置调整为距离上下元素 4px,如果给提示信息下方元素设置上该属性,则插件会忽略该元素继续向下遍历元素(默认:false)
- forceValid:某些特殊的,比如 input[type=checkbox]需要校验,但是其 display=’none’会导致插件忽略该元素,通过设置该属性为”true”可解决(默认:false)
- vIptWrapper:用于将 input 的父容器设置为下方出错提示的参照物(出错提示将出现在该元素的下方),效果等同于在该元素的 class 中添加类”vic”(不推荐)
- vMyWrapper:用于无法通过关键字 16 为 input 设置容器的情况,直接给该 input 标签添加该属性,值等于目标容器 id
- noErrorBorder:效果等同于关键字 13,但目前推荐使用该关键字
- noErrorTip:不显示出错提示(默认:false)
- vpopzindex:气泡提示.style.zIndex
API
showErrorTip(tip)
用于直接给某个输入框制造错误提示 一般用于本校验无法满足需求时,外部的自定义校验调用该方法来保持错误提示的统一,该方法已集成在页面所有表单输入框内
- tip(string): 提示内容
1 | document.getElementById('ipt').showErrorTip('请输入正确的文字') //id为ipt的输入框出现错误提示 |
值得一提的是,校验提示总是会优先显示在输入框上紧随文字之后,即使被遮住也会自动修复,实在修复不了的才会显示在 wrapper 上,如果显示在 wrapper 上之后还是被遮住且无法被自动修复,那么插件会在控制台输出原因。
[input/textarea/select].validMe(onlyValide)
用于单独校验某个输入框 一般用于同一个 form 表单内实现某个功能需要对指定的输入框进行校验的操作。如:提交手机号和验证码的 form 表单,其中还有获取验证码的按钮,获取验证码按钮就需要单独校验手机号输入框该,该方法已集成在页面所有表单输入框内
onlyValide(boolean):
true:表示仅校验该输入框是否符合校验规则,则该方法会直接返回 true/false
false:该方法会返回一串 json 数据{“isok”:true/false,”tip”:”错误信息”}
1 | document.getElementById('ipt').validMe(true) //对 id 为 ipt 的输入框进行校验 由于 onlyValide=true,将只返回 true/false |
setVal(value)
用于给表单输入框设置值,并能够响应本校验 只有通过该接口为 input 设置值才可清除错误提示,方法已集成在页面所有表单输入框内
- value(string):值
1 | document.getElementById('ipt').setVal('hello') //为 id 为 ipt 的输入框设置值:"hello" |
setHTML(value)
一般用于 select 元素做级联添加的时候,能够响应本校验 若是通过 innerHTML 方式为 select 添加子元素,只有通过该接口才可清除错误提示,方法已集成在页面所有表单输入框内
- value(string):值
1 | ;[select].setHTML('<option>1</option>') |
[form].validMe()
用于校验整个 form 表单内的所有输入框,该方法已集成在页面所有 form 标签内
1 | document.getElementById('fm').validMe() //对 id 为 fm 的整个 form 进行校验 返回 true/false |
[input/textarea/select].addIptEvt(fuc)
用于给输入框绑定 input 事件。该方法绑定的事件触发总是会在表单清除错误之后。比如输入框 a 的校验没有通过,这时候 a 的状态是红色框并有错误提示,这个时候 a 还绑定了事件用于实时计算收益,且该事件会在 a 校验通过的情况话才会执行。这时候如果在输入框 a 中输入,首先触发的是计算收益,这时候由于上一次错误没有清除,validMe()会直接返回 false。就可能会导致这次的计算不被触发。
- fuc(Function):绑定函数
[input/textarea/select].removeIptEvt(fuc)
用于清除通过 addIptEvt 给输入框绑定的事件。
[input/textarea/select].setStyleAfterError(style):
插件默认会在输入的时候清除错误提示,也就是还原到错误提示之前的状态。如果在出错提示期间改变了输入框样式,请通过该 api 进行设置。
1 | input.setStyleAfterError({ |
插入自定义校验
1 | ;[input / textarea / select].myValid = function() { |
checkbox 校验
1 | // 校验规则需通过插入自定义校验实现 |
form 表单插入自定义校验
在所有表单元素校验通过之后,再进行的最后一道校验,此时的校验一般与表单元素内容无关
1 | ;[form].myValid = function() { |
afterShowErrorTip
出现错误提示之后的回调,一般用于增加自定义出错样式
1 | ;[input / textarea / select].afterShowErrorTip = function() {} |
afterClearErrorTip
清除错误提示之后的回调,一般用于还原 afterShowErrorTip 接口制造的错误提示,因此这两个接口应当成对实现
1 | [input/textarea/select].afterClearErrorTip=function(){} |
countdown
用于控制验证码倒计时按钮的 sea.js
插件。
API
start(btn,secs)
开始倒计时
- btn(Element):获取验证码的按钮
- secs(Number):倒计时总时长(单位:秒),默认值 60
stop()
停止倒计时
sendVerifyCode
用于请求验证码的 sea.js
插件。
API
int
1 | int({ |
setConfig(key,value)
动态修改配置(除了subBtn
)
httpClient
ajax 请求插件,统一了数据回调接口便于管理,并集成获取数据的过渡画面。
API
get(url,onSuccess,onError)
通过 get 方式提交数据(异步)
url(string):提交地址(必须)
onSuccess(json,txt):请求成功的回调函数(非必须)
json:自动序列化为 json 的返回值
txt:原始返回值
onError(status):请求失败的回调函数(非必须,优先级高于 httpClientConfig.onError)
status:失败状态码
syncGet(url)
通过 get 方式提交数据(同步)
- url(string):提交地址
返回值:rs(未做 json 处理)
1 | httpClient.get('http://www.baidu.com') //执行同步请求 |
post(url,data,onSuccess,onError)
通过 post 方式提交数据
url(string):提交地址
data(string):post 数据
onSuccess(json,txt):请求成功的回调函数(非必须)
json:自动序列化为 json 的返回值
txt:原始返回值
onError(status):请求失败的回调函数(非必须,优先级高于 httpClientConfig.onError)
status:失败状态码
syncPost(url,data)
通过 post 方式提交数据
- url(string):提交地址
- data(string):post 数据
返回值:rs(未做 json 处理)
formatData(Object[json])
将 json 数据转成 url 键值对
1 | // 返回:t=1&m=2 |
showWaitting
属性值(Boolean)。用于设置是否自动显示加载过渡画面
注意:
此插件只保留以上基础 api,要求项目的根目录下必须创建 seajs-httpClientConfig.js
模块来扩展项目的个性需求
如果标准 API 已经满足需求,则 seajs-httpClientConfig
内容如下即可:
1 | define(function(require, exports, module) {}) |
如需个性化配置,则内容如下:
1 | define(function(require, exports, module) { |
modal-common
弹窗插件
API
int(configure)
初始化模态框
1 | int({ |
show()
显示模态框
hide()
关闭模态框
ajaxForm
将 form 表单提交自动转成 ajax 提交的 sea.js
模块,并集成了校验功能。
API
Attributes.actionName
1 | <form actionName="xxx"></form> |
给 form 表单设置了 actionName
后,它的提交将本插件托管
Attributes.enterTo
将 form 表单内的回车或点击移动端键盘的「前往」由提交表单改为触发某按钮的点击
1 | <form actionName="xxx" enterTo="你要点击的按钮 id"></form> |
Attributes.canReSubmit
插件默认不允许一个表单的多次提交,通过此选项可以取消该限制
1 | <form actionName="xxx" canReSubmit="true"></form> |
onFormResult
统一管理表单的提交回调。
1 | seajs.use('seajs-ajaxForm', function(ajaxForm) { |
addActionResult
单独管理表单的提交回调。
1 | seajs.use('seajs-ajaxForm', function(ajaxForm) { |
mySubmit
提交表单。
1 | // formDom:某绑定了 actionName 的 form 对象,可以通过 dom 选择器获得 |
getFormData
用于获取指定 form 内要提交的表单内容,返回值可以配合 httpClient 使用。
1 | seajs.use('seajs-ajaxForm', function(ajaxForm) { |
serachIpt
用于输入框在输入时实时获取数据的 sea.js
插件,一般用于动态搜索。
API
int(config)
插件初始化
- config:
1 | { |
setConfig(key,value)
用于对插件配置进行动态修改
- key(String):要修改的配置键名
- value:对应的修改值
upload
文件上传插件,支持图片预览。
使用
input(用于接收上传文件的 input Node)有如下自定义 attribute 属性:
- maxFileSize //该输入框最大文件大小(单位:b)
- imgTo //如果上传类型是图片 将图片预览返回到对应 id 的 img 标签
- uploadUrl //该输入框的上传地址
- actionName //上传标志
- jsonTo //如果需要可以将上传完毕的返回值打到对应 id 的 input 标签上
input(用于接收接收上传完毕的返回值)有如下自定义 attribute 属性:
- jsonValue:res.result
- config(全局配置)
- maxFileSize //全局默认文件大小
- uploadUrl //全局默认上传路径
- onUploadFinish(rs,actionName) //上传完毕的回调函数
示例:
1 | <input |
1 | var upload = require('upload') |
uploadImgs
多图上传组件。
API
int()
1 | int({ |
isBusy(img)
用于返回对应的图片是否正在上传
autoPage
滑动分页插件。
API
int(config)
初始化函数,用于配置分页信息
- config
1 | { |
setConfig(key,value)
用于对分页配置进行动态修改
- key(String):要修改的配置键名(支持多级)
- value:对应的修改值
getConfig(key)
用户获取某个配置项
- key(String):要获取的配置型键名
update(page)
一般用于在动态修改完分页配置之后,更新分页数据
- page(String/Number/null):更新完配置后默认加载的数据页
- String:key=value(同 int 参数中的 pageNow);
- Number:页码
- Null:默认加载第 1 页
formatData(baseData,itemJson)
用于将字符串中的 json 引用值替换为 json 实际值
1 | // 返回: hello world |
pageNow
属性值。用于获取当前页码
关于 config.draw 的示例
说明:draw 方法用于数据渲染,可以这么理解:
比如每个分页中有 10 条数据,draw 方法就是用来渲染这 10 条数据的每一条的样子
Function 类型
(1) 返回 Node
1 | draw:function(rs){ |
(2)返回 String
1 | draw:function(rs){ |
String 类型(简单粗暴,一般这种配置即可满足需求)
通过关键字{}来实现数据引用
1 | draw:"<div>{name}<div>" |
passwordWidget
6 位密码输入组件。
API
show()
显示
hide()
隐藏
setTitle(txt)
设置标题文字
setRegetPasswordUrl(url)
设置忘记密码链接
onFinish
密码输入完毕回调
1 | passwordWidget.onFinish = function(passwordTxt) { |
switchButton
滑动开关。
使用
1 | int({ |
topTip
页面顶部通知插件。
使用
1 | // 显示通知,6秒后消失。 |
gritter
基于 jquery.gritter.js 封装的 sea.js
通知插件。
使用
show
显示一条提示信息,并在 1300ms 后自动消失
1 | seajs.use('seajs-gritter', function(gritter) { |
tablePage
用于为表格提供 ajax 数据源分页功能,并自动创建分页按钮的 sea.js
组件。
HTML 部分
1 | <table id="example1" class="table table-bordered table-striped"> |
API
int(config)
用于对分页参数进行初始化配置,并在配置完毕后立即执行数据获取并绘制分页
- config
1 | { |
setConfig(key,value)
用于动态修改分页配置(初始化时候的 config 参数),如:分页大小,筛选条件等
- key:config 中欲修改的键名(支持多级)
- value:欲修改的值
run([page])
- page:可选参数。目标页 默认值:1
nowPage
属性值。用于获取当前页
onFinish
所有行绘制完毕的回调
1 | tablePage.onFinish = function(rs) { |
关于 config.data 中的 fucs:
自增型数据(string)
说明:一般用于表格首列的序号
关键字:”$”
示例:”$1” 表示生成从 1 开始的递增序号
引用型变量(string)
说明:很多时候单元格的内容是服务器返回的 json 数据来填充的,它的作用就是引用该数据
关键字:”{}”
示例:
1 | data:["{uid}"] |
混合用法:
1 | data:["<div class='xxx' onclick='alert({date})'>{uid}</div>"] |
自定义函数(function)
说明:如果单元格的内容过于复杂,可通过自定义函数来实现内容填充
注意:函数的返回值类型为 string 或标签元素(object)
示例:
(1) 返回类型为 Node
1 | data:[function(dataJson,addition){ |
(2) 返回类型为 String
1 | function(dataJson){ |
小贴士:
该插件可直接配合 bootstrap.min.css 使用,也可根据生成的标签类自定义样式
calendar
基于 calendar.js 封装的 sea.js
日期选择器。
特性
- 优化原有 calendar.css,减少对其它节点样式的影响
- 可批量绑定输入框,并自动创建 wrapper
- date 视图下点击年份可进入编辑模式来快速定位到所需日期(新增:canEditYear 属性)
- 修改默认显示日期为 selectedRang 中的结束日期,并支持字符串类型的日期默认值
使用
1 | //inputNodes:input节点/input集合 |