jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

因为做的项目需要，在我网上看到mobiscroll这个插件，然后各种找demo，最后自己研究一下，下面是就我自己项目上用到的进行分析；

首先是常用的日期使用：

HTML部分：

<li id="birthday">  
    <div class="mbase-menu-title">生日</div>  
    <div  
        class="mbase-menu-txt">未设置</div>  
    <div class="clear"></div>  
</li>  

JS部分：

$("#birthday").mobiscroll().date({  //这里是date，还有time，datetime不在本文范围
            theme: "android-ics",  //这个是主题，即控制着样式，可根据操作系统不同设置不一样的样式
            lang: "zh",  //语言
            display: 'bottom',  //弹窗显示底部
            dateFormat: 'yy-mm-dd', //返回结果格式化为年月格式  
            // wheels:[], 设置此属性可以只显示年月，此处演示，就用下面的onBeforeShow方法,另外也可以用treelist去实现  
            //onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }, //弹掉“日”滚轮  
            headerText: function (valueText) { //自定义弹出框头部格式  
                array = valueText.split('-');  
                return array[0] + "年" + array[1] + "月" + array[2] + "日";  
            },  
            onSelect: function (valueText, inst) {  
                $(this).find(".mbase-menu-txt").html(valueText);  
                /*$.post("inc/person.org.php", {apart: "resume_base", birthday: valueText}, function (result) { 
                    if (result == 'ok') { 
                        $(this).find(".mbase-menu-txt").html(valueText); 
                    } 
                    else { 
                        error('网络繁忙，请您稍后再试'); 
                    } 
                });*/ 这是后端入库部分  
            }  
        });  

这个是插件用在日期选择的部分，参数可以查看官网的api,下面的是效果图

下面是自定义选项treelist的，可以用在比如选择文本项的时候

移动端单项选择文本

HTML部分：

<li id="sex">  
            <div class="mbase-menu-title">性别</div>  
            <div class="mbase-menu-txt">未设置</div>  
            <div class="clear"></div>  
 </li>

<ul id="sex-list" style="display: none">  
    <li>先生</li>  
    <li>女士</li>  
</ul> 





JS部分：

$("#sex").click(function () {  
            var that = this;  
            $("#sex-list").mobiscroll().treelist({  
                theme: "android-ics",  
                lang: "zh",  
                display: 'bottom',  
                inputClass: 'tmp',  
                headerText: '请您选择',  
                onSelect: function (valueText) {  
                    var m = $(this).find("li").eq(valueText).html();  
                    /*$.post("inc/person.org.php", {apart: "resume_base", sex: m}, function (result) { 
                        if (result == 'ok') { 
                            $(that).find(".mbase-menu-txt").html(m); 
                        } 
                        else { 
                            error('网络繁忙，请您稍后再试'); 
                        } 
                    });*/后端入库部分  
                }  
            });  
            $("input[id^=sex-list]").focus();  
        });  

效果：





接下来是我自己的项目中的运用：



要实现点击“-- 请选择市区 --”，出现市区的弹窗，可以滑动选择市区
在实现这个功能之前，需要下载该插件的CSS和js 。因为在官网下载麻烦，需要注册，所以大家可以去这个博客下载http://blog.csdn.net/enjoy_gw/article/details/52779852



HTML代码：
<div class="chose" id="chose">
	<div class="Tit border-bottom border-top"><em>--   请选择市区    --</em><i>▼</i></div>
</div>
<!--选择市区-->
	<ul id="select-list" style="display: none">  
    	<li>杭州市</li>  
    	<li>宁波市</li> 
    	<li>温州市</li>  
    	<li>湖州市</li>
    	<li>嘉兴市</li>
    	<li>绍兴市</li>
    	<li>金华市</li>
    	<li>衢州市</li>
    	<li>舟山市</li>
    	<li>台州市</li>
    	<li>丽水市</li>
</ul> 
CSS：

.chose{margin-bottom: 0.20rem;}
.Tit{position: relative; height: 0.78rem;line-height: 0.78rem;background: #fff;font-size: 0.30rem; color: #333;text-align: center; cursor: pointer;}
.Tit i{position: absolute;top: 0;right: 0.20rem;color: #999;}
.mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }  
.mbsc-ios7 .dwb{color:#323232;}
.mbsc-ios7 .dw-li{text-align: center;}







JS代码：

$("#chose").click(function () {  
    var that = this; 
    $("#select-list").mobiscroll().treelist({  
        theme: "ios7",  
        lang: "zh",  
        display: 'bottom', 
        onSelect: function (valueText) {  
            var m = $(this).find("li").eq(valueText).html();
            $('.chose em').text(m);
            alert(valueText);
	这里是点击确定之后执行的
           /*$.post("inc/person.org.php", {apart: "resume_base", sex: m},function (result) { 
                        if (result == 'ok') { 
                            $(that).find(".mbase-menu-txt").html(m); 
                        } 
                        else { 
                            error('网络繁忙，请您稍后再试'); 
                        } 
            });*/后端入库部分  
        }  
    });  
    $("input[id^=select-list]").focus();
    $('#select-list_dummy').hide();
}); 


总结：

要想改一些参数什么的，请看官网的api，也可以参考这个博客http://www.cnblogs.com/mingtianct/p/5761914.html
笔记： http://note.youdao.com/yws/public/redirect/share?id=95fd7bf95aa4f13bd6ba0f9ed16b6f6b&type=false
参数详解：


  
  

   
   
$("#id").mobiscroll().date({//这里是date，还有time，datetime不在本文范围。
  
  

  
  

   
   
            theme: theme,//样式，可根据操作系统不同设置不一样的样式
  
  

  
  

   
   
            lang: "zh",
  
  

  
  

   
   
            cancelText: "取消",
  
  

  
  

   
   
            dateFormat: 'yyyy-mm-dd',
  
  

  
  

   
   
            onBeforeShow: function (inst) { },
  
  

  
  

   
   
            endYear: 2016,//可根据当前年份设置
  
  

  
  

   
   
            dayText: '日', monthText: '月', yearText: '年',
  
  

  
  

   
   
            headerText: function(valueText) { 
  
  

  
  

   
   
                var array = valueText.split('-');
  
  

  
  

   
   
                return array[0] + "年" + array[1] + "月" + array[2] + "日";
  
  

  
  

   
   
            },
  
  

  
  

   
   
            onBeforeShow:function(inst){//展示前的事件
  
  

  
  

   
   
        inst.settings.readonly=true;//只读属性
  
  

  
  

   
   
       },
  
  

  
  

   
   
            onSelect: function (valueText, inst) {//选择时事件（点击确定后），valueText 为选择的时间，
  
  

  
  

   
   
                var selectedDate = valueText;
  
  

  
  

   
   
            }
  
  

  
  

   
   
        });
  
  



  
  


   
   

    
    配置里的theme参数，提供多种样式供参考：
   
   

   
   

    
    android 
   
   

   
   

    
    android-holo
   
   

   
   

    
    android-holo-light
   
   

   
   

    
    android-ics
   
   

   
   

    
    android-ics-light
   
   

   
   

    
    ios(窗口底部划出)
   
   

   
   

    
    ios7(窗口底部划出)
   
   

   
   


    
    

     
     jqm（感觉类似透明的效果，自己去试试效果）
    
    

    
    


     
     

      
      sense-ui
     
     

    
    

    
    

     
     wp
    
    

   
   

  
  

  
  

   
   
更多请参考官方网站 
   
   https://docs.mobiscroll.com/2-17-2
  
  
可以一个一个试，找到自己的想要的主题样式。