利用jquery mobiscroll插件选择日期、select、treeList的具体运用

mobiscroll是个很好用的用于移动端滑动选择的插件,可以用来选择日期,也可以用来选择简单选项或者一些复杂的树形结构的选项,简单分享下。

依赖也比较简单,引入一个mobiscroll-2.13.2.full.min.js文件和一个mobiscroll-2.13.2.full.min.css文件即可。

参考官网http://docs.mobiscroll.com

1.选择日期,先看效果图:

js代码:

var opt={};
            opt.datetime = {};
            opt.default = {
                theme: ‘ios7‘,
                display: display,
                mode: ‘scroller‘,
                dateFormat: ‘yy-mm-dd‘,
                dateOrder: ‘yymmdd‘,
                dayText: ‘日‘, monthText: ‘月‘, yearText: ‘年‘,hourText: ‘时‘,minuteText: ‘分‘,
                lang: ‘zh‘,
                stepMinute: 10,
                showNow: true,
                nowText: "当前",
                startYear: currYear,
                endYear: currYear+1,
                onSelect: function (value) {
                    //点击确定触发的事件
                }
            };

            var optDateTime = $.extend(opt[‘datetime‘], opt[‘default‘]);
            $("#"+id).mobiscroll(optDateTime).datetime(optDateTime);

            this.mscroller = jq;

2.简单选项的滑动选择:

js代码:

 1 $(‘#‘ + id).mobiscroll().select({
 2                     theme: ‘android-ics light‘,
 3                     mode: ‘scroller‘,
 4                     display: ‘bottom‘,
 5                     lang: ‘zh‘,
 6                     cancelText: null,
 7                     headerText: ‘选择车辆‘,
 8                     onSelect: function(value) {
 9                         //点击确定触发事件12                     }
13                 });

选项内容select option 形式放在html页面中,代码:

1 <select id="car_select" data-type="selectP" style="display: none;">
3        <option>
4          <span>轿车 ******</span>
5        </option>
7 </select>

3.树形结构的选项:

js代码:

$(‘#‘ + id).mobiscroll().treelist({
                    theme: ‘android-ics light‘,
                    mode: ‘scroller‘,
                    display: ‘bottom‘,
                    lang: ‘zh‘,
                    labels: [‘车辆‘],
                    cancelText: null,
                    headerText: ‘选择车辆‘,
                    formatResult: function (array) {
                        //返回自定义格式结果
                    }
                });                        

选项内容ul li 形式放在html页面中,代码:

<ul id="car_select" data-type="treeList" style="display: none;">
                <li>
                    <span>宝马X7</span>
                    <ul>
                        <li>浙A 484816</li>
                        <li>浙A 178123</li>
                        <li>浙A 789654</li>
                    </ul>
                </li>
                <li>
                    <span>奥迪A8</span>
                    <ul>
                        <li>浙B 999888</li>
                        <li>浙B 528963</li>
                        <li>浙B 784511</li>
                    </ul>
                </li>
                <li>
                    <span>奔驰S600</span>
                    <ul>
                        <li>浙C 456925</li>
                        <li>浙C 555555</li>
                        <li>浙C 578411</li>
                    </ul>
                </li>
            </ul>

select,treeList使控件显示:

$(‘#‘ + id).mobiscroll(‘show‘);

隐藏:

$(‘#‘ + id).mobiscroll(‘hide‘);

end

本文为博主原创,转载请注明来源。

时间: 2024-10-21 21:20:20

利用jquery mobiscroll插件选择日期、select、treeList的具体运用的相关文章

利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系

  利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通常用于开发比较高级的jQuery的部件,开发难度较大,所以第一种和第二种方式用的更为广泛,下面主要对前两种方式的区别和联系以及使用的方法做一些介绍. 简要的说明一下: jQuery是一个封装的非常好的类,$(“#btn”)就相当于创建了一个jQuery的实例. 1.方法jQuery.fn .exte

JQuery日历插件My97DatePicker日期范围限制

转:http://www.xiongge.club/744.html My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 <input class="Wdate" id="d1" onclick="WdatePicker()" /> 下面重点说明日期范围限制: 1)静态限制 你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期

利用jQuery无插件创建可扩展目录树

这是一个简单.轻量级的,基于jQuery的目录树.纯html代码. <html> <head> </head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>   <script> $( document ).ready( function( ) {     $( '.t

JQuery chosen插件,实现select多选

步骤:1.js 2.在select标签上添加 multiple="multiple" 属性 3.添加class=" chosen-select" 属性 即可实现多选 默认值选定: 1.获取标签默认值,根据格式拆分数据 2.使用 $('.chosen-select').chosen({ allow_single_deselect : true }); $('.chosen-select').trigger("liszt:updated"); eg:

基于MVC+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动.滚动插件 : http://www.cnblogs.com/linJie1930906722/p/6072984.htm

利用jquery的imgAreaSelect插件实现图片裁剪示例

利用jquery的imgAreaSelect插件实现图片裁剪示例 将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现这个在以前来说非常棘手的功能.我们来看看它的实现步骤: 1.包含进CSS文件(imgareaselect-default.css)和 jquery.imgareaselect.js文件 2.html代码(要裁剪的图片元素) <img id="selectbanner&q

jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 三.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 四.详细代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit