入门

Mobiscroll可以让你很容易的创建非常好用的滚轮选择器，支持触摸噢.
mobiscroll的设计理念不但可以很轻松的支持date & time 时间选择器, 更可以很轻松的支持scrollable lists, selects, radiobutton lists 诸如此类的列表。

按照以下步骤你可以很轻松的创建出您的第一个mobiscroll控件。

1. 插入一个input元件到您的页面中

   <input id="scroller" name="scroller" />
   

2. Mobiscroll 依赖于 jQuery, Zepto.js, App Framework (一个Jquery的组件库) 等诸如此类的组件库

   <script src="jquery-1.10.2.min.js"></script>
   <!-- or -->
   <script src="zepto.js"></script>
   <!-- or -->
   <script src="appframework.js"></script>
   <!-- or -->
   <script src="jquery.custom.min.js"></script>
   

3. 初始化控制器(jQuery) 默认的日期选择器

   $(function(){
    // 创建默认设置的时间选择器
    $("#scroller").mobiscroll().date(); 
    //另外一种写法: $("#scroller").mobiscroll({ preset: 'date' });
   });
   

   默认的小时选择器

   $(function(){
    // 创建默认设置的时间选择器
    $("#scroller").mobiscroll().time();
    //另外一种写法: $("#scroller").mobiscroll({ preset: 'time' });
   });
   

   默认的时间选择器

   $(function(){
    // 创建默认设置的时间选择器
    $("#scroller").mobiscroll().datetime();
    //另外一种写法: $("#scroller").mobiscroll({ preset: 'datetime' });
   });
   

4. 初始化控制器(jQuery Mobile)
   当基于jQuery环境下时大部分是使用$(document).ready() (或$(function() { }) )，当DOM文档结构渲染好后运行. 但是, 在jQuery Mobile环境下, 你必须在页面初始化的时候把事件绑定在上面，要不然会在出错.

   $(document).on('pageinit', '#testPage', function () {
    // create a datepicker with default settings
    $("#scroller").mobiscroll().date(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
   });