博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Mobiscroll的介绍【一款兼容PC和移动设备的滑动插件】
阅读量:5124 次
发布时间:2019-06-13

本文共 1450 字,大约阅读时间需要 4 分钟。

 Mobiscroll是一个用于触摸设备的日期和时间选择器,它的使用不会改变HTML5、PhoneGap以及混合应用的原生用户体验。作为一款jQuery滑动选择插件,用户可以自定义主题样式,为自己的移动项目UI组件添色。Mobiscroll支持所有主流平台:iOS、Android、BlackBerry, Windows Phone 8以及Amazon Kindle。

  

它具有如下优点:

1.触摸式UI界面
    在智能手机和平板的移动设备上,使用大量的手势和触摸与mobiscroll进行互动。
2.主题化
    完全的主体化。有各种各样的主题,但是要经过简单的额外定制以匹配设备中使用的主题。
3.整合插件
    在最受欢迎的MVVM框架和平台中整合诸如Angular.JS, Knockout, Backbone, Bootstrap, Kendo UI等UI插件。
4.跨平台
    真正的跨平台和跨浏览器。可以在主流的移动和桌面浏览器上工作。支持iOS, Android, Windows Phone 8, Windows8, Blackberry, Amazon Kindle等平台。
5.支持多种框架
    不管是使用jQuery, jQuery Mobile, Zepto.JS还是Intel App Framework,Mobiscroll都为上述四种框架提供完美支持。
6.用户体验
    所有的组件设计都密切关注用户体验和性能。高级控件不会让用户感到失望。

 

官网地址:

在线例子:

下载地址:

GIT托管地址:

最新2.17.0破解版下载:

文档API 地址:

 

代码示例:

 
  1. $(function () {  
  2.     $('#demo').mobiscroll().treelist({  
  3.         theme: 'mobiscroll',//样式  
  4.         display: 'bottom',//指定显示模式  
  5.         fixedWidth: [160,160,160],//三组滚动框的宽度  
  6.         placeholder: '请选择...',//空白等待提示  
  7.         lang: 'zh', //语言  
  8.         mode:'scroller',//选择模式  scroller  clickpick  mixed  
  9.         rtl:false,//按钮是否靠右  
  10.         headerText:'',//头部提示文字  
  11.         rows:5,//滚动区域内的行数  
  12.     //  defaultValue: ['', '', ''],//设置初始值  
  13.         labels: ['省', '市', '区'],  
  14.         showLabel:true,//是否显示labels  
  15.         closeOnOverlay:false,//如果为ture覆盖点击将滚动条内数据将关闭遮罩层  
  16.         tap:true,  
  17.         onSelect: function (valueText, inst) {  
  18.             var val = inst.getVal(); // Call the getVal method   
  19.             var value = inst.getValue(); //           
  20.             var arryVal = inst.getArrayVal();   
  21.             //alert(valueText);    
  22.         },  
  23.         formatResult: function (data) {       
  24.             return data[0] + '_' + data[1]+ '_'+ data[2];  
  25.         }  
  26.            
  27.     });  
  28.       
  29. });  

 

也可以自定义样式

转载于:https://www.cnblogs.com/nifengs/p/5309640.html

你可能感兴趣的文章
idea启动项目没错,可是debug却一直启动不起来
查看>>
POST
查看>>
Javascript设置对象属性为"只读"
查看>>
iOS MBProgressHUD 之带底板的加载提示
查看>>
四则运算心得
查看>>
「一本通 4.1 练习 2」简单题
查看>>
Mybatis 系列2-配置文件
查看>>
Buying Feed, 2010 Nov (单调队列优化DP)
查看>>
【网络流24题】No.7 试题库问题 (最大流,二分图多重匹配)
查看>>
一行代码为UITextField添加收键盘功能
查看>>
重启模块与及关开邮件存储设置功能页面-PHP-shell-py
查看>>
DNS协议详解
查看>>
[OJ] Matrix Zigzag Traversal
查看>>
2015-7.7森林探秘季
查看>>
千位分隔符的完整攻略
查看>>
PHP 递归删除目录中文件
查看>>
小甲鱼Python笔记(下)
查看>>
面试题19:二叉树镜像
查看>>
Android端实时音视频开发指南
查看>>
C++ 一键关闭屏幕
查看>>