jquery mobiscroll

最新推荐文章于 2025-04-25 16:33:44 发布

摸路

最新推荐文章于 2025-04-25 16:33:44 发布

阅读量772

点赞数

分类专栏： jquery 移动端

本文链接：https://blog.youkuaiyun.com/qq_27868533/article/details/79538327

版权

jquery 同时被 2 个专栏收录

3 篇文章

订阅专栏

移动端

2 篇文章

订阅专栏

mobiscroll.android-ics-2.5.2.js 配置文件

修改下拉框宽高时不要去修改样式，直接配置即可，有时配置出来的宽度在火狐跟谷歌浏览器上差异很大，可以在逻辑界面直接设置下拉框的宽度为窗口界面宽度的百分比即可。

(function ($) {
    var theme = {
        defaults: {
            dateOrder: 'Mddyy', // 日期显示的格式 M英文缩写 一般设置为'mmddyy' 三列显示顺序为月 日 年
            mode: 'mixed',
            rows: 5,    // 显示的下拉选择项的行数
            width: 60,    // 下拉框宽度系数
            height: 50,    // 下拉框高度系数
            showLabel: false // 是否显示 年月日标签
        }
    }

    $.mobiscroll.themes['android-ics'] = theme;
    $.mobiscroll.themes['android-ics light'] = theme;

})(jQuery);

mobiscroll.core-2.5.2.js 下拉选择逻辑和样式属性设置文件

自己根据需要去修改

mobiscroll.datetime-2.5.1-zh.js 插件语言文件

文件引入后，调用时直接设置 lang 属性为定义的 zh
即可

(function ($) {
    $.mobiscroll.i18n.zh = $.extend($.mobiscroll.i18n.zh, {
        dateFormat: 'yyyy-mm-dd hh:ii:ss',
        dateOrder: 'yymmdd',
        dayNames: ['周日', '周一;', '周二;', '周三', '周四', '周五', '周六'],
        dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
        dayText: '日',
        hourText: '时',
        minuteText: '分',
        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        monthText: '月',
        secText: '秒',
        timeFormat: 'HH:ii',
        timeWheels: 'HHii',
        yearText: '年',
        setText: '确定',
        cancelText: '取消'
    });
})(jQuery);

时间选择实例

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>hangge.com</title>  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="./css/mobiscroll.core-2.5.0.css" />
    <link rel="stylesheet" type="text/css" href="./css/mobiscroll.android-ics-2.5.0.css" />
    <link rel="stylesheet" type="text/css" href="./css/mobiscroll.animation-2.5.2.css" />
    <script type="text/javascript" src="./jquery-1.11.1.min.js">  </script>
    <script type="text/javascript" src="./js/mobiscroll.core-2.5.0.js"></script>
    <script type="text/javascript" src="./js/mobiscroll.android-ics-2.5.0.js"></script>
    <script type="text/javascript" src="./js/mobiscroll.core-2.5.2-zh.js"></script>  
    <script type="text/javascript" src="./js/mobiscroll.datetime-2.5.0.js"></script>
    <script type="text/javascript" src="./js/mobiscroll.datetime-2.5.1-zh.js"></script>
    <script type="text/javascript" src="./js/mobiscroll.select-2.5.0.js"></script>
    <script type="text/javascript">
        $(function () {  
            var currYear = (new Date()).getFullYear();    
            var opt={};  
            opt.date = {
                preset : 'date',
                minDate:new Date(),
                stepMinute: 1
            };
            opt.default = {  
                theme: 'android-ics light', //皮肤样式
                display: 'modal', //显示方式 ：modal（正中央）  bottom（底部）
                mode: 'scroller', //日期选择模式
                lang:'zh',   // 语言
                startYear:currYear - 20,  //开始年份currYear-20不起作用的原因是加了minDate: new Date()
                endYear:currYear + 20 //结束年份
                //minDate: new Date() //加上这句话会导致startYear:currYear-20失效，去掉就可以激活startYear:currYear-20,
            };
            $("#appDateTime").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
            $("#appDateTime").scroller('setDate', new Date(), true);
        });  
    </script>  
</head>  
<body>
     <input id="appDateTime" name="in_date"  />
</body>
</html>