UI组件
简介
移动端基于jquery,zepto的UI组件库，目前实现 JS Components：Toast、Action、Tips、Dialog、Swiper、CityPicker、DatetimePicker、Tab、Range Css Component：oneborder、Loading、button From Component：switch、Radio、Checkbox Plug Components：Turntable、Lottery 演示
https://myfirebug.github.io/ui/dist/html/index.html求star github
使用
Toast用法
/*config参数说明
*---------
*text:内容
*icon:icon样式
delay:延迟时间
---------/
Toast({
message: ‘提示’,
icon:‘fails’,
duration: 5000
});
Action用法 /*config参数说明 *--------- *title:标题 *mask:是否有遮罩 actions:列表 ---------/ Actions({ title: ‘选择操作’, mask:true, actions:[ { text:‘列表1’, callBack:function(){ alert(‘我是列表1’); } }, { text:‘列表2’, callBack:function(){ alert(‘我是列表2’); } }, { text:‘列表3’, callBack:function(){ alert(‘我是列表3’); } } ] });
Tips用法
/*config参数说明
*---------
*text:内容
delay:延迟时间
---------/
Tips({
test: ‘提示’,
delay: 5000
});
Dialog用法 /*config参数说明 *--------- *title:标题 *message:内容 buttons:按钮列表 ---------/ Dialog({ title: ‘提示’, message: ‘出错了’, buttons: [ { text :‘我已经了解了’, callback: function(){ alert(122); } } ] });
Swiper用法 /*config参数说明 *--------- *container：必填项操作的DOM *wrapper：操作父dom *slide：滚动列表 *initialSlide:从第几项开始 *direction：滚动方向(horizontal(横向),vertical(纵向)) *autoplay: 自由滚动 *pagination：索引 *startFn：开始函数 endFn: 滚动结束函数 ---------/ new Swiper(’#swiper-container’,{ wrapper: ‘.swiper-wrapper’, slide: ‘.swiper-slide’, initialSlide:5, direction: ‘horizontal’, autoplay: 5000, pagination: ‘.swiper-pagination’, startFn: function(){}, endFn: function(){} });
CityPicker用法 /*config参数说明 *--------- *container：必填项操作的DOM *url:地址数据来源 *eventName:事件类型 *value:返回的数据 coordinates[]返回的数据坐标 ---------/ new CityPicker(’#js-datetitmepicker’,{ eventName:‘click’, url:’…/js/address.min.js’, value:[], selectedClass:’.c-gray’, coordinates:[0,0,0] });
DatetimePicker用法 /*config参数说明 *--------- *container：必填项操作的DOM *type:类型（date：日期，datetime:时间，custom:自定义数据） *eventName:事件类型 *cols:数据 *selectedClass 有值时按钮的样式 *value:返回的数据 *connector:连接符号 callback:返回的函数 ---------/ new DatetimePicker(’#js-datetitmepicker’,{ type:‘date’, eventName:‘click’, cols: cols, selectedClass:’’, connector:’-’, callBack:function(){} });
Tab用法
/*config参数说明
*---------
*defaultIndex:默认项
*event:事件
*activeClass:选中class
is_slide:是否可滑动
---------/
$(’#js-tab1’).tab({
defaultIndex : 0,
activeClass : ‘ui-tab-red’,
is_slide : true
});
Range用法 /*config参数说明 *--------- *min:最大值 *max:最小值 *step:步长 *defaltValue:默认值 *disable:是否可滑动 *starFn:callback *moveFn:callback endFn:callback ---------/ $(’#slider1’).range({ min: 0, max: 36, step: 1, defaultValue: 12, startFn:function(value){$(’.text1’).text(value + ‘月’);}, moveFn: function(value){$(’.text1’).text(value + ‘月’);}, endFn: function(value){} })