zoukankan      html  css  js  c++  java
  • Mobiscroll的介绍【一款兼容PC和移动设备的滑动插件】

     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.用户体验
        所有的组件设计都密切关注用户体验和性能。高级控件不会让用户感到失望。

    官网地址:http://www.mobiscroll.com/

    在线例子:http://demo.mobiscroll.com/

    下载地址:http://download.mobiscroll.com/

    GIT托管地址:https://github.com/acidb/mobiscroll

    最新2.17.0破解版下载:http://download.csdn.net/detail/shimiso/9260795

    文档API 地址:http://docs.mobiscroll.com/

    代码示例:


     
    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. });  

    也可以自定义样式

  • 相关阅读:
    Java 使用对话框选择文件并输出到控制台
    Java 数组 可变长参数 实例
    Java 返回一个整数的各个数字之和的一种方法
    weblogic控制台部署web项目图解
    合理的饮食+适当的运动=健康的身体
    Linux远程管理器xshell和xftp使用教程,以及遇到关闭Xshell后项目也停止的解决方法
    java使用freemarker 生成word文档
    MyEclipse 2014优化设置(禁用myeclipse updating indexes)
    ORACLE中查询被锁定的表,以及如何解锁
    MySql查询优化
  • 原文地址:https://www.cnblogs.com/nifengs/p/5309640.html
Copyright © 2011-2022 走看看