Scoller的使用

1、引入相关js,css文件

<script src="js/appframework.min.js"></script>
<link href="css/mobiscroll.custom-2.16.1.min.css" rel="stylesheet" type="text/css" />
 <script src="js/mobiscroll.custom-2.16.1.min.js" type="text/javascript"></script>

2、页面写控件如

<div data-role="fieldcontain" class="demo-cont" id="demo_cont_datetime">
            <label for="demo_datetime">Try Date & Time</label>
            <input type="text" id="demo_datetime" />  
        </div> 

3、写js方法

$(function () {
            function init() {
                $('#demo_datetime').mobiscroll().datetime({
                    theme: "mobiscroll",    
                    mode: "scroller",       
                    display: "bottom", 
                    lang: "zh",       
                    minDate: new Date(2014,3,10,9,22),  
                    maxDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),  
                    stepMinute: 1
                });    
            } 
  init();
  });

效果如图


还可以有的别的相关设置,如demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">


    <title>Mobiscroll</title>


    <!-- App Framework Include -->
    <script src="http://cdn.app-framework-software.intel.com/2.0/appframework.min.js"></script>




    <!-- Mobiscroll JS and CSS Includes -->
    <link href="css/mobiscroll.custom-2.16.1.min.css" rel="stylesheet" type="text/css" />
    <script src="js/mobiscroll.custom-2.16.1.min.js" type="text/javascript"></script>


    <style type="text/css">
        /* Demo Page styling, you can ignore this in your implementation */
        body { padding: 0; margin: 0; font-size: 16px; font-family: arial, verdana, sans-serif; }
        input, select { width: 100%; padding: .625em; margin: 0 0 .625em 0; border: 1px solid #aaa; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
        .header { padding: .625em; background: #5185a8;}
        .header h1 { margin: 0; padding: 0; color: #fff; text-align: center; font-size: 1.25em; font-weight: bold; text-shadow: 1px 1px 1px #000; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
        .content { padding: 1em; }
    </style>


    <script>
        $(function () {


            function init() {
                
                // Date demo initialization
                $('#demo_date').mobiscroll().date({
                   
theme: theme,     // Specify theme like: theme: 'ios' or omit setting to use default 
  
mode: mode,       // Specify scroller mode like: mode: 'mixed' or omit setting to use default 


display: display, // Specify display mode like: display: 'bottom' or omit setting to use default 
 
lang: lang        // Specify language like: lang: 'pl' or omit setting to use default 
           
});
                
                // Date & Time demo initialization
                $('#demo_datetime').mobiscroll().datetime({
                   
theme: theme,     // Specify theme like: theme: 'ios' or omit setting to use default 
    
mode: mode,       // Specify scroller mode like: mode: 'mixed' or omit setting to use default 
     
display: display, // Specify display mode like: display: 'bottom' or omit setting to use default 
 
lang: lang,       // Specify language like: lang: 'pl' or omit setting to use default


minDate: new Date(2014,3,10,9,22),  // More info about minDate:http://docs.mobiscroll.com/2-16-1/datetime#!opt-minDate
                    
maxDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),   // More info about maxDate: http://docs.mobiscroll.com/2-16-1/datetime#!opt-maxDate
                    
stepMinute: 5  // More info about stepMinute: http://docs.mobiscroll.com/2-16-1/datetime#!opt-stepMinute
               
});
                
// Time demo initialization
                $('#demo_time').mobiscroll().time({
                    
theme: theme,     // Specify theme like: theme: 'ios' or omit setting to use default 
mode: mode,       // Specify scroller mode like: mode: 'mixed' or omit setting to use default 
                  
display: display, // Specify display mode like: display: 'bottom' or omit setting to use default 
                    
lang: lang        // Specify language like: lang: 'pl' or omit setting to use default 
               
});
                
// Number demo initialization
                $('#demo_number').mobiscroll().number({
                    
theme: theme,     // Specify theme like: theme: 'ios' or omit setting to use default 
mode: mode,       // Specify scroller mode like: mode: 'mixed' or omit setting to use default
max: '200',
                   
display: display, // Specify display mode like: display: 'bottom' or omit setting to use default 
                    
lang: lang        // Specify language like: lang: 'pl' or omit setting to use default 
                
});


            }


            // -------------------------------------------------------------------
            // Demo page code START, you can ignore this in your implementation
            var demo, theme, mode, display, lang;


            $('.settings').on('change', function() {
                demo = $('#demo').val();
                theme = $('#theme').val() || $.mobiscroll.defaults.theme,
                mode = $('#mode').val(),
                display = $('#display').val(),
                lang = $('#language').val();


                $('.demo-cont').hide();
                $("#demo_cont_" + demo).show();


                init();
            });


            $('#demo').trigger('change');
            // Demo page code END
            // -------------------------------------------------------------------
        });
    </script>
</head>


<body>
    <div class="header">
        <h1>Mobiscroll</h1>
    </div>


    <div class="content">
        <!-- ------------------------------------------------------------------ -->
        <!-- Demo configurator markup START, ignore this in your implementation -->
        <div>
            <label for="theme">Theme</label>
            <select name="theme" id="theme" class="settings">
                <option value="">Default / Auto</option>
                <option value="mobiscroll">Mobiscroll</option>
                <option value="android-holo">Android Holo</option>
                <option value="android-holo-light">Android Holo Light</option>
            </select>
        </div>
        <div>
            <label for="mode">Mode</label>
            <select name="mode" id="mode" class="settings">
                <option value="scroller">Scroller</option>
                <option value="clickpick">Clickpick</option>
                <option value="mixed">Mixed</option>
            </select>
        </div>
        <div>
            <label for="display">Display</label>
            <select name="display" id="display" class="settings">
                <option value="modal">Modal</option>
                <option value="inline">Inline</option>
                <option value="bubble">Bubble</option>
                <option value="top">Top</option>
                <option value="bottom">Bottom</option>
            </select>
        </div>
        <div>
            <label for="language">Language</label>
            <select name="language" id="language" class="settings">
                <option value="">English</option>
                <option value="zh">Chinese</option>
            </select>
        </div>
        <div>
            <label for="demo">Demo</label>
            <select name="demo" id="demo" class="settings">
                <option value="date" selected>Date</option>
                <option value="datetime" >Date & Time</option>
                <option value="time" >Time</option>
                <option value="number" >Number</option>
            </select>
        </div>
        <!-- Demo configurator markup END -->
        <!-- ------------------------------------------------------------------ -->


    
        <!-- Date demo markup -->
        <div data-role="fieldcontain" class="demo-cont" id="demo_cont_date">
            <label for="demo_date">Try Date</label>
            <input type="text" id="demo_date" />  
        </div>
    
        <!-- Date & Time demo markup -->
        <div data-role="fieldcontain" class="demo-cont" id="demo_cont_datetime">
            <label for="demo_datetime">Try Date & Time</label>
            <input type="text" id="demo_datetime" />  
        </div>
    
        <!-- Time demo markup -->
        <div data-role="fieldcontain" class="demo-cont" id="demo_cont_time">
            <label for="demo_time">Try Time</label>
            <input type="text" id="demo_time" />  
        </div>
    
        <!-- Number demo markup -->
        <div data-role="fieldcontain" class="demo-cont" id="demo_cont_number">
            <label for="demo_number">Try Number</label>
            <input type="text" id="demo_number" />  
        </div>


    </div>
</body>
</html>

相关API:https://docs.mobiscroll.com/3-0-0_beta3/jquery/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值