项目作者: myfirebug

项目描述 :
移动端基于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
高级语言: CSS
项目地址: git://github.com/myfirebug/ui.git
创建时间: 2017-06-06T07:15:08Z
项目社区:https://github.com/myfirebug/ui

开源协议:

下载


UI组件


简介

移动端基于jquery,zepto的UI组件库,目前实现

  1. JS ComponentsToastActionTipsDialogSwiperCityPickerDatetimePickerTabRange
  2. Css ComponentoneborderLoadingbutton
  3. From ComponentswitchRadioCheckbox
  4. Plug ComponentsTurntableLottery

演示

https://myfirebug.github.io/ui/dist/html/index.html

使用

Toast用法

  1. /*config参数说明
  2. *---------
  3. *text:内容
  4. *icon:icon样式
  5. *delay:延迟时间
  6. ---------*/
  7. Toast({
  8. message: '提示',
  9. icon:'fails',
  10. duration: 5000
  11. });

Action用法

  1. /*config参数说明
  2. *---------
  3. *title:标题
  4. *mask:是否有遮罩
  5. *actions:列表
  6. ---------*/
  7. Actions({
  8. title: '选择操作',
  9. mask:true,
  10. actions:[
  11. {
  12. text:'列表1',
  13. callBack:function(){
  14. alert('我是列表1');
  15. }
  16. },
  17. {
  18. text:'列表2',
  19. callBack:function(){
  20. alert('我是列表2');
  21. }
  22. },
  23. {
  24. text:'列表3',
  25. callBack:function(){
  26. alert('我是列表3');
  27. }
  28. }
  29. ]
  30. });

Tips用法

  1. /*config参数说明
  2. *---------
  3. *text:内容
  4. *delay:延迟时间
  5. ---------*/
  6. Tips({
  7. test: '提示',
  8. delay: 5000
  9. });

Dialog用法

  1. /*config参数说明
  2. *---------
  3. *title:标题
  4. *message:内容
  5. *buttons:按钮列表
  6. ---------*/
  7. Dialog({
  8. title: '提示',
  9. message: '出错了',
  10. buttons: [
  11. {
  12. text :'我已经了解了',
  13. callback: function(){
  14. alert(122);
  15. }
  16. }
  17. ]
  18. });

Swiper用法

  1. /*config参数说明
  2. *---------
  3. *container:必填项操作的DOM
  4. *wrapper:操作父dom
  5. *slide:滚动列表
  6. *initialSlide:从第几项开始
  7. *direction:滚动方向(horizontal(横向),vertical(纵向))
  8. *autoplay: 自由滚动
  9. *pagination:索引
  10. *startFn:开始函数
  11. *endFn: 滚动结束函数
  12. ---------*/
  13. new Swiper('#swiper-container',{
  14. wrapper: '.swiper-wrapper',
  15. slide: '.swiper-slide',
  16. initialSlide:5,
  17. direction: 'horizontal',
  18. autoplay: 5000,
  19. pagination: '.swiper-pagination',
  20. startFn: function(){},
  21. endFn: function(){}
  22. });

CityPicker用法

  1. /*config参数说明
  2. *---------
  3. *container:必填项操作的DOM
  4. *url:地址数据来源
  5. *eventName:事件类型
  6. *value:返回的数据
  7. *coordinates[]返回的数据坐标
  8. ---------*/
  9. new CityPicker('#js-datetitmepicker',{
  10. eventName:'click',
  11. url:'../js/address.min.js',
  12. value:[],
  13. selectedClass:'.c-gray',
  14. coordinates:[0,0,0]
  15. });

DatetimePicker用法

  1. /*config参数说明
  2. *---------
  3. *container:必填项操作的DOM
  4. *type:类型(date:日期,datetime:时间,custom:自定义数据)
  5. *eventName:事件类型
  6. *cols:数据
  7. *selectedClass 有值时按钮的样式
  8. *value:返回的数据
  9. *connector:连接符号
  10. *callback:返回的函数
  11. ---------*/
  12. new DatetimePicker('#js-datetitmepicker',{
  13. type:'date',
  14. eventName:'click',
  15. cols: cols,
  16. selectedClass:'',
  17. connector:'-',
  18. callBack:function(){}
  19. });

Tab用法

  1. /*config参数说明
  2. *---------
  3. *defaultIndex:默认项
  4. *event:事件
  5. *activeClass:选中class
  6. *is_slide:是否可滑动
  7. ---------*/
  8. $('#js-tab1').tab({
  9. defaultIndex : 0,
  10. activeClass : 'ui-tab-red',
  11. is_slide : true
  12. });

Range用法

  1. /*config参数说明
  2. *---------
  3. *min:最大值
  4. *max:最小值
  5. *step:步长
  6. *defaltValue:默认值
  7. *disable:是否可滑动
  8. *starFn:callback
  9. *moveFn:callback
  10. *endFn:callback
  11. ---------*/
  12. $('#slider1').range({
  13. min: 0,
  14. max: 36,
  15. step: 1,
  16. defaultValue: 12,
  17. startFn:function(value){$('.text1').text(value + '月');},
  18. moveFn: function(value){$('.text1').text(value + '月');},
  19. endFn: function(value){}
  20. })