要来就来一包!一包五颜六色的 Sea.js 插件,满足前端开发的各种需求!有校验插件,分页插件,ajax 插件,弹窗插件等等。 项目地址

在线演示

必读

1. 所有插件默认拥有 newInstance 方法,用于创建新实例

seajs-autoPage 为例:

1
2
3
4
var autoPage1 = require('seajs-autoPage'),
autoPage2 = autoPage1.newInstance()
autoPage1.int()
autoPage2.int()

2. 插件本身不兼容 IE8,如果需要兼容必须引用 fixJsForIE8

3. seajs-myUntils.js 和 seajs-httpClientConfig.js 的报错处理

如果你使用的模块中包含了 seajs-utilsseajs-httpClient 模块,那么你必须在项目根目录下创建 seajs-myUntils.jsseajs-httpClientConfig.js。具体配置可参考它们的文档

4. 推荐使用 sealoader 来管理你的 seajs 插件

jquery

适用于 sea.js 的 jquery(v1.9.1)。

使用

1
2
3
// 页面顶部全局引入
var $ = require('seajs-jquery')
var jQuery = $

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
2
3
4
5
6
7
8
9
10
11
use(
[
['a', 'b'], //代表b.js依赖a.js 会先加载a 后加载b 这个两个为一组js
['c', 'd'], //代表d.js依赖c.js 会先加载c 后加载d 这个两个为一组js
'f', //单js可无须数组包装
],
function(o) {
//所有插件加载完毕会执行该方法
//o:加载完毕之后返回的对象 o[url]可取出查看
},
)

$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
2
3
4
5
6
bindCopy({
node: id / node,
txt: '要复制的内容',
onSuccess: function() {},
onError: function() {},
})

其它:

  1. 某些浏览器后退会由于 BF Cache 机制不重新执行 js 以及还原页面元素,utils 插件会自动刷新该缓存类型的页面
  2. 此插件只保留以上基础 api,要求项目的根目录必须创建seajs-myUtils.js模块来扩展项目的个性需求
  3. seajs-myUtils 不可依赖 seajs-utils,如果需要的话,可以通过添加如下模块解决:
1
2
3
4
//该方法会自动执行 请勿随意手动调用
exports.superInt = function(utils) {
//utils 为基础 utils(seajs-utils)模块
}

waitting

loading 提示,一般用于数据加载过程的等待提示。

使用

调用 show 方法后,等待提示会在 400 ms 后才会出现

1
waitting.show('数据加载中...')
1
waitting.hide()

commom-tip

用于在页面中央显示一条提示信息的 sea.js 插件。

API

show

显示一条提示信息,并在 1300ms 后自动消失

1
2
3
4
5
seajs.use('seajs-commom-tip', function(tip) {
// content: 消息内容
// isSuccess: 是否为成功提示,默认: true
tip.show(content, isSuccess)
})

validate

通用表单校验插件。

使用

给对应的表单标签增加对应的校验规则即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form>
//手机验证码校验(利用基本校验类型:int 并组合相关属性)
<input
type="text"
placeholder="短信验证码"
validType="int"
minlength="6"
maxlength="6"
errorTip="请输入正确的验证码"
/>
//手机号校验
<input type="text" placeholder="请输入手机号" validType="phoneNum" />
//身份证号校验
<input type="text" placeholder="请输入身份证号" validType="idCard" />
</form>

支持的校验规则

  1. validType:
    1. num 整数或小数
    2. int 整数
    3. float 整数或小数(等同于 num)
    4. phoneNum 手机号
    5. idCard 身份证
    6. bankCard 银行卡
  2. minNum:数字型的最小值(minNum=”0”:代表>=0;minNum=”!0”:代表>0)
  3. maxNum:数字型的最大值(maxNum=”10”:代表<=10;maxNum=”!10”:代表<10)
  4. maxLength:input 内容的最大长度
  5. minLength:input 内容的最小长度
  6. floatLength:小数位
  7. isEmpty:true 可为空(1204 版本之后效果等同于 minLength=”0”)
  8. errorTip:自定义错误提示
  9. firstZero:首位是否可为 0(默认:true)
  10. noSpace:空格不计入字数(默认:false)
  11. isByte:是否按照字节来计字数(默认:false)
  12. focusOnError:校验未通过的表单元素是否自动获得焦点(默认:true)
  13. noBorder:校验未通过的表单元素去除红色警告框(默认:false)
  14. notTipNext:1204 版本之后,错误提示的位置调整为距离上下元素 4px,如果给提示信息下方元素设置上该属性,则插件会忽略该元素继续向下遍历元素(默认:false)
  15. forceValid:某些特殊的,比如 input[type=checkbox]需要校验,但是其 display=’none’会导致插件忽略该元素,通过设置该属性为”true”可解决(默认:false)
  16. vIptWrapper:用于将 input 的父容器设置为下方出错提示的参照物(出错提示将出现在该元素的下方),效果等同于在该元素的 class 中添加类”vic”(不推荐)
  17. vMyWrapper:用于无法通过关键字 16 为 input 设置容器的情况,直接给该 input 标签添加该属性,值等于目标容器 id
  18. noErrorBorder:效果等同于关键字 13,但目前推荐使用该关键字
  19. noErrorTip:不显示出错提示(默认:false)
  20. 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
2
document.getElementById('ipt').validMe(true) //对 id 为 ipt 的输入框进行校验 由于 onlyValide=true,将只返回 true/false
document.getElementById('ipt').validMe(false) //对 id 为 ipt 的输入框进行校验 由于 onlyValide=false,可从返回值中取得校验结果(isok),和错误提示(tip)

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
2
3
4
input.setStyleAfterError({
color: 'red',
backgroundColor: 'black',
})

插入自定义校验

1
2
3
4
5
;[input / textarea / select].myValid = function() {
if (this.value != document.getElementById('pw1').value) {
return '两次密码输入不一致'
}
}

checkbox 校验

1
2
3
4
// 校验规则需通过插入自定义校验实现
input[(type = 'checkBox')].myValid = function() {
if (!this.checked) return '请先勾选我'
}

form 表单插入自定义校验

在所有表单元素校验通过之后,再进行的最后一道校验,此时的校验一般与表单元素内容无关

1
2
3
;[form].myValid = function() {
return true / false
}

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
int({
sendBtn:点击获取验证码的按钮(node),
validIpts:获取验证码之前需要校验的输入框(单个node或node数组),
//获取失败(rs.code!=0)的回调,如果不实现该回调,则会默认一个错误提示
onError:function(rs){
//rs:请求验证码的返回值
},
//获取成功(rs.code==0)的回调,非必须项。
onSuccess:function(rs){
//rs:请求验证码的返回值
},
url:请求地址(string),
// parameters:请求参数(string/function)
// parameters:'phone=123456',
parameters:function () {
var phone = document.getElementById('phone_input').value
return 'phone=' + phone
}
method:请求方式(默认get)
})

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
2
httpClient.get('http://www.baidu.com') //执行同步请求
alert(httpClient.rs) //取值

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
2
3
4
5
// 返回:t=1&m=2
httpClient.formatData({
t: '1',
m: '2',
})

showWaitting

属性值(Boolean)。用于设置是否自动显示加载过渡画面

注意:

此插件只保留以上基础 api,要求项目的根目录下必须创建 seajs-httpClientConfig.js 模块来扩展项目的个性需求
如果标准 API 已经满足需求,则 seajs-httpClientConfig 内容如下即可:

1
define(function(require, exports, module) {})

如需个性化配置,则内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
define(function(require, exports, module) {
return {
//获取数据成功的回调
onSuccess: function(onSuccess, json, txt, redo) {
//onSuccess:获取数据成功要执行的函数 也就是post/get传入的onSuccess函数,可以在这里进行各种条件判断是否执行
//json:自动序列化为json的返回值
//txt:原始返回值
//redo:如果调用redo(),相当于重新执行该请求
},
//获取数据失败的回调,优先级低于直接调用post/get中传入的onError
onError: function(status) {
//status:失败状态码
},
}
})

modal-common

弹窗插件

API

int(configure)

初始化模态框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
int({
content:模态框内容(html/Node),
afterShow:function(wrap_content){
//模态框显示完毕的回调,wrap_content为模态框内部content的直接容器
},
afterClose:function(){
//模态框关闭的回调
},
autoHide:是否自动消失(默认:false),
hideOnClickOut:点击模态框外部是否触发关闭(默认:false),
hasBac:是否有灰色蒙层(默认:true),
canClickOut:在hasBac为false的情况下,是否可点击模态框以外的元素
overflow:content容器.style.overflow(默认:只有垂直滚动条),
hasWrap:是否需要白色圆角背景(默认:true),
//以下属性需要hasWrap:true
padding:content容器.style.padding(默认:0 90px),
hasShadow:是否需要阴影(默认:false),
hasTitleBar:是否需要标题栏(默认:false),
//title属性需要hasTitleBar:true
title:标题内容,
hasClose:是否需要关闭按钮(默认:false),
closePosition:关闭按钮位置(示例:right: 15px;top:5px; 默认为右上角),
//以下属性不依赖hasWrap
textAlign:content容器.style.textAlign(默认:center)
})

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
2
3
4
5
6
7
seajs.use('seajs-ajaxForm', function(ajaxForm) {
ajaxForm.onFormResult = function(data, actionName, raw) {
// data: 如果返回值为 json 数据则该值为 json 对象,否则为原始字符串数据
// actionName: 用于区分当前触发回调的是哪个 ajaxForm
// raw: 返回值的原始字符串数据
}
})

addActionResult

单独管理表单的提交回调。

1
2
3
4
5
6
seajs.use('seajs-ajaxForm', function(ajaxForm) {
ajaxForm.addActionResult('actionName', function(data, raw) {
// data: 如果返回值为 json 数据则该值为 json 对象,否则为原始字符串数据
// raw: 返回值的原始字符串数据
})
})

mySubmit

提交表单。

1
2
3
// formDom:某绑定了 actionName 的 form 对象,可以通过 dom 选择器获得
formDom.mySubmit() // 校验通过后执行提交
formDom.mySubmit(true) // 不校验,直接提交

getFormData

用于获取指定 form 内要提交的表单内容,返回值可以配合 httpClient 使用。

1
2
3
seajs.use('seajs-ajaxForm', function(ajaxForm) {
ajaxForm.getFormData(formDom) // 返回形如 a=1&b=2 的 query 字符串
})

serachIpt

用于输入框在输入时实时获取数据的 sea.js 插件,一般用于动态搜索。

API

int(config)

插件初始化

  • config:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
//要绑定的输入框id
"iptId":"",
//要绑定的输入框Node
iptNode:(node类型数据与iptId二选一)
//获取数据的地址
"url":"",
//输入框内容对应的提交键名
"searchKey":"",
//获取到的json数据中 需要用的数组对应的键名 如:{code:0,dataResult:[{"id":1},{"id":2}]} 显然真正需要的数据是在dataResult中,那么键名就填dataResult 这样省得后面的引用每次都要写上它
"dataKey":"",
//http请求类型 默认:"get"
"method":"",
//输入内容过滤器 返回值类型 Boolean 一般在里面判断输入框内容是否符合某个条件 返回true/false 以此决定是否将当前输入内容提交
"filter":function(value){
//value即为输入框内容
},
//获取到数据的回调
"draw":function(data){
//data为获取到的 json[dataKey]
},
// parameters:请求参数(string/function) 一旦设置该项,则 searchKey 会失效
// parameters:'query=xxx',
parameters:function () {
var query = document.getElementById('search_input').value
return 'query=' + query
}
}

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
2
3
4
5
6
7
8
9
10
11
<input
type="file"
jsonTo="x"
imgTo="i"
accept="image/gif,image/jpeg,image/png,image/jpg"
actionName="xxx"
name="file"
uploadUrl="/file/image"
/>
<input id="x" jsonValue=".result" />
<img src="" alt="" id="i" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var upload = require('upload')
//全局配置。标签内的自定义标签优先级最高,其次是全局配置。
upload.int({
maxFileSize: 1024 * 1024,
uploadUrl: '/file/image',
// 绑定的上传输入框,如不填则监听所有上传事件(node/node array)
uploadIpts: document.getElementById('uploadInput'),
onUploadFinish: function(rs, actionName) {
//若页面中只有一个上传框,可以不设actionName做区分
//function(rs){console.log(rs)}即可
switch (actionName) {
case 'xxx':
console.log(rs)
break
}
},
})

uploadImgs

多图上传组件。

API

int()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
int({
subBtn:上传按钮(type:Node),
uploadUrl:上传路径,
//比如最多可上传5张图片,那么页面中首先得有5个img标签用于上传预览,将它们添加进数组中,上传操作会依次在每个img对象上实现预览
imgArray:预览img数组(type:Array),
name:上传图片对应的key(也就是form表单中的name,图片就相当于是value)。注意:也可在img标签中单独配置name,形如:<img name="file1">,那么该图片的提交将优先取"file1"为name值,
onUploadFinish:function(rs,index){
//图片上传完成的回调。rs:返回内容,index:对应上传完毕的图片序号(从0开始)
},
hasRemoveBtn:是否需要取消上传按钮(默认:true,会在图片预览图的右上角出现),
removeFuc:function(index){
//点击取消按钮的回调,index:对应取消上传的图片序号
},
//取消按钮样式
removeBtnStyle:{
//示例:
zIndex:1000,
color:red
},
//等待上传浮层样式
loadingStyle:{
//示例:
zIndex:1000,
color:red
},
maxFileSize:图片大小限制(单位:b)
})

isBusy(img)

用于返回对应的图片是否正在上传

autoPage

滑动分页插件。

API

int(config)

初始化函数,用于配置分页信息

  • config
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
//分页数据容器id
"contId":"container_hot",
//分页模式 默认值:0(下拉加载);1:点击加载
“loadMode”:1,
//获取数据地址
"url":"",
//分页数据源对应的键名,"result.data"则会将返回json数据中result.data中的数据分条传入"draw"方法中。如果没有数据包装,"dataKey"可留空
"dataKey":"result.data"
//默认初始页 格式key=value(根据后台接口设置key值)
"pageNow":"pageNo=1",
//分页数据条数 格式key=value(根据后台接口设置key值)
"pageSize":"pageSize=5",
//在执行int方法后是否立即加载默认页数据,默认true
"autoRun":false,
//http请求类型,默认"get"
"method":"post",
//获取不到数据时候的提示信息
"emptyTip":[String/Element]
//每条数据的处理回调,此函数一般用于渲染数据,返回类型(String/Element)
"draw":function(rs,addition){
//rs:该页的一条数据
//addition:其它数据({
baseJson:完整返回数据
index:当前条数
})
}
//每页数据绘制完毕的回调函数,rs为该页json数据(多条)
"onFinishDraw":function(rs){

},
//默认情况下,分页插件会通过当前返回的数据项和pageSize对比来判断数据是否加载完毕。也可通过设置以下方法来实现自定义的判断,该方法的传入参数不基于"dataKey",为完整的请求数据
"isLoadOver":function(baseRs){
return true/false;
}
}

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
2
// 返回: hello world
formatData('hello {who}', { who: 'world' })

pageNow

属性值。用于获取当前页码

关于 config.draw 的示例

说明:draw 方法用于数据渲染,可以这么理解:

比如每个分页中有 10 条数据,draw 方法就是用来渲染这 10 条数据的每一条的样子

Function 类型

(1) 返回 Node

1
2
3
4
5
draw:function(rs){
var div=document.createElement("div");
div.innerHTML=rs.name;
return div;
}

(2)返回 String

1
2
3
draw:function(rs){
return "<div>"+rs.name+</div>;
}

String 类型(简单粗暴,一般这种配置即可满足需求)

通过关键字{}来实现数据引用

1
draw:"<div>{name}<div>"

passwordWidget

6 位密码输入组件。

API

show()

显示

hide()

隐藏

setTitle(txt)

设置标题文字

setRegetPasswordUrl(url)

设置忘记密码链接

onFinish

密码输入完毕回调

1
2
3
passwordWidget.onFinish = function(passwordTxt) {
//passwordTxt:密码明文
}

switchButton

滑动开关。

使用

1
2
3
4
5
6
7
8
9
10
11
int({
name: '开关 Label',
// 开关容器
parentNode: document.getElementById('container'),
// 是否默认开启
isOn: true,
// 开关状态发生改变的回调
onChange: function(isOn) {
// isOn:开关是否打开(true/false)
},
})

topTip

页面顶部通知插件。

使用

1
2
// 显示通知,6秒后消失。
show('测试通知')

gritter

基于 jquery.gritter.js 封装的 sea.js 通知插件。

使用

show

显示一条提示信息,并在 1300ms 后自动消失

1
2
3
4
5
seajs.use('seajs-gritter', function(gritter) {
// content: 消息内容
// isSuccess: 是否为成功提示,默认: true
gritter.show(content, isSuccess)
})

tablePage

用于为表格提供 ajax 数据源分页功能,并自动创建分页按钮的 sea.js 组件。

HTML 部分

1
2
3
4
5
6
7
8
9
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>th1</th>
<th>th2</th>
</tr>
</thead>
<tbody></tbody>
</table>

API

int(config)

用于对分页参数进行初始化配置,并在配置完毕后立即执行数据获取并绘制分页

  • config
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"table":"", //表格Id
"url":"", //数据源地址(可带参)
"dataKey":"", //分页数据源在服务器返回的json中对应的键名(支持多级 如:data.result)。可为空则获取数据基于最外层rs
"pageTotalKey":"", //总页数在服务器返回的json中对应的键名(支持多级 如:params.total_num)
"pageNow":"pageNo=1", //目标页键值对配置。键对应服务器提交参数中的目标页键名,值用于设置起始页码
"pageSize":"pageSize=10", //每页数据条数键值对配置。键对应服务器提交参数中的每页条数键名,值用于设置每页的数据条数
"data":[*fucs //目标表格从左至右单元格的解析方法],
//所有行绘制完毕的回调 效果同 tablePage.onFinish=function(data){}
"onfinish":function(data,addition){
//data:该分页所有返回数据
//addition:其它数据({
baseJson:完整返回数据
rows:当前行
columns:当前列
})
}
}

setConfig(key,value)

用于动态修改分页配置(初始化时候的 config 参数),如:分页大小,筛选条件等

  • key:config 中欲修改的键名(支持多级)
  • value:欲修改的值

run([page])

  • page:可选参数。目标页 默认值:1

nowPage

属性值。用于获取当前页

onFinish

所有行绘制完毕的回调

1
2
3
tablePage.onFinish = function(rs) {
//rs:该分页所有返回数据
}

关于 config.data 中的 fucs:

自增型数据(string)

说明:一般用于表格首列的序号

关键字:”$”

示例:”$1” 表示生成从 1 开始的递增序号

引用型变量(string)

说明:很多时候单元格的内容是服务器返回的 json 数据来填充的,它的作用就是引用该数据

关键字:”{}”

示例:

1
2
data:["{uid}"]
表示该行从左至右第一个单元格的内容=服务器返回的json中,分页数据源中键名为uid的json值

混合用法:

1
2
data:["<div class='xxx' onclick='alert({date})'>{uid}</div>"]
表示该行从左至右第一个单元格的内容为div标签,该div的内容=服务器返回的json中,分页数据源中键名为uid的json值,点击该div会弹出服务器返回的json中,分页数据源中键名为date的json值

自定义函数(function)

说明:如果单元格的内容过于复杂,可通过自定义函数来实现内容填充

注意:函数的返回值类型为 string 或标签元素(object)

示例:

(1) 返回类型为 Node

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
data:[function(dataJson,addition){
//addition:其它数据({
baseJson:完整返回数据
rows:当前行
columns:当前列
})
var div=document.createElement("div");
div.innerHTML=dataJson.countId;
div.onclick=function(){
alert(dataJson.date);
}
div.style.color="red";
return div;
}]
表示该行从左至右第一个单元格的内容为上述函数返回的Div标签

(2) 返回类型为 String

1
2
3
4
function(dataJson){
return dataJson.money+"元";
}
表示该行从左至右第一个单元格的内容为上述函数返回的文本

小贴士:

该插件可直接配合 bootstrap.min.css 使用,也可根据生成的标签类自定义样式

calendar

基于 calendar.js 封装的 sea.js 日期选择器。

特性

  • 优化原有 calendar.css,减少对其它节点样式的影响
  • 可批量绑定输入框,并自动创建 wrapper
  • date 视图下点击年份可进入编辑模式来快速定位到所需日期(新增:canEditYear 属性)
  • 修改默认显示日期为 selectedRang 中的结束日期,并支持字符串类型的日期默认值

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//inputNodes:input节点/input集合
bind(inputNodes, {
// 是否允许手动输入年份以便能够快速定位
canEditYear: true,
// 宽度
width: 280,
// 高度, 不包含头部,头部固定高度
height: 280,
zIndex: 1,
// 相对于目标节点的偏移位置,可设正负值
offset: [0, 1],
// 自定义类,用于重写样式
customClass: '',
// 显示视图
// 可选:date, month
view: 'date',
// 设置选择范围
// 格式:[开始日期, 结束日期]
// 开始日期为空,则无上限;结束日期为空,则无下限
// 如设置2015年11月23日以前不可选:[new Date(), null] or ['2015/11/23']
selectedRang: null,
// 默认日期。默认值:selectedRang中的结束日期或当前日期
date: new Date(),
format: 'yyyy/mm/dd',
// 一周的第一天
// 0表示周日,依次类推
startWeek: 0,
// 星期格式
weekArray: ['日', '一', '二', '三', '四', '五', '六'],
// 日期关联数据 [{ date: string, value: object }, ... ]
// 日期格式与 format 一致
// 如 [ {date: '2015/11/23', value: '面试'} ]
data: null,
// 展示关联数据
// 格式化参数:{m}视图,{d}日期,{v}value
// 设置 false 表示不显示
label: '{d}\n{v}',
// 切换字符
prev: '&lt;',
next: '&gt;',
// 切换视图回调
viewChange: function(view, year, month) {},
// view: 视图
// date: 不同视图返回不同的值
// value: 日期关联数据
onSelected: function(view, date, value) {
// body...
},
// 参数同上
onMouseenter: $.noop,
onClose: $.noop,
})

 评论