并不是所有的模块都有返回值，例如common模块多数时候只是存放网站通用代码，导航栏、返回顶部、分享代码之类，很少对外提供方法，如果确定一个模块不需要任何返回值也可以只引用不赋值，例如 require('./common')，大多数jquery插件模块也都没有返回值，因为jquery插件方法都扩展在jquery对象上，可以直接通过$.METHODNAME的方式使用。
异步加载的模块不会提前就位，而是当前代码执行到该行时才开始请求模块文件，对于jquery和common这种被其他代码强依赖的模块我们希望尽快加载生效，因此使用同步加载，对于大多数效果类模块则应适度使用异步加载，以提高页面性能，但首屏效果应使用同步加载，以提高首屏响应速度。
- audio
-
描述
跨平台音频播放器，详见官网
配置
无
示例
<!--html-->
<audio preload="auto" >
<source src="http://static.refined-x.com/static/sample.mp3" />
</audio>
//js
require('audio');
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
- Copy
-
描述
利用flash技术实现复制文字到剪贴板，详细参数见官网
示例
<div id="d_clip_button">复制</div>
require('copy');
$('#d_clip_button').zclip({
copy: "测试" + Math.random(),
afterCopy:function(){
console.log('复制成功');
}
});
- flv
-
描述
集成vcastr3.0视频播放器，传入视频地址，返回播放器html，支持格式：.swf/.flv
配置
| src |
视频地址 |
| width |
宽,默认480 |
| height |
高,默认320 |
| auto |
默认false，自动播放 |
| ctrl |
默认true，是否有播放控件 |
| loop |
默认false，是否循环播放 |
| logo |
Logo处显示的文字 |
| id |
给embed标签添加id，默认无 |
示例
<!-- html -->
<div class="playarea2"></div>
<div class="playarea3"></div>
//js
var player=require('flv');
var player_2 = player({
src: 'http://static.refined-x.com/static/sample.flv',
loop:true
});
var player_3 = player({
src:'http://player.youku.com/player.php/sid/XOTIwMDA5Nzk2/v.swf'
});
//将播放器插入页面
$('.playarea2').html(player_2);
$('.playarea3').html(player_3);
- jQuery
-
描述
封装1.x、2.x和3.x版本的jquery，seajs.config.js中已配置别名，默认使用1.x
示例
var $ = require('jquery');
console.log($);
- raty
-
描述
评分插件，来自https://github.com/wbotelhos/raty
配置
|
cancel：
|
默认false，创建一个取消按钮；
|
|
cancelPlace：
|
默认'left'，取消按钮的位置
|
|
click：
|
默认undefind，点击回调
|
|
half：
|
默认false，允许半星
|
|
hints:
|
默认 ['bad', 'poor', 'regular', 'good', 'gorgeous']，每颗星星对应的提示
|
|
mouseout：
|
默认undefind，mouseout回调
|
|
mouseover：
|
默认undefind，mouseover回调
|
|
number：
|
默认5，评分的总星数
|
|
precision：
|
默认false，允许选择一个更精确的分数
|
|
readOnly：
|
默认false，让评分不可更改
|
|
score：
|
默认undefind，初始分数
|
|
scoreName：
|
默认'score'，评分插件会创建一个隐藏域存储分数，该项定义隐藏域的name
|
|
single：
|
默认false，评分时只有当前那颗星被点亮
|
|
space：
|
默认true，星星之间是否有间距
|
|
target：
|
默认undefind，jquery选择器格式或原生DOM元素，评分将被显示在该元素中
|
|
targetFormat：
|
默认'{score}'，输出到target的格式模板
|
|
targetKeep：
|
默认false，当鼠标离开星星时target中的分数是否保留
|
|
targetScore：
|
默认undefind，jquery选择器格式或原生DOM元素，用来存储分数的input选择器，插件将不再生成默认隐藏域
|
|
targetText：
|
默认''，目标input的默认显示文字
|
|
targetType：
|
默认'hint'，目标input显示的类型，可选'score'
|
示例
<div class="demo"></div>
require('raty');
$('.demo').raty({
click:function(val){
console.log('打了'+val+'颗星');
}
});
- upload
-
描述
上传插件，支持html5或ifram方式，改自aralejs/upload，集成localResizeIMG插件实现前端图片压缩，集成html5-make-thumb实现选择图片返回缩略图。
配置
| trigger |
唤出文件选择器，可以是：选择器、element、jQuery Object |
| name |
上传文件时对应的 name |
| action |
表单提交的地址。 |
| headers |
表单提交请求headers，默认{}。 |
| data |
随表单一起要提交的数据，支持object格式或同步返回数据的function。 |
| accept |
支持的文件类型，比如 image/\* 为只上传图片类的文件。可选项。 |
| change |
选择文件回调，回调参数为当前所选文件对象。若不设置，选择文件将自动上传，默认null |
| progress |
上传的进度回调，不支持 IE9-。回调的参数分别为 ajaxEvent, 当前上传字节，总字节，进度百分比和当前文件列表。 |
| error |
上传失败的回调函数。 |
| multiple |
是否支持多文件上传。默认为 false。 |
| compress |
图片是否上传前压缩。默认为 false。 |
| compressOption |
上传压缩参数。默认 {}，可配置width和height。 |
| thumb |
接收缩略图的回调，回调参数为缩略图base64和文件对象。仅支持IE10及以上浏览器。 |
| thumbOption |
生成缩略图的配置，默认
width: 0, // thumbnail width
height: 0, //thumbnail height
fill: false, // fill color when the image is smaller than thumbnails size.
background: '#fff', // fill color
type: 'image/jpeg', // mime-type for thumbnail ('image/jpeg' | 'image/png')
size: 'contain', // CSS3 background-size: contain | cover | auto
mark: {}, // watermark
// text watermark.
// mark = {padding: 5, height: 18, text: 'test', color: '#000', font: '400 18px Arial'}
// font: normal, bold, italic
// bgColor: '#ccc' (background color); bgPadding: 5 (padding)
// image watermark. (Note: cross-domain is not allowed)
// mark = {padding: 5, src: 'mark.png', width: 34, height: 45};
stretch: false, // stretch image(small versions) to fill thumbnail (size = auto | contain)
before: null, // call function before process image.
fail: null, // error function
always: null // complete function(done|fail)
|
| success |
上传成功的回调函数。 |
返回方法
| submit() |
提交上传 |
| change(callback) |
设置实例的change回调 |
| success(callback) |
设置实例的成功回调 |
| error(callback) |
设置实例的失败回调 |
| enable() |
恢复实例禁用状态 |
| disable() |
禁用实例 |
演示
<div class="wrap">
<div class="row">
<div class="span-6">
<form class="form m" id="myform">
<p class="form-group">key1：<input type="text" class="form-control" name="key1" value="value1"></p>
<p class="form-group">key2：<input type="text" class="form-control" name="key2" value="value2"></p>
<p class="form-group">文件名称：<input type="text" class="form-control" readonly id="filename"></p>
<div class="from-group">
<button type="button" id="selectFile" class="btn btn-primary">选择</button>
<button type="button" id="doupload" class="btn btn-warning">上传</button>
</div>
</form>
<div class="m" id="uploaded"></div>
</div>
</div>
</div>
require.async('upload', function(Uploader) {
var uploader = new Uploader({
trigger: '#selectFile',
name: 'file',
data: function() {
var serializeArray = $('#myform').serializeArray(),
formData = {};
$.each(serializeArray, function(i, e) {
formData[e.name] = e.value;
});
return formData;
},
action: "http://host.refined-x.com/test/fileupload.php",
change: function(file) {
$('#filename').val(file[0].name);
},
progress: function(event, position, total, percent) {
console.log('已上传 ' + position + '/' + total + ' ' + percent + '%');
},
success: function(response) {
$('#uploaded').html('<img src="' + response.path + '" alt="" />');
}
});
$('#doupload').on('click', function() {
uploader.submit();
});
});
- validform
-
描述
validform表单验证，整合密码强度验证插件。
内置验证规则
|
*：
|
检测是否有输入，可以输入任何字符，不留空即可通过验证；
|
|
*4-16：
|
检测是否为4到16位任意字符；
|
|
n： |
数字类型；
|
|
n4-16： |
4到16位数字；
|
|
f： |
浮点数类型；
|
|
s： |
字符串类型；
|
|
s4-16： |
4到16位字符串；
|
|
p： |
验证邮政编码；
|
|
m： |
手机号码格式；
|
|
tel： |
座机号码格式；
|
|
phone： |
手机或座机号码格式；
|
|
e： |
email格式；
|
|
url： |
验证字符串是否为网址
|
|
其他验证直接写正则
|
例如验证中文：datatype="/^[\u4e00-\u9fa5]*$/" |
配置
这里只列举新增配置和开发中常见问题，普通使用参考演示demo，使用细节访问官方文档。
|
type:
|
默认post，请求方式。（支持jQuery.ajax的所有配置）
|
|
allable:
|
默认false，设置为true将提交属性为disable的元素值
|
|
tiptype:
|
默认1，验证结果显示方式，1:弹出提示，2:输入框后插入
|
|
tipSweep:
|
默认true，是否只在提交前集中验证，每个输入框blur都会出发验证
|
|
dataType：
|
默认"json"，ajax提交方式的返回数据格式
|
|
postonce:
|
默认false，是否只允许提交一次
|
|
ajaxPost:
|
默认true，是否ajax方式提交
|
|
ajaxData:
|
默认无，ajax提交方式的扩展数据，json || function(reutrn json)
|
| ajaxurl |
ajaxurl(实时验证)的处理页需要返回的数据格式：
/*
* type: json
* status: 状态，"y"或"n"
* info: 返回信息，当status不为"y"时此信息将以错误提示的形式显示
*/
{
"status": "n",
"info": "用户名已被注册！"
}
|
| beforeCheck |
表单验证前的操作，需要返回"true / false"决定是否继续执行表单验证
|
| beforeSubmit |
验证后、提交前的操作，需要返回"true / false"决定表单是否提交
|
方法
完整方法见Validform对象
| submitForm(flag,url) |
以初始化时传入参数的设置方式提交表单，flag为true时，跳过验证直接提交，同时也将跳过beforeSubmit钩子函数；传入了url地址时，表单会提交到这个地址
|
| check(bool,selector) |
bool为true时则只验证不显示提示信息
对指定对象进行验证(默认验证当前整个表单)，通过返回true，否则返回false（绑定实时验证的对象，格式符合要求时返回true，而不会等ajax的返回结果）
|
示例
<style>
.demo {
width: 50em;
margin:auto;
}
</style>
<form class="demo form" id="reg_form">
<div class="form-group">
<label class="control-label">用户名：</label>
<input type="text" class="form-control" name="username" datatype="/^[A-Za-z0-9\u9fa5@\u9fa5.]{2,20}$/" sucmsg="用户名验证通过！" nullmsg="请输入用户名！" errormsg="用户名非法!">
</div>
<div class="form-group">
<label class="control-label">密 码：</label>
<input type="password" class="form-control" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间！" plugin="passwordStrength">
<span class="passwordStrength r"><span>弱</span><span>中</span><span class="last">强</span></span>
</div>
<div class="form-group">
<label class="control-label">确认密码：</label>
<input type="password" class="form-control" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的密码不一致！">
</div>
<div class="form-group">
<label class="control-label">邮箱：</label>
<input type="text" class="form-control" name="email" datatype="e" errormsg="请输入正确的邮箱!" ignore="ignore">
</div>
<div class="form-group">
<label class="control-label">验证码：</label>
<div class="row">
<div class="span-6">
<input type="text" class="form-control" name="validnum" datatype="*" ajaxurl="http://host.refined-x.com/test/validRand.php" sucmsg="验证码正确！" nullmsg="请输入验证码！" errormsg="验证码错误!">
</div>
<div class="span-6">
<img src="http://temp.im/80x30/?text=8888" style="vertical-align: middle;"> 看不清？<a href="###">换一张</a>
</div>
</div>
</div>
<div class="help-block">
<label class="checkbox"> 同意用户协议<input type="checkbox" name="agree" datatype="*" nullmsg="请阅读并同意用户协议"></label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">注册</button>
</div>
</form>
//js
require('validform');
var loginForm = $('#reg_form').Validform({
ajaxPost:true,
url: 'http://host.refined-x.com/test/ajax.php',
usePlugin:{ //密码强度插件，不需要就删掉
passwordstrength:{
minLen:6, //设置密码长度最小值，默认为0;
maxLen:16, //设置密码长度最大值，默认为30;
trigger:function(obj,error){
if(error){
obj.parent().find(".Validform_checktip").show();
obj.parent().find(".passwordStrength").hide();
}else{
obj.parent().find(".Validform_checktip").hide();
obj.parent().find(".passwordStrength").show();
}
}
}
},
callback:function(res){
}
});
- video
-
描述
集成video-js实现的跨平台视频播放插件，支持HTML5视频的跨平台播放，详见项目主页
配置
| controls |
是否有控件 |
| autoplay |
是否自动播放 |
| preload |
预加载，可选'auto','metadata','no'，分别是自动，仅加载视频信息数据，不加载 |
| poster |
封面图片 |
| loop |
默认false，是否循环播放 |
| width |
播放器宽度 |
| height |
播放器高度 |
| 其他 |
见官方文档 |
示例
<video id="really-cool-video" class="video-js vjs-default-skin">
<source src="http://static.refined-x.com/static/sample.mp4" type='video/mp4'>
<p class="vjs-no-js">不支持js的浏览器会看到这个</p>
</video>
require('video');
var player = videojs('really-cool-video', {
width: 640,
height: 264,
poster: seajs.root + '/web/img/apple-touch-icon.png',
controls:true,
autoplay:true,
preload:'auto'
});
- ajax-cache
-
描述
为jQuery.ajax()扩展两种缓存方式，定时缓存和快照缓存，依赖jQuery。
定时缓存
定时缓存即在特定时长内缓存数据，开启定时缓存的请求，在第一次成功返回数据后将不再重复发起请求，而是直接使用缓存数据，缓存过期后将自动清除，再次请求成功后将再次缓存，开启新的缓存周期，原理类似于函数防抖。
开启定时缓存需要为ajax配置localCache: Number，数字为缓存时长，单位ms。
快照缓存
快照缓存即把每一次成功返回的ajax结果保存为快照，下次发起相同请求（判断依据是url和参数相同）时第一时间将快照取出返回给回调函数，待真实数据返回后校验与快照是否相同（需要数据为json格式），若相同则缓存命中，会为对象格式的快照数据添加一个'snapshootEqual'属性值为'true'，不同则再次调用回调函数并传入真实数据，为了使业务中能够区分出快照数据，会为对象格式的快照数据添加一个'snapshoot'属性值为'true'。
开启快照缓存需要为ajax配置localCache: 'snapshoot'选项。
注意
使用ajax缓存时必须用'success'配置Ajax的回调函数。
演示
<button id="test" type="button">send ajax</button>
<div id="log"></div>
//js
require('ajax-cache');
var $log = document.getElementById('log');
$('#test').on('click', function() {
$.ajax({
url: "http://rapapi.org/mockjsdata/9195/common/getRandom",
dataType:'json',
localCache: 'snapshoot',
success: function(res) {
if (res.snapshoot) {
$log.innerText = ('快照数据:' + res.data);
} else if (res.snapshootEqual) {
$log.innerText = ('快照命中');
} else {
setTimeout(function() {
$log.innerText = $log.innerText + ('\n最新数据:' + res.data);
}, 0);
}
}
});
});
- album
-
描述
相册插件，依赖幻灯片模块(slide.js)。返回Album方法，语法：Album(config)，或者使用jquery插件语法：$el.album(config)
配置
| blankclose |
默认false，点空白关闭 |
| title |
默认null，匹配的元素文字将作为标题显示 |
| cell |
默认'li'，相册展示的元素 |
| trigger |
默认等于cell，触发相册的元素，可传入cell的子元素选择器 |
| hook |
默认空字符串，用于附加自定义样式 |
| effect |
切换效果，可选 slide | fade | toggle |
| animate |
动画曲线，默认“swing” |
| duration |
效果时长，单位ms，默认480 |
| prevHtml |
左箭头html |
| nextHtml |
右箭头html |
| lazyload |
默认true，图片是否应用懒加载，基于DOM创建需手动给图片增加slide-src属性存储图片地址,基于数据创建将自动处理 |
| onSlide |
回调，参数同slide.js |
| onReady |
扩展，参数同slide.js |
示例
<style>
.demo{overflow: hidden;padding:1em;}
.demo li{float: left;width: 240px;height: 150px;overflow: hidden;margin:0 .5em;}
</style>
<div class="demo">
<ul>
<li class="show">
<img src="http://temp.im/640x320/?1" >
<div class="_title">1这行字会成为标题</div>
</li>
<li class="show">
<img src="http://temp.im/640x320/?1" >
<div class="_title">2这行字会成为标题</div>
</li>
<li class="show">
<img src="http://temp.im/640x320/?3" >
<div class="_title">3这行字会成为标题</div>
</li>
<li class="show">
<img src="http://temp.im/640x320/?4" >
<div class="_title">4这行字会成为标题</div>
</li>
<li>
<img src="http://temp.im/640x320/?5" >
<div class="_title">这个li不会在相册中显示</div>
</li>
</ul>
</div>
require.async('album',function(){
$('.demo').album({
title: '._title',
cell: '.show'
})
})
- autocomplete
-
描述
自动补全插件，移植自jquery.autocomplete
配置
| serviceUrl |
远程请求地址，返回数据格式：
//格式一，有附加数据
{
"suggestions": [
{ "value": "United Arab Emirates", "data": "AE" },
{ "value": "United Kingdom", "data": "UK" },
{ "value": "United States", "data": "US" }
]
}
//格式二，无附加数据
{
"query": "Unit",
"suggestions": ["United Arab Emirates", "United Kingdom", "United States"]
}
|
| suggestionsKey |
远程数据字段名称，默认'suggestions' |
| lookup |
本地查找数据，数据格式见示例。 |
| onSelect |
选中匹配项回调方法，接收选中的数据对象为参数。 |
完整API见官方文档
示例
<!-- html -->
<form>
<input type="text" name="country" id="autocomplete-ajax" />
<button type="submit">search</button>
</form>
// js
var countriesArray = [{"value":"Andorra","data":"AD"},{"value":"United Arab Emirates","data":"AE"},{"value":"Afghanistan","data":"AF"},{"value":"Antigua and Barbuda","data":"AG"},{"value":"Anguilla","data":"AI"},{"value":"Albania","data":"AL"},{"value":"Armenia","data":"AM"},{"value":"Netherlands Antilles","data":"AN"},{"value":"Angola","data":"AO"},{"value":"Antarctica","data":"AQ"},{"value":"Argentina","data":"AR"},{"value":"American Samoa","data":"AS"},{"value":"Austria","data":"AT"},{"value":"Australia","data":"AU"},{"value":"Aruba","data":"AW"},{"value":"Åland Islands","data":"AX"},{"value":"Azerbaijan","data":"AZ"},{"value":"Bosnia and Herzegovina","data":"BA"},{"value":"Barbados","data":"BB"},{"value":"Bangladesh","data":"BD"},{"value":"Belgium","data":"BE"},{"value":"Burkina Faso","data":"BF"},{"value":"Bulgaria","data":"BG"},{"value":"Bahrain","data":"BH"},{"value":"Burundi","data":"BI"},{"value":"Benin","data":"BJ"},{"value":"Saint Barthélemy","data":"BL"},{"value":"Bermuda","data":"BM"},{"value":"Brunei","data":"BN"},{"value":"Bolivia","data":"BO"},{"value":"British Antarctic Territory","data":"BQ"},{"value":"Brazil","data":"BR"},{"value":"Bahamas","data":"BS"},{"value":"Bhutan","data":"BT"},{"value":"Bouvet Island","data":"BV"},{"value":"Botswana","data":"BW"},{"value":"Belarus","data":"BY"},{"value":"Belize","data":"BZ"},{"value":"Canada","data":"CA"},{"value":"Cocos [Keeling] Islands","data":"CC"},{"value":"Congo - Kinshasa","data":"CD"},{"value":"Central African Republic","data":"CF"},{"value":"Congo - Brazzaville","data":"CG"},{"value":"Switzerland","data":"CH"},{"value":"Côte d’Ivoire","data":"CI"},{"value":"Cook Islands","data":"CK"},{"value":"Chile","data":"CL"},{"value":"Cameroon","data":"CM"},{"value":"China","data":"CN"},{"value":"Colombia","data":"CO"},{"value":"Costa Rica","data":"CR"},{"value":"Serbia and Montenegro","data":"CS"},{"value":"Canton and Enderbury Islands","data":"CT"},{"value":"Cuba","data":"CU"},{"value":"Cape Verde","data":"CV"},{"value":"Christmas Island","data":"CX"},{"value":"Cyprus","data":"CY"},{"value":"Czech Republic","data":"CZ"},{"value":"East Germany","data":"DD"},{"value":"Germany","data":"DE"},{"value":"Djibouti","data":"DJ"},{"value":"Denmark","data":"DK"},{"value":"Dominica","data":"DM"},{"value":"Dominican Republic","data":"DO"},{"value":"Algeria","data":"DZ"},{"value":"Ecuador","data":"EC"},{"value":"Estonia","data":"EE"},{"value":"Egypt","data":"EG"},{"value":"Western Sahara","data":"EH"},{"value":"Eritrea","data":"ER"},{"value":"Spain","data":"ES"},{"value":"Ethiopia","data":"ET"}];
require('autocomplete')
$('#autocomplete-ajax').autocomplete({
lookup: countriesArray, //本地查找数据
onSelect: function(data){
console.log(data);
}
});
- badge
-
描述
主要用于通知未读数的角标，提醒用户点击。返回 Badge方法，语法： Badge(config)，或使用jquery插件语法： $el.badge(config)
配置
| el |
默认 null，要显示徽标的元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)
|
| count |
默认 0，初始徽标数量
|
| slot |
默认 true，是否将当前元素作为徽标显示元素，若为false将在el元素中插入独立徽标
|
| color |
默认 'danger'，徽标色调，支持【色彩】组件中的所有颜色
|
| max |
默认 99，徽标显示的最大值
|
| dot |
默认 false，是否以圆点形式显示
|
返回方法
| count([value]) |
设置/获取当前实例的徽标数
|
示例
<div class="wrap">
<div class="m">
<a href="###" class="btn btn-default demo">Button</a>
<div class="btn btn-primary setmax m-l">设置为100</div>
<div class="btn btn-primary add m-l">+</div>
<div class="btn btn-primary min m-l">-</div>
<div class="btn btn-primary setmin m-l">设置为0</div>
</div>
<div class="p">独立显示：<span class="demo2 m-l"></span>
<div class="btn btn-primary setmax2 m-l">设置为100</div>
<div class="btn btn-primary add2 m-l">+</div>
<div class="btn btn-primary min2 m-l">-</div>
<div class="btn btn-primary setmin2 m-l">设置为0</div>
</div>
</div>
require('badge');
var badge1 = $('.demo').badge({
count: 1
});
$('.setmax').on('click', function() {
badge1.count(100);
});
$('.setmin').on('click', function() {
badge1.count(0);
});
$('.add').on('click', function() {
badge1.count(badge1.count() + 1);
});
$('.min').on('click', function() {
badge1.count(badge1.count() - 1);
});
var badge2 = $('.demo2').badge({
slot: false,
count: 9,
color: 'success'
});
$('.setmax2').on('click', function() {
badge2.count(100);
});
$('.setmin2').on('click', function() {
badge2.count(0);
});
$('.add2').on('click', function() {
badge2.count(badge2.count() + 1);
});
$('.min2').on('click', function() {
badge2.count(badge2.count() - 1);
});
- base
-
描述
封装常用工具
返回方法
| getUID() |
返回一个递增数字 |
| getUUID([length]) |
返回一个随机数字字母组合，接收长度参数，不传默认6位 |
| deepcopy(source) |
多维数组/对象数组深拷贝 |
| getStyle(ele,attr) |
获取元素的属性值，ele：元素；attr：要获取的属性，返回属性值 |
| $.cookie(name,value) |
操作cookie，name：键名；value：设置为的值，一个参数取值，返回value，两个参数赋值，无返回值 |
| browser |
获取浏览器信息：
| isMobile |
[boolean]是否移动设备 |
| ie |
[number]返回ie版本，ie11及以上和非ie返回0 |
| platform |
[string]浏览器运行平台 |
| agent |
[string]浏览器用户代理头信息 |
| support3d |
[boolean]是否支持3d转换 |
|
| url |
url操作方法
| get(name, [url]) |
/*
* @name：要获取的参数名
* @url：要检索的url，可选，默认检索当前窗口url
*/
// 当前url
http://localhost:8001/web/pro-list.htm?cat_id=2643
// js
console.log(base.url.get('cat_id')); // 输出 2643
console.log(base.url.get('cat_id','http://a.b.c?cat_id=wakaka')); // 输出 wakaka
|
| set(name, val, [url]) |
console.log(base.url.set('cat_id','test', 'http://a.b.c?cat_id=wakaka'));
// 输出 'http://a.b.c?cat_id=test'
|
|
| storage |
localStorage操作模块。
| val(key, [val]) |
数据存/取，支持对象、数字格式自动个转化
base.storage.val('test',{a:1}); //存
base.storage.val('test'); //{a:1}
|
| remove(key) |
删除指定字段数据
base.storage.remove('test');
|
| clear([safeStorage]) |
清空本地数据，safeStorage是可选保留字段，数组格式
base.storage.clear();
|
| leaveSpace() |
返回剩余空间
base.storage.leaveSpace(); //返回剩余空间，单位B
|
|
| throttle(fn, [delay], [duration]) |
函数节流，用于过滤resize，mousemove，scroll这类频连续繁触发事件
/*
* @fn(function)：要节流执行的函数
* @delay(number): 隔内连续触发的事件将被屏蔽，可选，默认64，单位ms
* @duration(number): 间隔内至少执行一次事件，可选，默认640，单位ms
* return(function)：新的节流函数，可直接在密集事件中执行
*/
// 查看控制台，IE效果更明显
var thro = base.throttle(function(){
console.log('thro resize')
});
$(window).on('resize',thro);
|
| getScript(file, [callabck], [option]) |
加载未模块化的普通js文件，可控制jquery依赖、指定css依赖、添加回调，支持批量加载及批量线性依赖加载。
/*
* @file:(string/array) 加载的js路径，规则与require/require.async方法相同
* @callabck(function): 加载完成的回调，接收加载的js文本和返回状态，批量加载只返回最后一个js文本
* @option(object): 若callback是object格式将被作为option使用
* @option.css(boolean/string/array): 是否依赖css，默认false，
传入true将加载与js同名同级css文件
* @option.beforeLoad(function): 加载前回调
* @option.rely(boolen): 批量加载的js是否保持线性顺序，默认false，将同时请求
*/
//利用线性加载特定版本jquery的例子
base.getScript(['http://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js', 'http://host.refined-x.com/test/test2'], function(data) {
var $ = window.jQuery;
$.fn.test2();
}, {
rely: true
});
//也可以写成base.getScript(file, callabck)快捷方式，百度地图示例：
base.getScript('http://api.map.baidu.com/getscript?v=2.0&ak=D1DX6yGc5HGh28jtaAwNzcBi', function() {
var theBody = document.getElementsByTagName('body')[0];
theBody.style.height='600px';
theBody.setAttribute('id','content');
var map = new BMap.Map("content");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
window.setTimeout(function() {
map.panTo(new BMap.Point(116.409, 39.918));
}, 2000);
})
|
| ajaxCombo(config) |
扩展jQuery.ajax方法，使支持请求合并，设置combo:trueajax会被合并，集中以post方式发送到指定url，示例：
/*
* ajaxCombo(option);
* option.comboUrl[string]: 合并请求的发送地址，默认"/test/combo.php"
* option.comboDataKey[string]: 发送合并数据的key，默认"paramArray"
* option.extendData[object]: 合并请求的附加参数，将与option.comboDataKey平级，默认{}
* option.duration[number]: 合并等待时间，单位ms，该时间段内连续发起的请求会被合并，默认16
* option.everytimeout[number]: 单个请求超时时间，单位ms，默认2000，合并请求达到总超时时间后会终止，并将原ajax重新发起。
*/
var base = require('base');
base.ajaxCombo({
comboUrl:"http://host.refined-x.com/test/combo.php" //设置合并请求发送地址
});
$.ajax({
url:"/getxxx/",
combo:true, //触发合并
success:function(){
//do something
}
})
//发送数据格式，数据以"combo1、combo2..."的规则组织：
{
"paramArray": {
"combo1": {
"url": "",
"data": ""
},
"combo2": {
"url": "",
"data": ""
}
}
}
//返回数据格式，数据按原paramArray的结构返回：
{
"combo1": {
"data": "返回数据"
},
"combo2": {
"data": "返回数据"
}
}
|
- bdshare
-
描述
封装百度分享，扩展分享按钮html自定义能力，接收通用设置和share设置，都是标准的百度分享参数格式，获取HTML代码请点这里。
配置
| commonConfig |
通用设置，可选，提供onBeforeClick接口用于点击分享按钮时动态更改配置，详见通用设置。 |
| shareConfig |
share设置，可选，允许对多组分享通过data-tag标记做不同的配置，当只有一组分享时可以直接传入json格式，不传参将使用百度默认值，详见分享按钮设置。 |
注意
- 全站的百度分享代码必须commonjs中通过一次require.async集中配置，多次配置只有最后一次会生效；
- 分享按钮a标签HTML自定义，最多只允许增加一层DOM，否则点击事件不生效。
示例
<!-- 如果页面内有多组分享 -->
<div class="bdsharebuttonbox" data-tag="share_1" data-sharetitle="自定义分享标题">
<a class="bds_mshare" data-cmd="mshare"></a>
<a class="bds_qzone" data-cmd="qzone" href="#"></a>
<a class="bds_tsina" data-cmd="tsina"></a>
<a class="bds_baidu" data-cmd="baidu"></a>
<a class="bds_renren" data-cmd="renren"></a>
<a class="bds_tqq" data-cmd="tqq"></a>
<a class="bds_more" data-cmd="more">更多</a>
<a class="bds_count" data-cmd="count"></a>
</div>
<div class="bdsharebuttonbox" data-tag="share_2">
<a class="bds_mshare" data-cmd="mshare"></a>
<a class="bds_qzone" data-cmd="qzone" href="#"></a>
<a class="bds_tsina" data-cmd="tsina"></a>
<a class="bds_baidu" data-cmd="baidu"></a>
<a class="bds_renren" data-cmd="renren"></a>
<a class="bds_tqq" data-cmd="tqq"></a>
<a class="bds_more" data-cmd="more">更多</a>
<a class="bds_count" data-cmd="count"></a>
</div>
//多组分享js
require.async('bdshare',function(bdshare){
bdshare({
//如果不需要从页面获取分享内容不要加onBeforeClick这一段
onBeforeClick: function(cmd, config) {
var e = (arguments.callee.caller.arguments[0] || window.event).event;
config.bdText = $(e.target).parents('.bdsharebuttonbox').data('sharetitle');
//更改标题，所取的值若为undefined将默认使用页面title
config.bdDesc = 'shareTo ' + cmd;
//cmd是分享目标id，例如人人的id是"renren"，可以用来识别具体分享到哪里
config.bdPic = 'http://temp.im/100x100/';
//更改分享信息的缩略图
config.bdUrl = window.location.href + '?shareTo=' + cmd;
//更改分享信息的url
return config; //返回新的config
}
},[{
tag : 'share_1',
bdSize : 16, //图标尺寸, 16｜24｜32
bdStyle : '1' //图标类型, 0｜1｜2
},
{
tag : 'share_2',
bdSize : 32,
bdStyle: 2
}])
});
- box
-
描述
弹窗插件，具有弹出任意内容、提醒、消息、询问、ajax、图片模式。
返回Box方法，语法：Box.open(params...)，或者使用jquery插件语法：$.box(params...)
方法
| Box.open(anything, [config]) |
打开弹窗
|
| Box.hide([boxid]) |
关闭弹窗，接收弹窗id为参数，无参数将关闭页面上所有弹窗
|
| Box.setSize(boxid,[config]) |
box尺寸重设，接收弹窗id和尺寸配置为参数，无配置时将重计算指定弹窗的尺寸
|
| Box.alert() |
提醒弹窗，弹出短信息，有一个确认按钮
/*
* @param.message[string]:消息内容
* @param.callback[function]:确认按钮的回调
* @param.options[object]:其他参数
* @return: boxID
*/
Box.alert( message, [callback], [options] );
|
| Box.msg() |
消息弹窗，在屏幕顶部显示一条全局消息，特有一个color配置用来定义消息请景色，可选"info，primary，success，warning，danger"
/*
* @param.message[string]:消息内容
* @param.options[object]:其他参数
* @return: boxID
*/
Box.msg( message, [options] );
|
| Box.toast() |
消息气泡，在屏幕中部显示一条消息气泡，默认延时2s自动关闭。
/*
* @param.message[string]:消息内容
* @param.options[object]:其他参数
* @return: boxID
*/
Box.toast( message, [options] );
|
| Box.confirm() |
确认弹窗，弹出一条确认信息，有一个确认按钮和一个取消按钮
/*
* @param.message[string]:消息内容
* @param.sureCall[function]:确认按钮的回调
* @param.cancelCall[function]:取消按钮的回调
* @param.options[object]:其他参数
* @return: boxID
*/
Box.confirm( message, [sureCall], [cancelCall], [options] );
|
| Box.ajax() |
ajax弹窗，弹出ajax获得的内容
/*
* @param.uri[string]:ajax地址
* @param.params[object]:ajax参数
* @param.options[object]:其他参数
* @return: boxID
*/
Box.ajax( uri, [params], [options] );
|
| Box.ifram() |
弹出一个ifram窗口
/*
* @param.uri[string]:ifram页面地址
* @param.params[object]:ifram参数，包括name，width，height
* @param.options[object]:其他参数
* @return: boxID
*/
Box.ifram( uri, [params], [options] );
|
| Box.img() |
弹出一张图片
/*
* @param.src[string]:图片地址
* @param.options[object]:其他参数
* @return: boxID
*/
Box.img( src, [options] );
|
配置
| top |
默认无，若有值将固定弹窗据window顶部距离 |
| title |
默认"对话框"，对话框标题html |
| oktext |
默认"确定"，确定按钮的文字 |
| canceltext |
默认"取消"，取消按钮的文字 |
| shut |
默认"×"，关闭按钮html，传入false将没有关闭按钮 |
| width |
默认"auto"，弹窗宽度 |
| height |
默认"auto"，弹窗高度 |
| layout |
默认true，是否包含边框 |
| setposi |
默认true，无layout的情况下，是否自动添加定位样式，手动定位需要设为false |
| bar |
默认true，是否显示标题栏 |
| bg |
默认true，是否显示背景层 |
| fix |
默认true，弹窗是否框固定在页面上 |
| bgclose |
默认true，是否点击背景层关闭 |
| drag |
默认false，是否可拖拽 |
| protect |
默认false，若为true，关闭后会将弹出的元素appendTo('body') |
| delay |
默认0，弹窗自动关闭时间, 0和负值不触发 |
| lang |
默认0，语言选择，0：中文 1：英文 |
| hook |
默认无，自定义样式钩子，用于给弹窗附加class修改样式 |
| color |
默认"info"，Box.msg方法的情景色，使用的是ui.css提供的几种背景色，可选info，primary，success，warning，danger |
| onshow(box) |
默认无，弹窗打开事件，接收弹窗DOM对象为参数 |
| onclose() |
默认无，弹窗关闭事件 |
返回方法
| boxid |
每次Box调用都将返回一个boxid，用于Box.hide()的参数时，可关闭本弹窗实例
var mybox = Box(...);
|
示例
<style>
button{margin:.5em;}
.myextclass .wrap_bar{background:green;}
</style>
<!-- html -->
<form class="demo hide" style="padding:20px;">
<p>
<label>姓名：</label><input type="text">
</p>
<p>
<label>电话：</label><input type="tel">
</p>
<p>
<label>邮箱：</label><input type="mail">
</p>
<p class="tc" style="margin-top:1em">
<button>填好了</button>
</p>
</form>
<div><button class="btn btn-default boxDom">弹出Dom</button></div>
<div><button class="btn btn-default boxMsg">提示</button></div>
<div><button class="btn btn-default boxToast">气泡</button></div>
<div><button class="btn btn-default boxAlert">警告</button></div>
<div><button class="btn btn-default boxConfirm">询问</button></div>
<div><button class="btn btn-default boxAjax">Ajax弹出内容</button></div>
<div><button class="btn btn-default boxIfram">弹出ifram</button></div>
<div><button class="btn btn-default modal">弹出一个模态自定义内容</button>
<div><button class="btn btn-default extclass">添加自定义class</button></div>
<div><button class="btn btn-default boximg">弹出图片</button></div>
//支持全局修改默认配置，全局配置必须在require('module name')，
//例如全局语言改为英文
window.boxGlobal = {lang:1};
//js
var Box = require('box');
$('.boxDom').on('click',function(){
Box.open( $('.demo') );
});
$('.boxAlert').on('click',function(){
Box.alert('hello box!',function(){
alert('alert的回调');
});
});
$('.boxMsg').on('click',function(){
Box.msg('注意，这是一条测试信息！',{
delay:3000
});
});
$('.boxToast').on('click',function(){
Box.toast('这是一条测试信息！');
});
$('.boxConfirm').on('click',function(){
Box.confirm('hello box!', function(){
alert('确定回调');
}, function(){
alert('取消回调');
});
});
$('.boxAjax').on('click',function(){
Box.ajax('http://host.refined-x.com/test/ajax.php', {
param: "param1" //Ajax参数
});
});
$('.boxIfram').on('click',function(){
var myifr = Box.ifram('http://host.refined-x.com/test/iframCloseTest.html',{
name: "closeTestIfram", //ifram name，默认空(不是弹窗标题)
width: 320, //iframe宽，默认640
height: 240 //iframe高，默认480
});
});
$('.modal').on('click',function(){
Box.open('<i class="ion rotation"></i>',{
layout:false,
bgclose:false,
delay:3e3
});
});
$('.extclass').on('click',function(){
Box.open('通过附加自定义class修改了弹窗样式',{
hook: "text-success"
});
});
$('.boximg').on('click',function(){
var imgBox = Box.img('http://static.refined-x.com/static/view0.jpg',{
onshow:function($this){
$this.on('click',function(){
Box.hide(imgBox);
});
}
});
});
- Checks
-
描述
基本组件-单/多选框。
返回Checks方法，语法：Checks(params...)，或者使用jquery插件语法：$.checks(params...)
配置
| el |
默认null，控件生成元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)
|
| type |
默认"checkbox"，切换单/多选模式，可选"radio"
|
| name |
默认null，指定该组控件的name
|
| data |
默认null，控件数据，数据格式见示例，也支持使用标签初始化，标签格式见示例
|
| checked |
默认null，已选择项的value值，数组格式
|
| disabled |
默认null，禁用项的value值，数组格式
|
| mode |
默认"inline"，将采用内联样式，可选"block"
|
| onChange |
默认null，选项变化回调方法，@param(checked) : 已选项，"checkbox"模式返回所选项value数组，radio"模式返回所选项value)
|
| onReady |
默认null，初始化完成回调方法，@param(checked) : 已选项，"checkbox"模式返回所选项value数组，radio"模式返回所选项value)
|
返回方法
| checked([value]) |
获取/设置已选项，"checkbox"模式接收value数组，"radio"模式接收value
|
| disabled([value]) |
获取/设置禁用项，接收value数组
|
返回方法
<div class="wrap">
<form class="form" id="testform">
<div class="form-group demo1">
使用数据初始化
</div>
<div class="form-group demo2">
使用标签初始化
<input type="radio" value="1" name="radio1" label="香蕉" checked>
<input type="radio" value="2" name="radio1" label="西瓜">
<input type="radio" value="3" name="radio1" label="猕猴桃" disabled>
</div>
<div class="input-group-btn">
<div class="btn btn-default checkall">全选checkbox</div>
<div class="btn btn-default checknone">反选checkbox</div>
<div class="btn btn-default radiocheck">选中radio第二项</div>
</div>
<p class="form-control-static" id="log"></p>
</form>
</div>
var checks = require('checks');
var showLog = function(checked){
if(checked){
console.log(checked);
}
$('#log').text($('#testform').serialize());
};
var mycheck = checks({
el: $('.demo1'),
type: 'checkbox',
name: 'datacheck',
data: [{
value: 'yingtao',
label: '樱桃'
},{
value: 'tianhua',
label: '甜瓜'
},{
value: 'caomei',
label: '草莓'
}],
checked: ['yingtao'],
disabled: ['caomei'],
onChange: showLog,
onReady: showLog
});
var myradio = checks({
el: $('.demo2'),
type: 'radio',
onChange: showLog,
onReady: showLog
});
$('.input-group-btn').on('click', '.btn', function(){
$(this).addClass('active').siblings('.active').removeClass('active');
if($(this).hasClass('checkall')){
mycheck.checked(['yingtao','tianhua','caomei']);
} else if($(this).hasClass('checknone')){
mycheck.checked([]);
} else if($(this).hasClass('radiocheck')){
myradio.checked('2');
}
});
- city-select
-
描述
地区选择器插件，返回citySelect方法，语法citySelect(config)，或使用jquery插件格式$el.citySelect(config)。
配置
| el |
触发元素，默认无，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)
|
| textKey |
默认"name"，用于显示选项文字的数据属性
|
| subKeys |
默认['city', 'area']，下级数据的key序列
|
| data |
省市区数据，支持数组或能返回指定格式的异步请求地址，异步数据必须为json格式且包含data字段。
data格式不限(需正确匹配"textKey"和"subKeys"设置)
|
| readOnly |
默认true，若触发元素为input/textarea是否禁止用户输入
|
| onSelect |
选择结束回调函数，接收选择结果，格式为所选每一级数据组成的数组
|
返回方法
| val |
获取/设置选择器的当前值
设置值时需要传入textKey所配置属性值，多个值之间逗号隔开
|
示例
<div class="m" style="width:200px">
<input type="text" class="demo form-control" placeholder="选择地区">
</div>
<div class="getval btn btn-default">获取当前值</div>
<div class="setval btn btn-default">赋值</div>
require('city-select');
var myselect = $('.demo').citySelect({
data:[{"name":"北京","id":"001","city":[{"name":"北京","id":"001","area":[{"name":"东城区","id":"001"},{"name":"西城区","id":"002"},{"name":"崇文区","id":"003"},{"name":"宣武区","id":"004"},{"name":"朝阳区","id":"005"}]}]},{"name":"河北","id":"002","city":[{"name":"石家庄","id":"002","area":[{"id":"002","name":"长安区"},{"id":"002","name":"桥东区"},{"id":"002","name":"桥西区"},{"id":"002","name":"新华区"},{"id":"002","name":"郊 区"}]}]},{"name":"台湾","id":"003","city":[{"name":"台湾","id":"003","area":[{"id":"003","name":"台北市"},{"id":"003","name":"高雄市"},{"id":"003","name":"台北县"},{"id":"003","name":"桃园县"}]},{"name":"其他","id":"004","area":[{"name":"其他","id":"004"}]}]}],
onSelect:function(result){
console.log(result);
var address = [];
$.each(result, function(i, e) {
address.push(e.name);
});
$(this).val(address.join(' / '));
}
});
$('.getval').on('click', function(){
console.log(myselect.val());
});
$('.setval').on('click', function(){
myselect.val('北京,北京,西城区');
});
- collapse
-
描述
将内容区域折叠/展开，支持基于标签生成和基于数据生成两种模式。返回Collapse方法，语法Collapse(config)，或使用jquery插件格式$el.collapse(config)。
配置
| el |
插入/生成折叠面板的元素，默认无，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)
|
| conts |
默认'.panel'，基于标签生成时，指定面板的元素选择器
该元素的data-card-title属性值将作为选项卡标签标题，另外还支持opened属性，用于指定初始展开的面板
|
| data |
默认null，用于生成实例的数据，格式：
[{
title: "tab1", //面板标题
cont: 'tab1cont', //面板内容
opened: [boolean], //是否展开
color: '', //面板颜色，支持【颜色】组件中的所有颜色
}]
|
| opened |
默认[]，默认打开元素，优先级高于数据和标签中的初始值
|
| color |
默认''，面板颜色，支持【Color】组件中的所有颜色
|
| single |
默认true，手风琴模式，同时只允许展开一个面板
|
| onChange |
状态变化回调方法，@param(opened) : 当前展开的序号数组
|
返回方法
| open([indexArray]) |
设置/获取展开的折叠面板
|
示例
<div class="wrap">
<div class="row">
<div class="span-6">
<div class="demo m-tb">
<div class="panel" data-card-title="史蒂夫·乔布斯">
史蒂夫·乔布斯(Steve Jobs)，1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
</div>
<div class="panel" data-card-title="斯蒂夫·盖瑞·沃兹尼亚克">
斯蒂夫·盖瑞·沃兹尼亚克(Stephen Gary Wozniak)，美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑(今之苹果公司)。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校(UC Berkeley)并获得电机工程及计算机(EECS)本科学位(1987年)。
</div>
<div class="panel" data-card-title="乔纳森·伊夫">
乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。
</div>
</div>
<div class="btn btn-default open3">打开第3个</div>
<div class="btn btn-default opennone">全部关闭</div>
</div>
</div>
</div>
require('collapse');
var mycol = $('.demo').collapse();
$('.open3').on('click', function(){
mycol.open([2]);
});
$('.opennone').on('click', function(){
mycol.open([]);
});
- countdown
-
描述
倒计时插件，通过重写render方法可自定义显示格式。
注意
标准日期对象的月份设置范围是0~11，不是1~12
配置
| begin |
开始时间，可选，默认本机时间，标准日期格式，如new Date(2089,01,05,02,25,00)，或new Date("2089/01/05 02:25:00")，或new Date("2089-01-05 02:25:00") |
| date |
结束时间，标准日期格式，默认 new Date(2089,01,05,02,25,00) |
| refresh |
刷新率，单位ms，默认1000，即按秒刷新 |
| offset |
偏移量，单位ms，用于纠正时区偏差 |
| onEnd |
倒计时结束回调函数，默认无 |
| render |
渲染函数，接收两个参数分别是当前DOM和日期 |
返回对象
| update(option) |
更新倒计时参数，如果在onEnd回调中调用update方法，注意避免死循环
|
| stop() |
停止当前倒计时实例
|
示例
<!-- html -->
<div class="demo"></div>
//js
var endData = new Date(),
endMill = endData.getTime()+1000*60*60*24;
endData.setTime(endMill);
require.async('countdown', function() {
$('.demo').Countdown({
date: endData,
render: function($this, date) {
$this.html(date.years + " 年, " +
date.days + " 天, " +
date.hours + " 时, " +
date.min + " 分 " +
date.sec + " 秒"
)
}
})
})
- Datepicker
-
描述
日期选择器插件，基于fengyuanchen/datepicker二次开发
配置
| autoShow |
默认false，初始化后立即显示日历 |
| autoHide |
默认false，选择日期后自动关闭日历 |
| autoPick |
默认false，初始化后自动选中当前日期 |
| inline |
默认false，是否以内嵌模式显示日历，需搭配container使用 |
| container |
元素或字符串，默认null，容纳inline模式日历的元素或元素选择器 |
| trigger |
元素或字符串，默认null，指定显示日历的触发器 |
| language |
界面语言，默认''，可选'zh-CN' |
| format |
字符串，默认'yyyy/mth/dd'
支持的格式元素:
year: 'yyyy','yy'
month: 'mth', 'm'
day: 'dd', 'd'
hour: 'hh'
minute: 'mm'
secend: 'ss'
|
| date |
日期数据或字符串，默认null，初始日期，不设置选择当天 |
| selected |
日期数组，默认[]，设置需要高亮显示的日期 |
| startDate |
日期数据或字符串，默认null，设置可选的起始日期 |
| endDate |
日期数据或字符串，默认null，设置可选的终止日期 |
| startView |
数值，默认0，设置初始化界面，可选0: days；1: months；2: years |
| weekStart |
数值，默认0，设置每周的起始天，可选0: Sunday；1: Monday；2: Tuesday；3: Wednesday；4: Thursday；5: Friday；6: Saturday |
| yearFirst |
布尔值，默认false，界面上将年显示到月之前 |
| yearSuffix |
字符型，默认''，年份后缀，例如可以设置为'年' |
| days |
数组，默认['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']，设置一周每天称谓 |
| daysShort |
数组，默认['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']，一周每天称谓短版 |
| daysMin |
数组，默认['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']，一周每天称谓更短 |
| months |
数组，默认['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']，月份名称 |
| monthsShort |
数组，默认['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']，月份短称谓 |
| itemTag |
字符串，默认'li'，标签名 |
| mutedClass |
字符串，默认'muted'，设定class前缀 |
| selectedClass |
字符串，默认'selected'，定义高亮日期class |
| pickedClass |
字符串，默认'picked'，定义选中日期class |
| disabledClass |
字符串，默认'disabled'，定义不可用日期class |
| offset |
数值，默认10，日期弹出位置距离元素的距离，单位px |
| needTime |
默认false，是否需要时间选择器，如果传入Object将作为该time picker实例的设置参数。
注意：默认format不显示时间，需要同时修改format
|
| zIndex |
数值，默认1，日期弹窗的z-index值 |
| filter |
函数，默认null，例如
$().datepicker({
filter: function(date) {
if (date.getDay() === 0) {
return false; // Disable all Sundays
}
}
});
|
| show |
函数，默认null，日历显示的回调 |
| hide |
函数，默认null，日历隐藏的回调 |
| pick |
函数，默认null，选择日期的回调，函数event中date属性可以获得选中的日期 |
方法
见：官方文档
示例
<p> 普通 </p>
<input class="datepicker">
<p> 自动关闭/值选择年月 </p>
<input class="datepicker2">
<p> 选择时间 </p>
<input class="datepicker3">
require('datepicker');
$('.datepicker').datepicker({
language: 'zh-CN'
});
$('.datepicker2').datepicker({
autoHide: true,
format:'yyyy/mth'
});
$('.datepicker3').datepicker({
needTime: true,
format:'yyyy/mth/dd hh:mm:ss'
});
- Drag-panel
-
描述
拖拽面板插件，配合card(卡片)组件和flex(栅格)组件实现可拖拽面板；返回DragPanel方法，语法：DragPanel(config)，或使用jquery插件语法：$el.dragPanel(config)
注意
兼容ie10+
配置
| el |
默认null，拖拽面板外边界，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this) |
| sortkey |
默认"data-key"，被拖拽元素的排序标识 |
| dragable |
默认".dragable"，被拖拽元素 |
| dragwrap |
默认null，被拖拽元素的包裹元素，设置该项可实现多栏/多行效果 |
| dragwrapLimitLength |
默认1，每个包裹元素中的被拖拽元素最小数量限制 |
| ondrag |
默认无，拖拽结束回调，返回新的排序标识数据 |
| showShadow |
默认false，是否显示一个被拖拽元素的克隆元素 |
自动添加类
dragstart自动为el元素添加"drag-panel-wrap"类，为opt.dragable元素添加"drag-panel-active"类；
示例
<style>
.drag-panel-active{opacity: .2;}
</style>
<div class="wrap">
<div class="row" id="wrapper">
<div class="span-4 m dragable" data-key="1">
<div class="card card-shadow card-primary">
<div class="card-head">
<div class="card-title"> Hello Card1</div>
</div>
<div class="card-body">
mycard
</div>
</div>
</div>
<div class="span-4 m dragable" data-key="2">
<div class="card card-shadow card-primary">
<div class="card-head">
<div class="card-title"> Hello Card2</div>
</div>
<div class="card-body">
mycard
</div>
</div>
</div>
<div class="span-4 m dragable" data-key="3">
<div class="card card-shadow card-primary">
<div class="card-head">
<div class="card-title"> Hello Card3</div>
</div>
<div class="card-body">
mycard
</div>
</div>
</div>
<div class="span-4 m dragable" data-key="4">
<div class="card card-shadow card-primary">
<div class="card-head">
<div class="card-title"> Hello Card4</div>
</div>
<div class="card-body">
mycard
</div>
</div>
</div>
</div>
</div>
require('drag-panel');
$('#wrapper').dragPanel({
ondrag: function(newSort) {
console.log(newSort);
}
});
- drag
-
描述
拖拽插件，拖拽元素大于拖拽范围或者小于拖拽范围都可以，两种情况都支持边缘检测，返回Drag方法，语法：Drag(config)，或者使用jquery插件语法：$el.drag(config);
配置
| wrap |
默认null，指定拖拽范围，默认选择父元素
|
| el |
默认null，拖拽元素
|
| overflow |
默认false，是否允许超出边缘，默认不允许
|
| dragStart |
默认null，拖拽开始回调 @param($el) : 拖拽元素
|
| onDrag |
默认null，拖拽过程回调 @param($el) : 拖拽元素
|
| onMove |
默认null，拖拽过程函数 @param(moveX, moveY) : 横向移动距离，纵向移动距离，将接管拖拽过程，元素位移不会发生变化
|
| dragEnd |
默认null，拖拽结束回调 @param($el) : 拖拽元素
|
| handletouch |
默认true，是否劫持触屏事件 |
| onClick |
默认无，当handletouch为true时常规click事件将失效，可以通过该配置添加click事件 |
示例
<!--html-->
<div class="drag" style="width:100px;height:100px;background:#434343;"></div>
//js
require('drag');
$('.drag').drag({
dragStart:function($this){
console.log(1)
},
dragEnd:function($this){
console.log(2)
}
});
- Dropdown
-
描述
下拉菜单插件，继承【tip】插件配置和方法，返回Dropdown方法，语法：Dropdown(config)，或者使用jquery插件语法：$el.dropdown(config);
配置
| el |
默认null，制定触发元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this) |
| trigger |
默认"hover"，触发动作 hover | click | custom |
| place |
默认"bottom-center" |
| items |
默认[]，下拉数据，必须，每一项必须是包含item属性的对象，此外可添加自定义属性，对象将在onclick回调中接收 |
| width |
默认无，可设置菜单最小宽度 |
| theme |
默认"dropdown-default"，通过该hook可自定义下拉菜单皮肤 |
| onclick |
默认无，点击菜单项回调方法。@param(item, isCurrent) : 对应的items数据项，是否为当前已选项 |
返回方法
| items([data]) |
设置/获取当前实例的数据。 |
示例
<div class="wrap">
<div id="demo1" class="btn btn-success">菜单1</div> <div id="demo2" class="btn btn-warning">菜单2</div>
</div>
var Dropdown = require('dropdown');
Dropdown({
el: '#demo1',
items: [{
item: '个人设置',
data: 'demo1'
}, {
item: '数据统计',
data: 'demo1'
}, {
item: '立即更新',
data: 'demo1'
}],
onclick: function(item){
console.log(item);
}
});
$('#demo2').dropdown({
items: [{
item: '个人设置',
data: 'demo2'
}, {
item: '数据统计',
data: 'demo2'
}, {
item: '立即更新',
data: 'demo2'
}],
onclick: function(item){
console.log(item);
}
});
- easing
-
描述
扩展jquery.animate动画效果，来自jquery.easing.js，被scroll-col和scroll-row插件依赖
效果包括：linear, swing, jswing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo,
easeOutExpo, easeInOutExpo, easeInCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce
示例
require('easing');
$(element).slideUp({
duration: 1000,
easing: method,
complete: callback
});
$(element).animate({
height:100
},{
duration: 1000,
easing: method,
complete: callback
});
- Echarts
-
描述
封装百度Echarts 4.0，包含类型：柱状图、饼状图、折线图、散点图、雷达图、热力图、地图、仪表盘、象形柱图；包含组件：标题、图例、提示框
详细用法见官方文档
兼容性
IE9+
示例
<div id="main" style="width: 600px;height:400px;"></div>
var echarts = require('echarts');
// 基于准备好的DOM，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
- etpl
-
描述
模板引擎，用于相对大量的视图渲染，文档详见项目主页
对于动态数据渲染场景，推荐基于etpl的渲染器Render
内置过滤器
| html |
默认过滤器，html转义 |
| url |
url转义 |
| raw |
不进行任何转义 |
| date |
日期过滤，可选参数outFormat(默认'YYYY-MM-DD'), inFormat(默认'YYYY年MM月DD日') |
| dec |
数字过滤，可选参数format(默认'#,###.00') |
示例
<!-- html -->
<div class="demo"></div>
var etpl=require('etpl');
var render = etpl.compile('Hello ${name}!');
var text = render({ name: 'etpl' });
$('.demo').html(text);
- img-loaded
-
描述
对目标区域内图片做加载完成检测
示例
<!--html-->
<div class="demo">
<ul>
<li><img src="http://lorempixel.com/442/548/?582" ></li>
<li><img src="http://lorempixel.com/405/406/?324" ></li>
<li><img src="http://lorempixel.com/374/330/?734" ></li>
</ul>
</div>
//js
require('img-loaded');
$('.demo').imagesLoaded(function(){
alert('加载完成');
})
- img-ready
-
描述
能在图片下载完成之前检测到图片真实尺寸，返回方法接受三个参数分别是图片地址、检测完成回调，下载完成回调
示例
<!-- html -->
<img id="demo" src="http://lorempixel.com/442/548/?582">
var ready = require('img-ready');
ready($('#demo').attr('src'),
function(width,height){
$('body').append($('<div>预取width:'+width+' height:'+height+'</div>'))
}, function(width,height){
$('body').append($('<div>加载完成！</div>'));
}
)
- input-number
-
描述
数字输入框插件，继承【input】插件配置和方法(部分配置无效)，支持标签data-options属性传参
$('.flow-ui-input-number')元素将自动初始化，并且支持data-config属性
配置
| min |
默认0，最小值 |
| val |
默认null，将沿用input元素初始值 |
| countstep |
默认1，每次加减数量 |
| max |
默认无限大，最大值 |
| style |
默认'default'，可选'inline'，计数器样式 |
| onChange(val) |
默认无，数值变更回调 |
返回方法
同【输入框】组件。
示例
<style type="text/css">
.demo{width:200px;margin-bottom: 1em;}
</style>
<input type="text" name="count" class="demo mytest">
<div class="demo flow-ui-input-number" data-options={"name":"countnumber"}></div>
<button type="button" id="act1" class="btn btn-default">切换实例1禁用状态</button>
require('input-number');
var mycount = $('.mytest').inputNumber({
min:2,
max:9,
val: 5,
style: 'inline',
onChange: function(val) {
$('body').append('<p>实例1的值：' + val + '</p>');
}
});
var disable = false;
$('#act1').on('click',function(){
disable = !disable;
mycount.disabled(!disable);
});
- input
-
描述
输入框插件，可以基于input、textarea标签生成文本框，也可以基于其他标签在其内部插入一个文本框，支持data-options属性传参
$('.flow-ui-input')元素将自动初始化，并且支持data-config属性
配置
| color |
默认""，情景色配置，可选"success""warning""danger" |
| id |
默认自动生成随机id，指定生成input的id |
| width |
默认无，组件宽度，默认继承目标元素的class定义的宽度 |
| buttons |
默认无，按钮配置，格式如下：
[{
text: '确定',
click: function(){}
}, {
text: '清除',
click: function(){}
}]
|
| type |
指定生成input的type类型，默认使用目标元素的type类型 |
| holder |
默认''，指定生成input的placeholder文字 |
| val |
默认null，不填将沿用input元素初始值 |
| text |
默认''，指定生成input的初始显示值 |
| icon |
默认''，指定icon编码，不传则不显示图标 |
| iconPosition |
默认'right', 图标位置，可选'left' |
| size |
默认''，生成组件尺寸，可选'sm'/'lg' |
| name |
默认''，指定input的name值，不传则不会添加或修改原始input的name属性 |
| disable |
默认false，是否禁用 |
| readonly |
默认false，是否只读 |
| datatype |
默认''，验证类型，不传将继承目标元素的datatype属性，释义同【validform组件】 |
| errormsg |
默认''，验证错误提示，不传将继承目标元素的errormsg属性，释义同【validform组件】 |
| nullmsg |
默认''，验证未填提示，不传将继承目标元素的nullmsg属性，释义同【validform组件】 |
| render(val) |
默认无，格式化方法，接收原始值，需返回格式化后的值，用于input组件展示 |
| onChange(val) |
默认无，监听输入变化回调，接收当前值 |
返回对象方法
| disabled([flag]) |
禁用input实例，若flag为真值将解禁 |
| readonly([flag]) |
只读input实例，若flag为真值将恢复可写 |
| destroy() |
销毁实例 |
| clear() |
清空输入 |
| reset() |
恢复实例为初始值 |
| text([setValue]) |
读取/设置实例显示值 |
| val([setValue]) |
读取/设置实例值 |
示例
<style>
.demo{display:inline-block;width:250px;vertical-align: bottom;}
</style>
<form class="wrap">
<!-- 基于input标签 -->
<input type="text" name="input1" class="demo input1">
<!-- 基于textarea标签 -->
<textarea class="demo flow-ui-input" name="area1"></textarea>
<!-- 基于其他标签 -->
<div class="demo inputdiv flow-ui-input" data-options={"name":"input2"}></div>
<button type="button" class="btn btn-default setreadonly">切换input1只读状态</button>
</form>
require('input');
var myinput = $('.input1').input({
buttons: [
{
text: '确定',
click:function(val, text){
console.log('val:',val);
console.log('text:',text);
}
},
{
text: '清除',
click:function(val, text){
myinput.clear();
}
}
],
val:'100',
holder: '输入金额',
errormsg: '请输入整数!',
datatype:'n',
render:function(val){
return '$'+val;
},
onChange: function(val){
console.log('change to',val);
}
});
var readable = true;
$('.setreadonly').on('click',function(){
readable = !readable;
myinput.readonly(readable);
});
- instantclick
-
描述
链接预加载插件，详细应用方案查看【链接预加载】，文档参见官方文档
示例
var ic = require('instantclick');
ic.init();
- label
-
描述
标签插件，可以用于标记和分类。返回 Label方法，语法：Label(config)，或使用jquery插件语法：$el.label(config)
配置
| el |
默认 null，表格生成元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)
|
| color |
默认 "primary"，指定实例色调，支持【color】组件中所有颜色名称
|
| data |
默认 []，示例初始化数据，对象数据，对象必须包含 text属性
|
| closable |
默认 false，是否可关闭
|
| type |
默认null，标签类型，可选"bordered"
|
| size |
默认null，标签类型，可选"sm" | "lg"
|
| onClose |
默认null，标签关闭回调方法 @param(object) : 当前关闭标签的数据对象
|
返回方法
示例
<div class="m demo"></div>
<div class="btn btn-default add">add</div>
require('label');
var mytag = $('.demo').label({
data: [{
text: '标签1',
name: 'tag1'
}, {
text: '标签2',
name: 'tag2'
}],
closable: true,
onClose: function(tag) {
console.log('delete:' + tag.text);
}
});
$('.add').on('click', function(){
var otag = mytag.data();
otag.push({
text: '标签' + (otag.length + 1)
});
mytag.data(otag);
});
- lazyload
-
描述
图片懒加载插件，用于滚动时加载视窗内的图片或元素背景。返回LazyLoad方法，语法：LazyLoad(config)，或使用jquery插件语法：$el.lazyload(config)
配置
| el |
默认 null，懒加载区域选择器，直接调用方法必填，jquery插件调用时可忽略，将默认应用$(this)
|
| attr |
默认 data-lazy，懒加载元素或图片存贮图片地址的属性。
|
| everyCount |
默认 3，每次加载的数量。
|
| distance |
默认 100，距离目标进入屏幕可见范围的开始加载的距离，单位px。
|
示例
<style>
.demo p{float:left; margin:20px; width:200px; height: 200px; background:#eee;background-position:center;}
</style>
<div class="demo">
<p><img data-lazy="http://temp.im/800x600/" ></p>
<p><img data-lazy="http://temp.im/801x600/" ></p>
<p><img data-lazy="http://temp.im/802x600/" ></p>
<p><img data-lazy="http://temp.im/803x600/" ></p>
<p><img data-lazy="http://temp.im/804x600/" ></p>
<p><img data-lazy="http://temp.im/805x600/" ></p>
<p><img data-lazy="http://temp.im/806x600/" ></p>
<p><img data-lazy="http://temp.im/807x600/" ></p>
<p><img data-lazy="http://temp.im/808x600/" ></p>
<p><img data-lazy="http://temp.im/809x600/" ></p>
<p><img data-lazy="http://temp.im/810x600/" ></p>
<p><img data-lazy="http://temp.im/811x600/" ></p>
<p><img data-lazy="http://temp.im/812x600/" ></p>
<p><img data-lazy="http://temp.im/813x600/" ></p>
<p><img data-lazy="http://temp.im/814x600/" ></p>
<p><img data-lazy="http://temp.im/815x600/" ></p>
<p><img data-lazy="http://temp.im/816x600/" ></p>
<p><img data-lazy="http://temp.im/817x600/" ></p>
<p><img data-lazy="http://temp.im/818x600/" ></p>
<p><img data-lazy="http://temp.im/819x600/" ></p>
<p><img data-lazy="http://temp.im/820x600/" ></p>
<p><img data-lazy="http://temp.im/821x600/" ></p>
<p><img data-lazy="http://temp.im/822x600/" ></p>
<p><img data-lazy="http://temp.im/823x600/" ></p>
<p><img data-lazy="http://temp.im/824x600/" ></p>
<p><img data-lazy="http://temp.im/825x600/" ></p>
<p><img data-lazy="http://temp.im/826x600/" ></p>
<p><img data-lazy="http://temp.im/827x600/" ></p>
<p><img data-lazy="http://temp.im/828x600/" ></p>
<p><img data-lazy="http://temp.im/829x600/" ></p>
<p><img data-lazy="http://temp.im/830x600/" ></p>
<p><img data-lazy="http://temp.im/831x600/" ></p>
<p><img data-lazy="http://temp.im/832x600/" ></p>
<p><img data-lazy="http://temp.im/833x600/" ></p>
<p><img data-lazy="http://temp.im/834x600/" ></p>
<p data-lazy="http://temp.im/835x600/"> element </p>
</div>
//js
require('lazyload');
$('.demo').lazyload();
- marquee
-
描述
跑马灯插件(横竖方向的匀速循环滚动)
配置
| direction |
滚动方向，可选"left/top"，默认"top" |
| duration |
单次滚动时长，单位ms，默认5000 |
| pauseOnHover |
悬停暂停，默认true |
示例
<style>
.marquee{height:150px;border:1px solid blue;}
.marquee2{width:150px;border:1px solid red;}
</style>
<div class='marquee'>
<p> cont1 </p>
<p> cont2 </p>
<p> cont3 </p>
<p> cont4 </p>
<p> cont5 </p>
<p> cont6 </p>
<p> cont7 </p>
<p> cont8 </p>
<p> cont9 </p>
</div>
<div class='marquee2'>
这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字!!
</div>
require.async('marquee',function(){
$('.marquee').marquee();
$('.marquee2').marquee({
direction:'left'
});
});
- masonry
-
描述
瀑布流插件，封装自masonry
示例
<style>
/*css*/
.item { width: 200px; margin:10px;}
</style>
<!--html-->
<ul id="container">
<li class="item">
<img src="http://temp.im/200x100/">
</li>
<li class="item">
<img src="http://temp.im/200x400/">
</li>
<li class="item">
<img src="http://temp.im/200x300/">
</li>
<li class="item">
<img src="http://temp.im/200x600/">
</li>
<li class="item">
<img src="http://temp.im/200x100/">
</li>
<li class="item">
<img src="http://temp.im/200x400/">
</li>
<li class="item">
<img src="http://temp.im/200x300/">
</li>
<li class="item">
<img src="http://temp.im/200x600/">
</li>
</ul>
require('masonry');
require('img-loaded');
var $container = $('#container'),win=$(window),loaded = true;
//应用瀑布流
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item'
})
});
//滚动加载
win.scroll(function scrollHandler(){
if(loaded){
var t=win.scrollTop(),
h=win.height(),
t1= $container.offset().top,
h1 =$container.outerHeight(true);
if(t+h >= t1+h1){
addItem(3);
}
}
});
//模拟动态加载数据
function addItem(n) {
loaded = false;
var fragment = '<li class="item">\
<img src="http://temp.im/200x100/">\
</li>\
<li class="item">\
<img src="http://temp.im/200x400/">\
</li>\
<li class="item">\
<img src="http://temp.im/200x300/">\
</li>';
for ( var i = 0; i < n; i++ ) {
fragment+=fragment;
};
$container.append($(fragment)).imagesLoaded(function(){
$container.masonry("reload");
loaded = true;
});
};
-
描述
为页面和功能提供导航的菜单列表，常用于网站顶部和左侧。返回Menu方法，语法：Menu(config)，或者使用jquery插件语法：$el.menu(config)
配置
| el |
默认null，制定触发元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this) |
| data |
默认无，菜单数据，必填 |
| key |
默认无，菜单项的唯一标识，必填 |
| mode |
默认"horizontal"，菜单类型，可选值为 horizontal | vertical |
| theme |
默认"primary"，主题，可选值为 light、dark、primary |
| subicon |
默认""，多重菜单标题右侧指示图标 |
| actived |
默认无，当前激活的菜单项key值 |
| opened |
默认[]，当前打开的菜单项key值组成的数组，horizontal模式只打开第一个 |
| toggle |
默认true，是否显示切换效果，只对vertical模式有效 |
| onSelect |
菜单切换时触发回调，@param(object, $item) : 当前数据对象，当前Dom对象 |
| onClick |
菜单点击回调，@param(object, $item, isCurrent) : 当前数据对象，当前Dom对象，是否已选中 |
返回方法
| open(key) |
打开指定key值的项 |
| active(key) |
激活指定key值的项 |
示例
<div class="wrap">
<nav id="menu"></nav>
<div class="btn btn-default menu-open">打开子菜单</div>
<div class="btn btn-default menu-active">激活第三项</div>
</div>
var Menu = require('menu');
var mymenu = Menu({
el:'#menu',
//theme: 'dark',
data: [
{
item: '<i class="ion"></i>首页',
id: 1
},{
item: '订单',
id: 2
},{
item: '会员',
id: 3,
sub:[
{
item: '会员统计',
id: 30
},{
item: '会员群发',
id: 31
},{
item: '会员管理',
id: 32
}
]
},{
item: '店铺',
id: 4
},{
item: '系统',
id: 5
}
],
key: 'id',
actived: 1,
toggle: false,
onSelect: function(object, item){
console.log(object, item);
}
});
$('.menu-open').on('click', function(){
mymenu.open(3);
});
$('.menu-active').on('click', function(){
mymenu.active(4);
});
-
描述
自定义鼠标右键，支持菜单内分组，调用格式为 $target.mousemenu( data, option )
配置
| name |
将作为菜单id的后缀，以区别多组菜单，只有一组可省略 |
| offsetX |
默认2，单位px，菜单左上角距点击位置横向距离 |
| offsetY |
默认2，单位px，菜单左上角距点击位置纵向距离 |
| textLimit |
默认6，菜单项显示文字个数，超出显示省略号 |
| beforeShow |
菜单显示前回调 |
| afterShow |
菜单显示后回调 |
| broke |
用于点击时做条件判断，返回真值将阻止本次弹出 |
示例
<style>
/*css*/
.demo{height: 400px;border:1px solid #ccc;line-height: 400px;text-align: center;}
</style>
<!-- html -->
<div class="demo">测试区域</div>
require('mousemenu');
$('.demo').mousemenu(
[
[{
text: "组1-1",
func: function() {
alert("组1-1");
}
}, {
text: "组1-2",
func: function() {
alert("组1-2");
}
}],
[{
text: "组2-1",
func: function() {
alert("组2-1");
}
}, {
text: "组2-2",
func: function() {
alert("组2-2");
}
}]
], {
//配置
}
);
- mousetrap
-
描述
按键监听
示例
<!-- html -->
<div class="demo">
<p>单按键：按"a"或"?"或"esc"</p>
<p>功能键：按"ctrl+shift+k"</p>
<p>多组按键绑定同一个事件：按"command k" 或者 "control k"</p>
<p>组合键：试试"up up down down left right left right b a enter"</p>
</div>
//js
require.async('mousetrap',function(){
// 单按键
Mousetrap.bind('a', function() {
alert('a');
});
Mousetrap.bind("?", function() {
alert('show shortcuts!');
});
Mousetrap.bind('esc', function() {
//阻止浏览器默认事件
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
alert('退出？');
}, 'keyup');
// 功能键
Mousetrap.bind('ctrl+shift+k', function() {
alert('command shift k');
});
// 多组按键绑定相同事件
Mousetrap.bind(['command+k', 'ctrl+k'], function() {
alert('command k 或者 control k');
return false; //取消系统默认事件
});
// 组合键
Mousetrap.bind('up up down down left right left right b a enter', function() {
alert("哇咔咔！");
});
});
- mousewheel
-
描述
鼠标滚轮监听，回调函数的event包含三个属性：deltaX，deltaY，deltaFactor；分别代表横向滚动方向，纵向滚动方向，滚动长度(不同浏览器下该值不一致)
示例
<style>
/*css*/
.demo,.control{height: 200px;overflow: auto;border:1px solid #ccc;margin:10px;}
</style>
<!-- html -->
<div class="demo">
滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>
滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>
滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>
滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>
滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>
滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>
滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>
</div>
<div class="control"></div>
//js
require('mousewheel');
//开始监听
$('.demo').on('mousewheel', function(event) {
$('.control').append('<p>'+event.deltaX+', '+event.deltaY+', '+event.deltaFactor+'</p>');
});
//停止监听
setTimeout(function(){
$('.demo').unmousewheel();
$('.control').text('监听事件已卸载！');
},5e3)
- Notice
-
描述
在界面右上角显示可关闭的全局通知，常用于以下场景：通知内容带有描述信息、系统主动推送。返回Notice方法
配置
| title |
默认""，通知提醒的标题
|
| desc |
默认""，通知提醒的内容，为空或不填时，自动应用仅标题模式下的样式
|
| color |
默认"primary"，主题色，支持【颜色】组件中所有的颜色
|
| delay |
默认0，自动关闭的延时，单位毫秒
|
| onClose |
默认无，关闭时的回调
|
返回方法
示例
<div class="wrap">
<div class="btn btn-primary open">打开notice</div>
</div>
var Notice = require('notice');
var colors = ['primary', 'success', 'info', 'warning', 'danger'];
var count = 0;
$('.open').on('click',function(){
Notice({
title: '这是标题' + parseInt(Math.random() * 1e6),
desc: '这里是描述',
color: colors[count],
delay: 3000
});
count++;
if(count===colors.length){
count = 0;
}
});
- offcanvas
-
描述
侧边伸缩导航菜单插件，多用于移动端导航，导航必须具有id属性，与导航控制按钮的href属性相同。
注意
- 为避免插件加载期间导航错乱闪现，可以先用样式将导航隐藏，插件运行后会清除原样式。
- 使用点击预加载方案(PJAX)的情况下菜单会出现点击不收回的情况，需要在使用时增加配置：
{ onClick:{ close:true}}
配置
| position |
默认 "left"，菜单位置，可选 top || right || bottom |
| zposition |
默认 "front"，菜单层次，可选 next |
| slidingSubmenus |
默认横向(true)，菜单展开方向，true || false |
| isMenu |
默认 true，是否按导航结构初始化，自定义结构和样式需要设为false |
| classes |
默认 "mm-black"，主题class, 可选 mm-light || mm-white |
示例
<nav class="demo hide" id="menu">
<ul>
<li><a href="/1">导航</a> </li>
<li><a href="/2">导航2</a>
<ul>
<li><a href="/#2">二级</a></li>
<li><a href="/#2">二级</a></li>
<li><a href="/#2">二级</a></li>
</ul>
</li>
<li><a href="/3">导航3</a>
<ul>
<li><a href="/#2">二级</a></li>
<li><a href="/#2">二级</a></li>
<li><a href="/#2">二级</a></li>
</ul>
</li>
<li><a href="/4">导航4</a>
<ul>
<li><a href="/#2">二级</a></li>
<li><a href="/#2">二级</a></li>
<li><a href="/#2">二级</a></li>
</ul>
</li>
</ul>
</nav>
<a href="#menu" class="btn btn-default mobile_key">导航控制按钮</a> <!--导航控制按钮-->
//js
require('offcanvas');
$('.demo').offcanvas();
- on-scroll
-
描述
监听指定元素随页面滚动出现在视野中的事件，返回onScroll方法，语法：onScroll(config)，或者使用jquery插件语法：$el.onScroll(config);
可用于长页面懒加载；当指定元素为多个时，还可以关联定位(target)元素，实现滚动导航；当target元素向上滚出视野时，将为target元素或指定的targetFix元素添加fixed类，用于实现固定在页面顶部效果。
配置
| el |
默认无，监听元素选择器，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this) |
| offset |
可选，顶部位置计算偏移量，默认0 |
| target |
可选，绑定目标，jquery选择器格式，默认无 |
| targetCell |
可选，绑定目标子元素类型，默认'li' |
| targetFix |
可选，设置将添加fixed类的元素，通常是target的外层 |
| speed |
可选，滚动动画时间，单位ms，默认300 |
| onshow |
可选，元素第一次出现在视野的回调，默认无 |
| ontop |
可选，当配置了target时，元素第一次与target距离为offset时触发，默认无 |
示例
<!-- html -->
<style>
.target_wrap {
height: 42px;
}
.demo_Target {
width: 980px;
margin: 0 auto;
overflow: hidden;
*zoom: 1;
background: #fff;
border-left: 1px solid #eee;
}
.demo_Target li {
float: left;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
margin-left: -1px;
width: 33%;
text-align: center;
cursor: pointer;
}
.demo_Target.fixed {
position: fixed;
left: 50%;
margin-left: -490px;
top: 0;
z-index: 99;
}
.demo_Target .active {
color: #39f;
background: #eee;
}
.demo_sections {
width: 978px;
border: 1px solid #ccc;
padding: 2em 0;
margin: 2em auto;
height: 800px;
}
.lazyPush {
height: 400px;
}
</style>
<div class="target_wrap">
<ul class="demo_Target">
<li>channel01</li>
<li>channel02</li>
<li>channel03</li>
</ul>
</div>
<div class="demo_sections">
anything...1
<textarea class="hide">
<img src="http://temp.im/500x400/">
</textarea>
</div>
<div class="demo_sections">
anything...2
<textarea class="hide">
<img src="http://temp.im/500x400/">
</textarea>
</div>
<div class="demo_sections">
anything...3
<textarea class="hide">
<img src="http://temp.im/500x400/">
</textarea>
</div>
var responsive = require('responsive');
require('on-scroll');
$('.demo_sections').onScroll({
offset: 42,
target: '.demo_Target',
onshow: function(elem, index) {
responsive.topush(elem, function() {
console.log('元素' + index + '懒加载完成');
});
},
ontop: function(elem, index){
console.log('ele' + index + '就位');
}
});
- page
-
描述
按指定配置生成分页组件，返回Page方法，语法：Page(config)，或者使用jquery插件语法：$el.page(config);
配置
| el |
默认无，必填，分页展示容器，jquery选择器格式，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this) |
| current |
默认1，当前页码 |
| showNum |
默认5，显示页数 |
| total |
默认无，必填，总页数 |
| holder |
默认'...'，翻篇占位符 |
| hook |
默认无，自定义样式钩子 |
| onChange |
默认无，页码改变回调，参数接收点击页码 |
| size |
默认'normal'，内置尺寸，可选'sm / lg' |
| auto |
默认true，是否自动渲染当前状态 |
返回方法
| set(obj) |
更改显示状态，obj只接受三个属性：current，total，pageSize |
示例
<div class="wrap">
<div class="demo"></div>
<div class="btn btn-primary set1">设置页码为1</div>
</div>
var page = require('page');
var pageObj = page({
el: '.demo',
total: 10,
onChange: function(page) {
console.log(page);
}
});
$('.set1').on('click', function() {
console.log(pageObj)
pageObj.set({
current: 1
});
});
- paging-load
-
描述
自动生成分页参数的请求方法，调用后返回当前分页加载实例，约定异步数据格式为json，必须包含data和count字段，分别代表每页数据和数据总条数。
配置
| method |
默认"get"，请求方法 |
| url |
默认无，必填，分页请求地址 |
| size |
默认6，每页条数，服务端将接收到此参数的实际key为"page_size" |
| data |
默认{}，请求参数，不得包含"page_index"和"page_size"键 |
| success |
ajax成功回调 |
| nomore |
没有更多回调 |
| error |
ajax错误回调 |
实例方法
| load([callback]) |
加载新的一页，参数中将包含从1开始累加的"page_index"值，@param([callback]) : 加载完成后回调方法，若参数中的success/nomore方法明确return则该回调不执行。
|
| reload([hold], [data], [callback]) |
将当前实例的页码重置为初始值。若hold为真值只重置不请求，若data为对象格式将合并到当前参数中。
|
| destroy() |
销毁当前实例
|
示例
<div class="m">打开控制台查看网络请求</div>
<div class="btn btn-default pagingLoad">分页加载</div>
<div class="btn btn-default reload">分页重新加载</div>
<div class="btn btn-default destroy">销毁分页加载实例</div>
var pagingLoad = require('paging-load');
var myload = pagingLoad({
url: 'http://rap.taobao.org/mockjsdata/1101/core/citylist/',
data: {
"method": "test"
},
success: function(data) {
console.log(data);
}
});
$('.pagingLoad').on('click', function() {
myload.load();
});
$('.reload').on('click', function(){
myload.reload();
});
$('.destroy').on('click', function(){
myload.destroy();
});
- progress
-
描述
展示操作或任务的当前进度，比如上传文件。
配置
| el |
默认 null，进度条容器元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)
|
| persent |
默认 0，初始化实例进度，取值0-100
|
| color |
默认 "primary"，进度条色调，支持【color】组件的所有颜色
|
| active |
默认 true，实例是否为激活状态(动态光影)，当persent值达到100后自动设为 false
|
| height |
默认 0，进度条宽度，默认将采用组件默认
|
| showInfo |
默认 true，是否显示进度信息
|
| infoRender |
进度信息渲染方法，param(persent, entity) : 当前进度值，当前实例方法。
默认：
function(persent, entity) {
return persent + '%';
}
entity只有一个 color()方法，用法同下文【返回方法】
|
返回方法
| persent([value]) |
设置/获取当前进度 |
| color([value]) |
设置/获取当前实例色调 |
| active([value]) |
设置/获取当前实例激活状态 |
| destroy() |
销毁实例 |
示例
<div class="wrap">
<div class="row">
<div class="span-6 m-tb demo"></div>
</div>
<div class="btn btn-default add">+</div>
<div class="btn btn-default min">-</div>
<div class="btn btn-default toggle">切换激活状态</div>
</div>
require('progress');
var myprog = $('.demo').progress({
persent: 50,
infoRender: function(persent, entity){
if(persent===100){
entity.color('success');
return '<i class="ion"></i>成功';
}else{
entity.color('info');
return persent + '%';
}
}
});
$('.add').on('click', function(){
myprog.persent(myprog.persent() + 10);
});
$('.min').on('click', function(){
myprog.persent(myprog.persent() - 10);
});
$('.toggle').on('click', function(){
myprog.active(!myprog.active());
});
- qr
-
描述
生成二维码，封装自davidshimjs/qrcodejs。
示例
<style>
#qr_container{position: fixed;right:10px;bottom:10px;text-align: center;}
</style>
<div id="qr_container"> 微信扫描查看或分享 </div>
//js
var qr = require('qr');
var qrcode = new qr(document.getElementById("qr_container"), {
text: "http://www.jerei.com", // 生成内容
width: 128, // 宽
height: 128, // 高
colorDark : "#000000", // 颜色
colorLight : "#ffffff", // 背景色
correctLevel : qr.CorrectLevel.H // 容错级别 L|M|Q|H
});
//qrcode.clear(); // clear the code.
//qrcode.makeCode("http://naver.com"); // make another code.
- responsive
-
描述
响应式工具包，包含想响应式所需的js功能
| getType([callback]) |
获取当前设备类型，回调函数可选，当无回调时返回字符串('Pc','Pad','Mobile')，有回调时回调接受返回字符串为参数：
var resp = require('responsive');
//无回调
var type=resp.getType(); //"Pc" || "Pad" || "Mobile"
//有回调
resp.getType(function(type){
alert(type); //"Pc" || "Pad" || "Mobile"
})
|
| getOrient([callback]) |
获取移动设备屏幕方向，回调函数可选，当无回调时返回字符串('Heng','Shu')，有回调时回调函数将持续监听屏幕方向变化，并接受屏幕方向为参数：
var resp = require('responsive');
//无回调
var orient=resp.getOrient();// "Heng" || "Shu"
//有回调
resp.getOrient(function(orient){
alert(orient);// 每次旋转屏幕都将alert "Heng" 或 "Shu"
})
|
| resImg(bigSrc, [filter]) |
全局图片响应方法
图片的src将在手机端显示，bigSrc参数指定存放大图的自定义属性，可省，默认"data-src"，"data-src"图片地址将在pc和pad端显示。
filter参数传入响应图片的范围，可省，默认检索整个页面。
<img src="small.jpg" data-src="big.jpg" />
var resp = require('responsive');
resp.resImg();
|
| topush(DOM,callback) |
<textarea>标签在页面中具有延迟渲染的特性，因此是一个天然的缓存容器，只要将自身隐藏，便实现了html5 template标签的特性，唯一的问题是使用<textarea>暂存的代码中不能包含另一个<textarea>，否则会造成暂存标签意外闭合，这时也可以选择<script type="text/template">标签代替，它和textarea标签的作用是等价的，并且script标签自身就是不可见的，无须手动隐藏：
<!--textarea标签暂存页面片段-->
<div class="demo topush">
<textarea class="hide">
<a href="#">暂存的页面片段</a>
<a href="#">暂存的页面片段</a>
<a href="#">暂存的页面片段</a>
</textarea>
</div>
<!--script标签暂存页面片段-->
<div class="demo topush">
<script type="text/template">
<a href="#">暂存的页面片段</a>
<a href="#">暂存的页面片段</a>
<a href="#">暂存的页面片段</a>
</script>
</div>
resp.topush(DOM,callback)方法专门用来取出暂存标签中的html片段(或发起Ajax)插入到外层元素中，两个参数分别是指定外层元素和取出后的回调函数，均为可选，DOM默认.topush。
加载后的dom会添加pushed类，用来标记暂存代码已经取出。
示例：
<!--发起Ajax的例子-->
<div class="demo topush">
<textarea class="hide" data-url="http://host.refined-x.com/test/ajax.php"> </textarea>
</div>
var resp = require('responsive');
//无参数调用，显示所有".topush"元素中的暂存代码
resp.topush();
//有回调
resp.topush(function(e){
console.log(e.attr('class')) //"topush ..."
});
//指定渲染目标
resp.topush('.demo');
//传入两个参数
resp.topush('.demo',function(e){
console.log(e.html())//.demo 渲染后的html
});
|
| scanpush() |
resp.scanpush()方法会扫描页面上具有延迟渲染类名的元素，并按规则对其渲染。
预置的四个按需渲染类是：.PcPush,.UnpcPush,.MobilePush,.UnmobilePush, 分别代表“只有Pc渲染”，“只有非Pc渲染”，“只有手机渲染”，“只有非手机渲染”,渲染完成后会触发该元素的渲染类同名事件，用
$(DOM).on('PcPush'/'UnpcPush'/'MobilePush'/'UnmobilePush')可以捕捉到，事件也会冒泡到body上。
并且这四个类元素下的textarea标签将自动隐藏，不需要手动加隐藏类。
示例：
<!-- html -->
<div class="PcPush">
<textarea>
只在Pc显示
</textarea>
</div>
<div class="UnpcPush">
<textarea>
除了Pc都显示
</textarea>
</div>
//js
var resp = require('responsive');
$('body').on('PcPush',function(){
console.log( 'PcPush已经被渲染了' )
})
$('body').on('UnpcPush',function(){
console.log( '.UnpcPush已经被渲染了' )
})
resp.scanpush();
|
- render
-
描述
创建一个数据->模板的单项绑定渲染器，返回Render方法，语法var myRender = Render(confg)。
依赖etpl模块
配置
| el |
默认null，模板填充元素，必填
|
| template |
默认''，etpl模板字符串，默认将寻找el内具有[template]属性的元素，将其value或innerText作为模板字符串，建议用textarea/script元素作为模板容器
|
| data |
默认null，将作为初始化模板数据
|
| reload |
默认true，决定以.html()/.append()的方式填充模板
|
| etplConfig |
默认null，etpl模板引擎配置
|
| callback(targetElement, renderData) |
默认null，渲染完成后回调方法。targetElement是渲染目标元素，renderData是渲染所用数据
|
返回方法
| set(config) |
修改渲染器配置，通产用来修改reload模式和callback回调
|
| data([setData]) |
为渲染器赋值/取值，使用新数据渲染的结果将同步到容器元素
|
| push(node, arrayData) |
向node节点下的数组插入arrayData数据，如果node节点不存在或格式不是数组，将先设置为空数组。使用新数据渲染的结果将同步到容器元素
|
| destroy() |
销毁示例移除容器元素
|
示例
<div class="p" id="wrap">
<textarea style="display: none" template>
render result: ${time}
</textarea>
</div>
<div class="p">
<div class="btn btn-default setIntval">暂停/恢复</div>
<div class="btn btn-default setReload">重载/填充</div>
<div class="btn btn-default destroy">销毁</div>
</div>
var render = require('render');
var myRender = render({
el: '#wrap',
reload: reload,
callback: function($el, html) {
console.log(html);
}
});
var reload = true;
var int = setInterval(function() {
myRender.data({
time: new Date()
});
}, 1000);
$('.setIntval').on('click', function() {
if (int) {
int = clearInterval(int);
} else {
int = setInterval(function() {
myRender.data({
time: new Date()
});
}, 1000)
}
});
$('.setReload').on('click', function(){
reload = !reload;
myRender.set({
reload: reload
});
});
$('.destroy').on('click', function(){
myRender.destroy();
});
- scroll-bar
-
描述
滚动条美化插件，支持横向和纵向、滚动条自动隐藏、样式自定义。
注意
内容元素不能有可向上传导的margin-top属性，否则会干扰滚动定位。
配置
| wrap |
包裹元素，默认不指定，将插入div.scroll_cont |
| monitor |
否监听内容变化(用于多插件协作)，布尔值，默认false |
| keyway |
按钮键程，默认30(px) |
| width |
滚动条宽度，默认8(px) |
| btnLength |
按钮长度，默认0(不显示按钮) |
| btnBreadth |
按钮宽度，默认与滚动条同宽 |
| sliderWidth |
滑块宽度，默认与滚动条同宽 |
| hideBar |
自动隐藏滚动条，鼠标进入显示，默认false |
| ontop |
滚动到顶部触发的回调，默认无 |
| onend |
滚动到底部触发的回调，默认无 |
示例
<style>
/*css*/
.demo{position:relative;overflow:hidden;height:320px;max-width: 480px;margin:10px auto;}
.demo .scroll_cont{background: yellow;}
.demo .scroll_cont img{max-width: none;}
</style>
<!--html-->
<div class="demo demo1">
<img src="http://temp.im/480x480/"><br/>
content conten ontentcontent1<br/>
content7<br/>
content conten ontentcontent1<br/>
content7<br/>
</div>
<div class="demo demo2">
<img src="http://temp.im/900x320/"><br/>
</div>
//js
require('scroll-bar');
$('.demo1').scrollBar();
$('.demo2').scrollBar({
overflow: "x"
});
- scroll-col
-
描述
横向滚动，支持触屏和半响应; 需指定滚动元素宽度和效果容器高度。
内置hero模式，用于全屏轮显焦点图，三张居中轮显。通常该模式的样式为.demo不设宽度(即全屏宽度)，.demo li普通banner宽度(如980px)；
内置unloop模式，不循环滚动，用于做大事记类的时间轴效果；
注意
- 效果自动计算间距("margin-right")，样式设置的右间距将被覆盖，或者作为效果无法运行时的后备样式。
- 当显示数+滚动步幅>=元素总数时效果不可用
配置
| direct |
自动播放方向，可选left | right |
| mode |
模式，默认无，可选 hero(全屏三图滚动) | unloop(不循环) |
| num |
滚动个数，默认99，即能显示几个显示几个 |
| auto |
默认true，自动播放 |
| interval |
默认5000，单位ms，自动播放间隔 |
| duration |
默认640，单位ms，单次滚动持续时长 |
| animate |
默认‘swing’，滚动效果，来自jquery.easing |
| step |
默认1，每次滚动个数 |
| wrap |
默认‘ul’，指定滚动包裹元素 |
| cell |
默认‘li’，指定滚动元素 |
| prev |
指定向左按钮，默认无，将自动插入 '.arrs .arr_prev'元素 |
| next |
指定向右按钮，默认无，将自动插入 '.arrs .arr_next'元素 |
| handletouch |
默认false，是否劫持触屏事件 |
| callback |
回调 @param (nowStep) |
| ext |
扩展 @param (this, showNumber, allStep) |
示例
<style>
.demo {height: 10em; width:32em; display:none;margin-bottom:2em;}
.demo li {width:10em; background:yellow;}
.demo .arrs{position: absolute; top:50%; width:2em;height: 2em;background: yellow;margin-top: -1em;}
.demo .arr_prev{left:0;}
.demo .arr_next{right:0;}
.demo .scroll_nav{position:absolute;left:0;top:0;}
.demo .scroll_nav .on{color:#39f;}
</style>
<h4>普通模式</h4>
<div class="demo">
<ul>
<li><img src="http://temp.im/300x301/" /></li>
<li><img src="http://temp.im/300x302/" /></li>
<li><img src="http://temp.im/300x303/" /></li>
<li><img src="http://temp.im/300x304/" /></li>
<li><img src="http://temp.im/300x305/" /></li>
</ul>
</div>
<style>
.demo-hero { display:none;}
.demo-hero li {width:980px; background:yellow;}
.demo-hero .arrs{position: absolute; top:50%; width:2em;height: 2em;background: yellow;margin-top: -1em;}
.demo-hero .arr_prev{left:0;}
.demo-hero .arr_next{right:0;}
</style>
<h4>hero模式</h4>
<div class="demo-hero">
<ul>
<li><img src="http://temp.im/980x301/" /></li>
<li><img src="http://temp.im/980x302/" /></li>
<li><img src="http://temp.im/980x303/" /></li>
<li><img src="http://temp.im/980x304/" /></li>
<li><img src="http://temp.im/980x305/" /></li>
</ul>
</div>
<span class="button myback">back</span><span class="button myforward">forward</span>
//js
require('scroll-col');
$('.demo').scrollCol();
$('.demo-hero').scrollCol({
mode: 'hero',
prev: '.myback',
next: '.myforward'
});
- scroll-load
-
描述
监听元素滚动到底部事件，返回scrollLoad方法，语法scrollLoad(config)，或使用jQuery语法格式$el.scrollLoad(config)
配置
| el |
默认null，要监听的元素，使用jQuery语法可省略 |
| distance |
默认70，距离底部开始加载的距离，单位px |
| callback(scrollStop) |
默认无，滚动到底部回调，参数接收终止加载方法，需手动调用 |
| force |
默认false，当对同一个元素多次调用时，可以卸载并重新绑定滚动监听 |
| loadingTemplate |
默认'<div class="scrollLoadSpinning"><span class="_spin"></span></div>'，加载条html |
返回方法
重复绑定或不合法配置将返回null。
示例
<div class="cont" style="width:200px;height: 200px; line-height:2;border:1px solid #ccc;overflow: auto;"></div>
var testdata = '<p>test data</p>',
cont = $('.cont'),
getData = function(length){
var i = 0,
len = length || 10,
r = '';
for(; i<len; i++){
r += testdata;
}
return r;
};
cont.html(getData());
require.async('scroll-load',function(){
cont.scrollLoad({
callback:function(scrollStop){
setTimeout(function(){
cont.append(getData());
scrollStop(); //加载完成后执行scrollStop方法，终止加载状态
},1000);
}
});
});
- scroll-row
-
描述
垂直方向整行滚动。可以处理多列情况，默认添加内部按钮， 如果需要外部按钮可以指定自行添加的按钮。
配置
| prev |
指定向上箭头，默认无，将添加 '.arrs .arr_prev' |
| next |
指定向下箭头，默认无，将添加 '.arrs .arr_next' |
| wrap |
默认ul，指定包裹元素 |
| cell |
默认li，指定列表元素 |
| line |
滚动行数 |
| duration |
滚动时长，默认460，单位ms |
| animate |
默认'swing'，动画曲线，来自jquery.easing |
| auto |
默认true，自动滚动 |
| pause |
默认true，自动滚动时是否悬浮暂停 |
| interval |
自动播放间隔，默认5000，单位ms |
| callback |
滚动回调，@param (nowRow) :当前所在页数 |
| ext |
扩展方法，@param (totalRow) :总页数 |
示例
<style>
.demo { position: relative; width: 320px; height: 22em; overflow: hidden; }
.demo li{ height: 10em; overflow: hidden; margin-bottom:1em; background:yellow; }
.demo .arrs{position: absolute; right:0; width:1.5em;height: 1.5em;background: grey;}
.demo .arr_prev{top:0;}
.demo .arr_next{top:2em;}
</style>
<div class="demo">
<ul class="row">
<li class="span-4 midd-6 smal-12"><img src="http://temp.im/300x300/" /></li>
<li class="span-4 midd-6 smal-12"><img src="http://temp.im/400x400/" /></li>
<li class="span-4 midd-6 smal-12"><img src="http://temp.im/500x500/" /></li>
<li class="span-4 midd-6 smal-12"><img src="http://temp.im/300x300/" /></li>
<li class="span-4 midd-6 smal-12"><img src="http://temp.im/400x400/" /></li>
<li class="span-4 midd-6 smal-12"><img src="http://temp.im/500x500/" /></li>
<li class="span-4 midd-6 smal-12"><img src="http://temp.im/300x300/" /></li>
<li class="span-4 midd-6 smal-12"><img src="http://temp.im/400x400/" /></li>
<li class="span-4 midd-6 smal-12"><img src="http://temp.im/500x500/" /></li>
</ul>
</div>
<div class="myprev">prev</div>
<div class="mynext">next</div>
//js
require('scroll-row');
$('.demo').scrollRow({
prev:'.myprev',
next:'.mynext'
})
- select
-
描述
下拉框插件，使用模拟的增强下拉选择器来代替浏览器原生的选择器。 选择器支持单选、多选、搜索，以及键盘快捷操作。
返回Select方法，语法Select(config)，或使用jquery插件语法$el.select(config)
配置
| data |
默认无，将优先使用数据初始化select元素，数据格式见示例 |
| posi |
默认"bottom"，下拉方向，可选"top"和"auto"，"auto"会计算下拉框距离屏幕上下两端的尺寸，向空间大的一边展开。 |
| hideSelected |
默认false，是否隐藏已经选中的项 |
| hideDisabled |
默认true，是否隐藏不可用的项 |
| act |
默认"click"，下拉触发动作，可选 "mouseenter" |
| filterable |
默认false，是否支持搜索
|
| domsafe |
默认false，若为true将不更新原始select标签的值
|
| hook |
默认''，自定义样式钩子 |
| name |
默认'select'，当基于非select标签创建实例时，指定生成的select标签name |
| disabled |
默认false，是否禁用 |
| readonly |
默认false，是否只读 |
| multi |
默认false，是否可以多选 |
| onChange(value,text) |
选中回调，参数接收最新的value和text |
| format(textArray) |
级联选择文字显示格式，默认return textArray.join(' / '); |
返回对象
所返回的操作句柄包含以下方法：
| update([data]) |
用于更新实例数据，参数接收数组类型数据，没有参数将从DOM节点中收集数据 |
| disabled([flag]) |
禁用实例，若flag为真值将解禁 |
| readonly([flag]) |
只读实例，若flag为真值将恢复可写 |
| destroy() |
销毁实例 |
| clear() |
清空输入 |
| reset([flag]) |
恢复实例为初始值，若flag为真值将不触发onChange事件 |
| text([setValue]) |
读取/设置实例显示值 |
| val([setValue]) |
读取/设置实例值，多选情况下赋值支持数组和字符串两种格式，字符串多个值用,隔开 |
示例
<style>
.demo, button{display: block; width: 200px; margin:10px;}
</style>
<form id="test" >
<!-- 基于select初始化 -->
<select class="demo demo-fromdom" name="select1" >
<option disabled>--请选择--</option>
<option value="1">山东</option>
<option value="2">山西</option>
<option value="3">河南</option>
</select>
<!-- 使用数据初始化 -->
<select class="demo demo-fromdata" name="select2">
<option disabled>--请选择--</option>
</select>
<!-- 基于非select初始化 -->
<div class="demo demo-insert"> </div>
<div class="demo demo-cascader"> </div>
<button class="btn btn-default set1" type="button">切换select1禁用状态</button>
<button class="btn btn-default set2" type="button">更新select2数据</button>
<button class="btn btn-default set4" type="button">设置select4的值</button>
<button class="btn btn-default" type="submit">提交</button>
</form>
var Select = require('select');
var dataAjax = [{
"option": "济南",
"value": "jinan"
}, {
"option": "烟台",
"value": "yantai",
"selected": true
}, {
"option": "青岛",
"value": "qingdao"
}];
var select1 = $('.demo-fromdom').select({
val: [1, 2],
multi: true,
onChange: function(value, text) {
console.log('select1值更新为', value);
}
});
var select2 = $('.demo-fromdata').select({
onChange: function(val, txt) {
console.log('select2选中了' + txt);
}
});
var select3 = $('.demo-insert').select({
filterable: true,
data: dataAjax,
onChange: function(val, txt) {
console.log('select3选中了' + txt);
}
});
var select4 = Select({
el:'.demo-cascader',
data: [{
"option": "山东",
"value": "shandong",
"children": [{
"option": "济南",
"value": "jinan"
}, {
"option": "烟台",
"value": "yantai",
"children": [{
"option": '莱山',
"value": 'laishan'
}, {
"option": '芝罘',
"value": 'zhifu'
}, {
"option": '开发区',
"value": 'kaifaqu'
}, {
"option": '福山',
"value": 'fushan'
}, {
"option": '牟平',
"value": 'muping'
}]
}, {
"option": "青岛",
"value": "qingdao",
"children": [{
"option": '崂山',
"value": 'laoshan'
}, {
"option": '四方',
"value": 'sifang'
}]
}]
},{
"option": "江苏",
"value": "jiangsu",
"children": [{
"option": "浙江",
"value": "zhejiang"
},{
"option": "杭州",
"value": "hangzhou"
},{
"option": "南京",
"value": "nanjing"
}]
}],
onChange: function(value, text) {
console.log(value, text);
}
});
//提交测试
$('#test').on('submit', function(e) {
e.preventDefault();
alert($(this).serialize());
});
//set1
var disabled = false;
$('.set1').on('click', function() {
disabled = !disabled;
select1.disabled(!disabled);
});
//set2
$('.set2').on('click', function() {
select2.update([{
"option": "济南",
"value": "jinan"
}, {
"option": "烟台",
"value": "yantai",
"selected": true
}, {
"option": "青岛",
"value": "qingdao"
}]);
});
$('.set4').on('click', function() {
select4.val('shandong,qingdao,sifang');
});
- sendcode
-
描述
封装带倒计时的短信验证码功能
配置
| mobile |
字符型，要发送的号码，额外支持jquery选择器和函数类型，选择器用于获取input元素，函数用于返回手机号字符串 |
| url |
验证码请求地址 |
| keyName |
手机号在请求参数中的key，默认"mobile" |
| data |
请求附加数据，默认{} |
| time |
倒计时时间，默认60，单位s |
| sendBefore |
发送前回调，参数接收手机号，可用于发送前对手机号做校验，返回真值继续，返回假值进入error回调 |
| sendAfter |
发送成功回调 |
| error |
错误回调，接收错误信息为参数 |
| renderTarget |
默认无，倒计时渲染对象，默认当前元素 |
| render |
倒计时渲染方法 |
| reSendText |
默认"重发验证码"，重发验证码的提示文字 |
示例
<a href="###" class="btn btn-default" id="btn">sendcode</a>
require('sendcode');
$('#btn').sendcode({
mobile: '156555555',
time: 10,
render: function(sec) {
return sec + 's';
},
url: "http://rap.taobao.org/mockjsdata/9195/common/getYes/",
sendBefore: function(mobile) {
alert('sendBefore:mobile is ' + mobile);
return true;
},
sendAfter: function() {
alert('sendAfter callback');
}
});
- slide
-
描述
幻灯片效果，支持触屏操作，支持基于数据创建，支持PC端图片按需加载(不可与响应式图片同时使用)。返回Slide方法，语法：Slide(config)，或者使用jquery插件语法：$el.slide(config)
注意
- 自动生成的导航(小圆点)和左右箭头默认
display:none且不绑定事件，使用时需先在样式中显示；
- 默认导航是带序号的a标签，要自定义a标签内容需要指定导航容器并添加
custom属性:<div class="my_navs" custom> 自己写a标签... </div>
配置
| el |
默认null，容器元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this) |
| data |
默认null，幻灯片数据，优先级高于从Dom中查找，对象数组格式：
[
{
src: '', //图片src
alt: '', //图片alt
link: '', //图片链接
attribute: {} //幻灯片元素属性
},
...
]
|
| wrap |
默认"ul"，不传data时用来指定包裹元素 |
| cell |
默认"li"，不传data时用来指定切换元素 |
| effect |
切换效果，默认‘slide’，可选slide\fade |
| direction |
默认"x"，slide效果滚动方向，可选 x \ y |
| animate |
默认"ease"，css3动画曲线 |
| duration |
默认300，切换动画时长(ms) |
| start |
起始帧，默认0，即从第一张开始 |
| auto |
默认true，自动播放 |
| pause |
默认true，控制是否鼠标悬停时暂停播放，还可以传入选择器将作为暂停按钮，点击暂停，按钮将被添加'pause'类 |
| interval |
默认5000，自动播放间隔(ms) |
| act |
默认‘click’，导航按钮触发事件 mouseenter | click |
| prevHtml |
左箭头html |
| nextHtml |
右箭头html |
| prev |
指定左箭头，不指定将自动插入'.arrs .arr_prev'元素 |
| next |
指定右箭头，不指定将自动插入'.arrs .arr_next'元素 |
| navs |
指定自定义导航，不指定将自动添加'.slide_nav'元素或使用效果元素内已存在的".slide_nav"元素; |
| lazyload |
默认true，使用启用图片按需加载,基于数据创建将自动处理,基于DOM创建需要手动给图片添加data-src属性存储图片地址 |
| handletouch |
默认false，是否劫持触屏事件 |
| onSlide |
幻灯片切换回调，@param (效果元素，切换元素，当前帧序号) |
| onReady |
初始化完成回调，@param (效果元素，切换元素，总帧数) |
示例
<style>
.demo{max-width:1000px;margin:auto;height:0; overflow:hidden; padding-bottom:40%;}
.demo li{background: yellow;}
.demo img{width:100%; height:100%;}
.demo .slide_nav{display:block; left: 0;bottom:0;}
.demo .slide_nav a{float: left;width: 16px;height: 16px;overflow:hidden;background:#ccc;margin:6px;}
.demo .slide_nav .on{background:#666;}
</style>
<div class="demo">
<ul>
<li><img src="http://static.refined-x.com/static/view0.jpg" /></li>
<li><img src="http://static.refined-x.com/static/view1.jpg" /></li>
<li><img src="http://static.refined-x.com/static/view2.jpg" /></li>
<li><img src="http://static.refined-x.com/static/view3.jpg" /></li>
<li><img src="http://static.refined-x.com/static/view4.jpg" /></li>
</ul>
</div>
//js
require('slide');
$('.demo').slide();
- slider
-
描述
滑动输入器，用于在数值区间/自定义区间内进行选择，支持连续或离散值。返回Slider方法，语法Slider(config)，或使用jquery插件语法$el.slider(config)
配置
| el |
默认null，显示滑块控件的容器元素
|
| value |
默认0，传入2位数组将显示为区间选择
|
| min |
默认0，范围最小值
|
| max |
默认100，范围最大值
|
| step |
默认1，步长，建议取值能被(max - min)整除
|
| color |
默认"primary"，可选【Color】组件中的颜色
|
| disabled |
默认false，是否禁用滑块
|
| tip |
默认true，是否显示滑块当前值提示
|
| tipRender |
默认null，提示格式化方法 @param(value) : 当前值
|
| onChange |
默认null，在松开滑动时触发，返回当前的选值，在滑动过程中不会触发， @param(value) : 变更后的值
|
返回方法
| value([value]) |
设置/获取示例当前值
|
| disabled([flag]) |
禁用实例，若flag为真值将解禁
|
示例
<div class="wrap">
<div class="row">
<div class="span-6 m-tb p demo"></div>
</div>
<div class="btn btn-default set">赋值</div>
<div class="btn btn-default get">取值</div>
<div class="btn btn-default toggle">禁用/解禁</div>
</div>
require('slider');
var myslider = $('.demo').slider({
value: 50,
onChange: function(value){
console.log('change to:' + value);
}
});
$('.set').on('click', function(){
myslider.value(parseInt(Math.random() * 100));
});
$('.get').on('click', function(){
console.log('get:' + myslider.value());
});
var cur = true;
$('.toggle').on('click', function(){
cur = !cur;
myslider.disabled(cur);
});
- Spin
-
描述
等待动画插件，返回Spin方法，语法Spin(config)，或使用jquery插件语法$el.Spin(config)
配置
| el |
默认null，等待动画的覆盖元素，不填默认为"body"
|
| icon |
默认""，字体图标代码
|
| text |
默认"Loading"，提示文字
|
| color |
默认无，可选【Color】组件中的颜色
|
| size |
默认"default"，可选"sm" | "lg"
|
| hook |
默认无，可添加自定义样式名
|
| iconRoate |
默认true，图标是否旋转
|
| timeout |
默认0，自动关闭时间，单位ms
|
返回方法
示例
<div class="test m-lg p-lg pr"></div>
<div class="btn btn-default open">打开Spin</div>
<div class="btn btn-default close">关闭Spin</div>
require('spin');
var loading;
$('.open').on('click', function(){
loading = loading || $('.test').spin();
});
$('.close').on('click', function(){
loading && (loading = loading.hide());
});
- Store
-
描述
页面级异步数据存取插件，返回Store对象
方法
| init([config]) |
设置默认ajax参数，默认：
{
type: 'get',
url: '',
dataType: 'json',
data: {}
}
|
| add(object) |
添加预取数据对象，将继承默认ajax参数，格式：
{
key: '', //string, 数据别名
type: 'get',
url: '',
dataType: 'json',
data: {}
}
|
| clear([keyArray]) |
传入由key数组，将某(几)项数据从队列和存储中移除，不传keyArray将清空Store中的所有队列和存储
|
| ready([keyArray], callback) |
确保某(几)项数据已经获取后执行回调方法，不传keyArray将获取队列所有数据
|
| update([keyArray], [callback]) |
更新某(几)项数据，不传keyArray将更新队列所有数据，若传入callback函数，将在完成后执行
|
示例
<div class="wrap">
<button class="btn btn-default add">add</button>
<button class="btn btn-default ready">ready(控制台查看输出)</button>
<button class="btn btn-default clear">clear</button>
<div id="log"></div>
</div>
var store = require('store');
//初始化配置
store.init({
url: 'http://rapapi.org/mockjsdata/9195/tree/getNode'
});
$('.add').on('click', function(){
var randomId = parseInt(Math.random() * 1e6);
store.add({
key: 'api-' + randomId,
data: {
hello: randomId
}
});
$('#log').append('<p>添加 api-' + randomId+'</p>');
});
$('.ready').on('click', function(){
store.ready(function(states) {
console.log('states ready: ', states);
});
});
$('.clear').on('click', function(){
store.clear();
$('#log').empty();
});
- Switch
-
描述
开关插件，返回Switcher方法，语法Switcher(config)，或使用jquery插件语法$el.switcher(config)
$('.flow-ui-switch')元素将自动初始化，并且支持data-config属性
配置
| el |
默认 null，插入开关的容器元素，必须
|
| name |
默认 null，switch实例将与页面中指定name的input值同步，若不存在该input元素将自动创建隐藏元素插入页面
|
| value |
默认 false，初始值
|
| round |
默认 false，是否开启圆角风格
|
| color |
默认 "default"，指定实例色调，支持【color】组件中所有颜色名称
|
| disabled |
默认 false，是否禁用示例
|
| size |
默认 null，指定实例尺寸，支持"sm" | "lg"
|
| onChange |
开关变化时触发回调方法，@param(value) : 当前的实例状态
|
返回方法
| value([value]) |
设置/获取实例当前值
|
| disabled([flag]) |
禁用实例，若flag为真值将解禁
|
示例
<div class="wrap">
<div class="demo"></div>
<div class="btn btn-default seton">开启</div>
<div class="btn btn-default setoff">关闭</div>
<div class="btn btn-default get">获取当前值</div>
<div class="btn btn-default toggle">禁用/解禁</div>
</div>
require('switch');
var myswitch = $('.demo').switcher({
color:'primary',
onChange: function(value){
console.log('switch is ',value);
}
});
$('.seton').on('click', function(){
myswitch.value(true);
});
$('.setoff').on('click', function(){
myswitch.value(false);
});
$('.get').on('click', function(){
console.log(myswitch.value());
});
var cur = true;
$('.toggle').on('click', function(){
cur = !cur;
myswitch.disabled(cur);
});
- tab
-
描述
选项卡切换组件，常用于平级区域大块内容的的收纳和展现。返回Tab方法，语法Tab(config)，或使用jquery插件语法：$el.tab(config)
支持基于标签创建和基于数据创建两种模式。
配置
| el |
默认null，生成/插入选项卡元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)
|
| conts |
默认".tab-cont"；基于标签创建时，$el中指定的选项卡元素选择器，该元素的内容将作为选项卡内容；
该元素的data-tab-title属性值将作为选项卡标签标题，另外还支持actived / disabled属性，分别用于指定初始显示和禁用该选项卡
|
| data |
默认null，用于基于数据创建选项卡，优先级高于基于标签创建，对象数组格式，对象属性:
{
title: "", //标签标题
cont: "", //选选卡内容
actived: boolean, //可选，激活当前选项卡
disabled: boolean, //可选，禁用当前选项卡
color: string //可选，当前选项卡颜色，支持【Color】组件中的所有颜色
}
|
| active |
默认0，默认显示的标签序号，优先级高于数据和标签中的初始值
|
| act |
默认"click"，触发事件，可选"mouseenter"
|
| throttle |
默认300，当act为"mouseenter"时的函数节流间隔，单位ms
|
| extra |
默认无，选项卡标题栏右侧内容，支持DOM字符串或返回DOM的函数
|
| beforeChange |
切换前事件，默认无。@param (index) : 当前帧序号
|
| onChange |
切换回调方法，默认无。 @param (index) : 当前帧序号
|
| onReady |
创建Tab实例后扩展方法，默认无。 @param ($this, opts) : 当前对象，配置
|
返回方法
| active([index]) |
设置/获取当前显示标签序号
|
| disabled(index, [boolean]) |
禁用序号为index的标签，当Boolean值为true时将解禁
|
| setCont(index, cont) |
设置序号为index的标签内容
|
示例
<div class="wrap">
<div class="tabs-1">
<div class="tab-cont" data-tab-title="选项卡一">
许多年过去了，人们说陈年旧事可以被埋葬，然而我终于明白这是错的，因为往事会自行爬上来。回首前尘，我意识到在过去二十六年里，自己始终在窥视着那荒芜的小径。
</div>
<div class="tab-cont" actived data-tab-title="选项卡二">
在你心里，最能代表“春天”的是什么呢？ 是此刻窗外的猫叫。 是衬衫和短裤。 是“沾衣欲湿杏花雨，吹面不寒杨柳风”。 是家里每年春天，母亲亲手沏的那一壶新茶，温暖又缠绵。 也许是压抑不住的出行拍摄的冲动吧。
</div>
<div class="tab-cont" disabled data-tab-title="选项卡三">
一位真正的作家永远只为内心写作，只有内心才会真实地告诉他，他的自私、他的高尚是多么突出。内心让他真实地了解自己，一旦了解了自己也就了解了世界。
</div>
</div>
<div class="m">
<div class="btn btn-default setactive">激活2</div>
<div class="btn btn-default setdisabled">禁用/解禁3</div>
<div class="btn btn-default getactive">获取当前index</div>
</div>
</div>
require('tab');
var mytabs = $('.tabs-1').tab();
$('.setactive').on('click', function(){
mytabs.active(1);
});
var disabled = true;
$('.setdisabled').on('click', function(){
mytabs.disabled(2, disabled);
disabled = !disabled;
});
$('.getactive').on('click', function(){
console.log('actived: ' + mytabs.active());
});
- table
-
描述
数据表格，返回Table方法，语法：Table(config)，或使用jquery插件语法：$el.table(config)
主要用于展示大量结构化数据。支持排序、筛选、编辑等功能。
配置
| el |
默认null，表格生成元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)
|
| data |
用于展示的结构化数据，数组格式，默认无
|
| load |
ajax方式加载数据的配置：
{
method: "get", //请求方式
url: "", //请求url
data: {} //请求参数
dataParser: fn(res) //ajax返回数据处理
}
|
| column |
表格列的配置描述，详见下文
|
| striped |
默认false，是否显示间隔斑马纹
|
| bordered |
默认false，是否显示纵向边框
|
| condensed |
默认false，是否显示为紧凑表格
|
| hover |
默认false，是否显示悬浮背景
|
| width |
表格宽度，单位 px，默认无，将自适应容器宽度
|
| height |
表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头
|
| index |
默认false，是否显示索引列
|
| multi |
默认false，是否支持多选
|
| noDataText |
默认"暂无数据"
|
| noFilterText |
默认"暂无筛选结果"
|
| highlight |
默认false，是否支持高亮选中的行
|
| page |
默认null，静态数据分页配置，可对data传入的数据分页显示。配置：
{
el: 'JQUERY SELECTER', //指定分页显示元素，若不指定将在table.options.el之后插入分页
pageSize: 5, //每页信息条数
onChange: function(pageNumber){} //页码变更回调
}
注意改配置不可用于异步数据翻页，异步数据翻页的例子见插件-数据表格
|
| onSelect |
默认无，单选/多选结果变化回调方法。
@param(index, row, rowArray, [isSelect]) : 当前行数，当前行数据，所有选中行数据数组，是否选中(仅多选有此参数)
|
| onReady |
默认无，初始化完成回调方法。当使用异步数据时将接收ajax返回数据：@param(res)
|
| onLoad |
默认无，异步数据加载回调方法，接收ajax返回数据：@param(res)
|
column配置
| title |
列头显示文字,默认"#"
|
| key |
对应列内容的字段名
|
| render |
自定义列元素渲染方法，@param(value, row, index, entity) : 单元格数据，行数据，行数，行操作句柄。
|
| width |
列宽，默认单元格均分，指定数值不得小于50
|
| align |
对齐方式，默认"left"，可选 center | right
|
| hook |
列的样式名称，默认无
|
| ellipsis |
默认false，开启后，文本将不换行，超出部分显示为省略号
|
| editable |
默认false，该列是否可编辑。
也可以传入一个方法，接收编辑结果相关数据 @param(rowIndex, key, value) : 原始数据行序号，列属性，新值
|
| sort |
默认false，该列是否可排序，可以设置本地排序方法和排序回调方法：
{
mehtod: function(a,b,type){}, //过滤方法，type 值为 "asc" 和 "desc"；传入非函数类型将使用sort()排序
handle： function(key, type){} //跳过method，接管排序按钮点击事件，可以用于ajax请求排序数据。
}
|
| filters |
默认无，过滤器对象数组。
过滤器对象：
{
lable: "", //过滤器名称
mehtod: function(value){}, //过滤方法，参数接受被过滤的值，返回 true 通过过滤
handle： function(){} //跳过method，接管过滤器点击事件，可以用于ajax请求过滤数据。
}
|
| validateMethod |
验证方法，接受单元格编辑后的值，验证通过需要明确return true;
|
返回方法
| data([newData]) |
获取/设置表格数据
|
| load(ajaxSet) |
重新ajax获取表格数据，参数：
{
method: "get", //请求方式
url: "", //请求url
data: {} //请求参数
}
|
| column([newColumn]) |
获取/设置表格列数据
|
| getPager |
返回分页实例，可以获得Page组件的操作方法，仅用于静态数据分页，异步分页需要手动处理Table插件和Page插件的联动。
|
| size([config]) |
设置/获取当前表格实例的宽和高；
config对象接受"width"和"height"属性
|
| reload |
将表格重置为初始数据或重新加载远程数据
|
| getRows |
返回当前(分页)的所有行数据
|
| getSelected([prop]) |
返回当前所选行数据，允许传入过滤属性，不传将返回完整对象数组，@param([prop]) : 过滤属性
|
| scrollTo(index) |
滚动到当前(分页)第index行，index从0开始计数
|
| highlightRow(index) |
高亮第index条数据所在行，index从0开始计数
|
| selectAll |
全选当前(分页)所有行
|
| unselectAll |
全不选当前(分页)所有行
|
| selectRow(index) |
选择数据第index行，index从0开始计数
|
| unselectRow(index) |
取消选择数据第index行，index从0开始计数
|
| getEntity(index, key) |
获取第index条数据所在行且属性为key的单元格操作实例
实例具有以下方法：
| set(key, value) |
设置该行数据属性为key的单元格值为value
|
| toggle(key, value) |
切换该行数据属性为key的单元格值为value
|
| get(full) |
返回当前单元格的值；若设置full为true，将返回该单元格所在行数据
|
| edit([callback]) |
使当前单元格进入编辑状态，可设置回调函数 @param(row, key, value) : 当前行数据，当前编辑单元格key，编辑后的值
|
|
| updateRow(index, row) |
更新数据队列第index行，index从0开始计数
row可以是当前行数据对象的子集，未包含的属性将沿用原数据
|
| appendRow(row) |
向表格末尾追加数据行
|
| insertRow(start, row) |
在数据队列第start处插入row，若start超出数据总长度，将追加到最后一行，相当于appendRow(row)
|
| deleteRow(index) |
删除数据队列第index条
|
| getChanges([type]) |
返回类型为type的数据更改，type值可选"add","update","delete"；若不传type，将返回包含所有更改类型的数据
|
| sort(key, [method]) |
将属性为key的列按照method排序，method为标准排序方法，接受a,b两个参数，若不传method将使用js默认的数据sort()方法排序
|
| detailFormater(index, render) |
为第index条数据所在行生成附加内容，param(index, render) : 数据所在行, 内容生成方法
|
| detailClear(index) |
清除第index条数据所在行的附加内容
|
示例
<div class="mytable m pr" style="width:800px;height: 400px"></div>
<div class="mypage m"></div>
<div class="m">
<div class="btn btn-default updateCol">更新列</div>
<div class="btn btn-default updateData">更新数据</div>
<div class="btn btn-default getpager">操作page对象</div>
<div class="btn btn-default resize">更改尺寸</div>
<div class="btn btn-default reload">reload</div>
<div class="btn btn-default getRows">获取当前页rows</div>
<div class="btn btn-default getSelected">获取当前已选rows</div>
<div class="btn btn-default scrollTo">滚到第2行</div>
<div class="btn btn-default highlightRow">高亮第3行</div>
<div class="btn btn-default selectAll">全选</div>
<div class="btn btn-default unselectAll">全不选</div>
<div class="btn btn-default selectRow">选中第4行</div>
<div class="btn btn-default unselectRow">取消选中第4行</div>
<div class="btn btn-default getEntity">单元格实体方法</div>
<div class="btn btn-default updateRow">更新第一行数据</div>
<div class="btn btn-default appendRow">追加数据</div>
<div class="btn btn-default insertRow">再第一行后插入数据</div>
<div class="btn btn-default deleteRow">删除第二行数据</div>
<div class="btn btn-default getChanges">获取差异数据</div>
<div class="btn btn-default sort">按"价格"排序</div>
</div>
var Table = require('table');
//列配置
var myColumn = [{
title:'operation',
render: function(value, rowData, index, entity){
if(rowData.storage > 0){
return $('<div class="btn btn-primary btn-sm">折扣</div>').on('click', function(e){
e.stopPropagation();
entity.toggle('price', Math.round(rowData.price * 0.8));
});
}else{
return $('<div class="btn btn-primary btn-sm disabled">无货</div>');
}
},
width: 100,
fixed: true
},{
title: '图片',
render: function(value, rowData, index){
var smallImg = $('<img src="http://bsdn.org/projects/dorado7/deploy/sample-center/dorado/res/com/bstek/dorado/sample/data/images/'+rowData.product+'-24.png" alt="data.product" style="max-height:28px" />');
smallImg.tip('<img src="http://bsdn.org/projects/dorado7/deploy/sample-center/dorado/res/com/bstek/dorado/sample/data/images/'+rowData.product+'-128.png" style="width:128px;" />',{
type: 'content'
});
return smallImg;
}
},{
title:'产品',
key:'product',
width: 125,
sort: {
mehtod: true,
handle: function(key, type){
datagrid.load({
url: 'https://static.refined-x.com/static/phone.json',
data: {
sort: type,
key: key
},
dataParser: function(res){
return res.data;
}
});
}
},
validateMethod: function(value){
if(value && value.split && value.length < 10){
return true;
}
require.async('notice', function(Notice){
Notice({
title: '请输入长度小于10的字符串！',
color:'warning',
delay: 2000
});
});
},
editable: function(rowIndex, key, value){
console.log(rowIndex, key, value);
}
},{
title:'制造商',
key:'manufacturer',
filters: [
{
label: '全部',
mehtod: function(value){
return true;
}
},
{
label: '三星',
mehtod: function(value){
return value.indexOf('Samsung')===0;
}
},
{
label: '苹果',
mehtod: function(value){
return value.indexOf('Apple')===0;
}
},
{
label: '诺基亚',
mehtod: function(value){
return value.indexOf('Nokia')===0;
}
}
],
editable: function(rowIndex, key, value){
console.log(rowIndex, key, value);
}
},{
title:'价格',
key:'price',
width: 100,
styler: function(value){
if(value>3000){
return "background: rgb(252, 197, 197)";
}
},
editable: function(rowIndex, key, value){
console.log(rowIndex, key, value);
}
},{
title:'库存',
key:'storage',
align: 'center',
sort: true,
styler: function(value){
if(value<100){
return "background: rgb(211, 211, 211); color: red";
}
}
},{
title:'类型',
width: 200,
key: 'type',
render: function(value, rowData, index, entity){
var inputArray = [{
type:"A",
name: '直板'
},{
type:"B",
name: '翻盖'
},{
type:"C",
name: '滑盖'
}];
var inputName = "phonetype"+index;
var typeControl = '<div style="user-select: none;">';
$.each(inputArray, function(i, e){
typeControl += ('<label class="radio radio-inline"><input type="radio" name="'+inputName+'" value="'+e.type+'"'+(e.type===value ? ' checked' : '')+' />'+e.name+'</label>');
});
typeControl += '</div>';
return $(typeControl).on('change', function(){
var newValue = $(this).find('input:checked').val();
entity.set('type', newValue);
});
}
},{
title:'体积(mm)',
width: 200,
render: function(value, rowData, index){
var size = rowData.size;
if(size){
return [size.length, size.width, size.height].join(' x ');
}
}
},{
title:'comment',
key: 'comment',
width: 200,
editable: function(rowIndex, key, value){
console.log(rowIndex, key, value);
}
}];
//其他插件
var Tip = require('tip');
//调用Table
var datagrid = Table({
el:'.mytable',
load: {
url: 'https://static.refined-x.com/static/phone.json',
data: {
id: 123
},
dataParser: function(res){
return res.data;
}
},
column: myColumn,
multi: true,
page: {
el: '.mypage',
pageSize: 5
},
onSelect: function(index, row, collection){
console.log(index, row, collection);
}
});
//测试
$('.updateCol').on('click',function(){
var col = datagrid.column();
col.splice(0,1);
datagrid.column(col);
});
$('.updateData').on('click',function(){
var tableData = datagrid.data();
tableData.reverse();
datagrid.data(tableData);
});
$('.getpager').on('click', function(){
var pager = datagrid.getPager();
pager.set({
current: 3
});
});
$('.resize').on('click', function(){
var thesize = datagrid.size();
var sizeArray = [thesize.width, thesize.height].reverse();
datagrid.size({
width: sizeArray[0],
height: sizeArray[1]
});
});
$('.reload').on('click', function(){
datagrid.reload();
});
$('.getRows').on('click', function(){
console.log('getRows()', datagrid.getRows());
});
$('.getSelected').on('click', function(){
console.log('getSelected()', datagrid.getSelected());
});
$('.scrollTo').on('click', function(){
datagrid.scrollTo(2);
});
$('.highlightRow').on('click', function(){
datagrid.highlightRow(3);
});
$('.selectAll').on('click', function(){
datagrid.selectAll();
});
$('.unselectAll').on('click', function(){
datagrid.unselectAll();
});
$('.selectRow').on('click', function(){
datagrid.selectRow(3);
});
$('.unselectRow').on('click', function(){
datagrid.unselectRow(3);
});
$('.getEntity').on('click', function(){
var entity = datagrid.getEntity(0, 'storage');
entity.edit(function(row, key, value){
console.log('entity.edit() ', row, key, value);
});
});
$('.updateRow').on('click', function(){
datagrid.updateRow(0, {
price: 999,
storage: 8888
});
});
var newRow = {
"product": "I9000",
"manufacturer": "三星",
"type": "A",
size: {
"width": 61.4,
"height": 12.6,
"length": 120.2
},
"os": "Android 6.1",
"cpu": "Samsung 2GHz",
"screen": "5.5",
"touchScreen": true,
"price": 6550,
"storage": 8,
"comment": "弧面屏"
};
$('.appendRow').on('click', function(){
datagrid.appendRow(newRow);
});
$('.insertRow').on('click', function(){
datagrid.insertRow(1, newRow);
});
$('.deleteRow').on('click', function(){
datagrid.deleteRow(1);
});
$('.getChanges').on('click', function(){
console.log(datagrid.getChanges());
});
$('.sort').on('click', function(){
datagrid.sort('price', function(a,b){
return a-b;
});
});
- Timepicker
-
描述
时间选择插件，返回TimePicker方法，语法：TimePicker(config)，或使用jquery插件语法：$el.timepicker(config);
配置
| el |
默认null，制定触发元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)；当元素具有value属性时，value将自动同步所选时间
|
| trigger |
默认"click"，触发动作 hover | click |
| value |
默认当前时间，选择器初始值，配置时间必须符合format所设置的格式
|
| format |
默认"hh:mm:ss"，格式化输出
|
| hours |
默认24，时制，可选 12
|
| place |
默认"bottom-center"，选择器出现位置，选项同Tip插件
|
| checkClass |
默认"text-primary"，选中时间项附加样式
|
| confirm |
默认false，是否显示底部确认按钮
|
| show |
默认false，是否初始化后立即显示
|
| onReady |
默认无，插件初始化完成回调 @param(parsedTime, timeData) : 格式化后的时间字符串，时间对象
|
| onChange |
默认无，当confirm为true时的点选回调 @param(parsedTime, timeData) : 格式化后的时间字符串，时间对象
|
| onSelect |
默认无，选择时间回调 @param(parsedTime, timeData) : 格式化后的时间字符串，时间对象
|
返回方法
同Tip插件
演示
<div class="wrap">
<div class="row">
<div class="span-2">
<div class="demo1 btn btn-default">打开时间选择器</div>
</div>
<div class="span-2">
<input type="text" class="demo2 form-control" >
</div>
<div class="span-2">
<div class="btn btn-default toggle2">切换demo2可用状态</div>
</div>
</div>
</div>
var TimePicker = require('timepicker');
TimePicker({
el: '.demo1',
show: true,
onSelect: function(time) {
$('.demo1').text('onchange:' + time);
}
});
var picker2 = $('.demo2').timepicker({
format: 'hh点mm分',
value: '11点30分',
confirm: true,
onSelect: function(time){
alert('onchange:' + time);
}
});
$('.toggle2').on('click',function(){
picker2.disabled($('.demo2').prop('disabled'));
});
- tip
-
描述
提示框插件，返回Tip方法，语法：Tip(TipContent, config)，或者使用jquery插件语法： $el.tip(TipContent, config);
TipContent支持文本，html，jQuery元素(将清除默认样式)
配置
| el |
默认null，制定触发元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this) |
| trigger |
默认"hover"，触发动作 hover | click | custom |
| place |
默认"left-center"，弹出元素相对于$handle的显示位置，规则"第一轴向-第二轴向-[定位模式]"，第一轴向可选"left | right | top | bottom"，第二轴向除四个方位外还可以选择"center"，定位模式非必填，可选"in"，"in"定位模式表示$target将覆盖$handle |
| title |
默认false，标题文字，不显示标题栏 |
| hasarr |
默认true，提示框有无箭头 |
| offset |
默认0，提示框与元素间距 |
| type |
默认"auto"，弹出文本内容自带边框，DOM元素不带边框，可选'content'，所有元素均自带边框弹出 |
| modal |
默认false，是否带半透明背景
|
| opacity |
默认0.5，模态背景透明度
|
| hook |
默认无，字符型，class钩子，将添加到弹出元素上
|
| show |
默认false，立即显示，显示后只能用返回对象中的hide()方法关闭
|
| onshow |
默认无，显示回调，接收当前对象为参数 |
| onhide |
默认无，关闭回调 |
返回方法
| obj.hide() |
关闭当前tip实例 |
| obj.disabled(flag) |
禁用当前tip实例，若flag为真值将解禁 |
| obj.destroy() |
销毁当前tip实例 |
示例
<style>
/*css*/
.demo a{margin: 60px;}
</style>
<!--html-->
<div class="wrap demo">
<a href="#1" class="_tip1 btn btn-default">左</a>
<a href="#2" class="_tip2 btn btn-default">上</a>
<a href="#3" class="_tip3 btn btn-default">右-自动显示并关闭</a>
<a href="#4" class="_tip4 btn btn-default">下-自定义触发条件</a>
<a href="#4" class="btn btn-primary toggle-tip4">显示最后一个tip</a>
</div>
//js
var Tip = require('tip');
$('.demo ._tip1').tip(Math.random, {
place: 'left-center'
});
$('.demo ._tip2').tip(Math.random, {
place: 'top-center'
});
var tip3 = $('.demo ._tip3').tip(Math.random, {
place: 'right-center',
show: true
});
setTimeout(function() {
tip3.hide();
}, 1000);
var tip4 = Tip(Math.random, {
el: $('.demo ._tip4'),
place: 'bottom-center',
trigger: 't4show'
});
$('.toggle-tip4').on('click', function(){
$('.demo ._tip4').trigger('t4show');
setTimeout(function() {
tip4.hide();
}, 2000);
});
- zoom
-
描述
图片放大镜，大图尺寸自动获取。
配置
| zoomWidth |
大图窗口宽度，默认与目标对象同宽 |
| zoomHeight |
大图窗口高度，默认与目标对象同高 |
| zoomScale |
默认0，大图相对小图放大倍数(大于1有效) |
| offset |
大图窗口与小图距离，默认10，单位px |
| offsetTarget |
大图定位目标，默认无，将相对目标元素定位 |
| position |
大图相对小图方位，默认right |
| animate |
默认true，大图是否渐显 |
| duration |
默认200，大图渐显动画时长 |
| preload |
默认true，预加载大图，小图动态切换的情况只对第一张有效 |
示例
<!--html-->
<style>
.demo{width:400px;height:320px;line-height: 320px; text-align:center;background:#eee;}
.demo img{display: inline-block;vertical-align: middle;}
</style>
<div class="demo">
<img src="http://temp.im/320x240/" zoom="http://temp.im/640x480/" />
</div>
// JS
require('zoom');
$('.demo').zoom()
- zTree
-
描述
树形插件，基于zTree优化。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
基于zTree美化皮肤，并自动添加ztree类，修复没有id无法拖拽的bug，及其他细节微调。
注意
依赖tree.less样式组件
配置
见官网文档
示例
<div class="wrap"><div class="tree1"></div></div>
require('zTree');
var zNodes = [{
name: "test1",
open: true,
children: [{
name: "test1_1",
checked: true,
chkDisabled: true
}, {
name: "test1_2"
}]
}, {
name: "test2",
open: true,
children: [{
name: "test2_1",
children: [{
name: "test2_1_1"
}, {
name: "test2_2_2"
}]
}, {
name: "test2_2"
}]
}];
$.fn.zTree.init($(".tree1"), {
check: {
enable: true
}
}, zNodes);