移动端日历控件 mobiscroll 的简单使用、参数设置

mobiscroll 在性能方面比较好，可选用多种效果，滑动效果也比较顺畅。

 

提供样式文件和js文件，直接点击下载，该版本是 mobiscroll 2.13的

官方地址 ： https://docs.mobiscroll.com/2-17-2

下载地址：  http://note.youdao.com/yws/public/redirect/share?id=95fd7bf95aa4f13bd6ba0f9ed16b6f6b&type=false

 

需引入jquery。该插件很强大，本文只是简单的引用日历。

 

var theme="ios";

$("#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

 

 

 

mobiscroll ： 滑动选择

2.13.2版本免费，官网（mobiscroll.com）收费

先从官方下载2.13.2体验版下来，查看例子结合官方API学习( http://docs.mobiscroll.com/2-13-2 )

另外官方还有在线例子：

http://demo.mobiscroll.com/mobile/datetime/date/#display=modal&theme=mobiscroll&lang=en&language=zh

http://demo.mobiscroll.com/select/countrypicker/#language=zh&display=modal

 

.net 可以在程序包管理控制台输入安装：Install-Package Mobiscroll

下载完成后，保留mobiscroll-2.13.2.full.min.css，mobiscroll-2.13.2.full.min.js , 其它的css、js可删除

 

.net视图引擎可直接渲染mobiscroll控件

 

@using (Html.BeginForm())
{
    @Html.LabelFor(m => m.Name)
    @Html.TextBoxFor(m => m.Name)

    @Html.LabelFor(m => m.Birthday)


    @Html.Mobiscroll().DateFor(m => m.Birthday)

    @Html.LabelFor(m => m.Gender)


    IEnumerable genders = new SelectList(new List<string>(){"male", "female"});
    @Html.Mobiscroll().SelectFor(m => m.Gender, genders)

    @Html.LabelFor(m => m.FavoriteBook)


    Dictionary<string, IEnumerable> books = new Dictionary<string, IEnumerable>();
    books.Add("Adams", new SelectList(new List<string>() {
        "The Hitchhiker's Guide to the Galaxy",
        "The Restaurant at the End of the Universe",
        "So Long, and Thanks for All the Fish",
        "Life, the Universe and Everything"
    }));
    books.Add("Asimov", new SelectList(new List<string>() {
        "I, Robot",
        "The Caves of Steel",
        "Foundation"
    }));
    books.Add("Herbert", new SelectList(new List<string>() {
        "Dune",
        "God Emperor of Dune",
        "Dune Messiah",
        "Children of Dune"
    }));
    @Html.Mobiscroll().SelectFor(m => m.FavoriteBook, books)

    "submit">Send
}

详情：http://docs.mobiscroll.com/2-14-3/mvc-helpers

 

 

以下是本人看了一下API后随意写的几个例子，其实用select去做会更好，此处只是演示，就随便啦！

 

自定义年月（去掉年月日的"日"滚轮布局）：

 

@{
    ViewBag.Title = "taste mobiscroll";
}
@section styles{
"~/Content/mobiscroll-2.13.2.full.min.css" rel="stylesheet" />
  </li> 
      <li class="alt">
}
class="container">
    "date" />

  

  

@section scripts{  

"~/Scripts/jquery-1.8.2.min.js">  

"~/Scripts/mobiscroll-2.13.2.full.min.js">     

  

}  

效果如下图：

 

treelist 示例一：

 

  </li> 
      <li>.mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }  </li> 
      <li class="alt">

"treelist">

普通班
VIP班
特色班
至尊班
女子特训班


  </li> 
      <li>$(function () {  </li> 
      <li class="alt">    $(<span class="string">"#treelist").mobiscroll().treelist({  </span></li> 
      <li>        theme: <span class="string">"android-ics light",  </span></li> 
      <li class="alt">        lang: <span class="string">"zh",  </span></li> 
      <li>        defaultValue: [Math.floor($(<span class="string">'#treelist li').length/2)],  </span></li> 
      <li class="alt">        cancelText: <span class="keyword">null,  </span></li> 
      <li>        headerText: function (valueText) { <span class="keyword">return <span class="string">"选择班级"; }  </span></span></li> 
      <li class="alt">    });  </li> 
      <li>})   </li> 
      <li class="alt">

效果如下图：

 

 

treelist 示例二：

 

  </li> 
      <li>.mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }  </li> 
      <li class="alt">

"treelist">


        奥迪
           
                  奥迪A3   
                  奥迪A4L   
                  奥迪A6L   
                  奥迪Q3   
                  奥迪Q5   
                  奥迪A4   
                  奥迪A6   
                  奥迪A1   
                  奥迪A3(进口)



        宝马
           
                  宝马X1   
                  宝马i3   
                  宝马1系   
                  宝马3系   
                  宝马5系



        奔驰
           
                  奔驰A级   
                  奔驰C级   
                  奔驰E级   
                  奔驰S级   
                  奔驰GLK级   
                  奔驰CLA级   
                  奔驰CLS级



  </li> 
      <li class="alt">$(function () {  </li> 
      <li>    var i = Math.floor($(<span class="string">'#treelist>li').length / 2),  </span></li> 
      <li class="alt">        j = Math.floor($(<span class="string">'#treelist>li').eq(i).find(<span class="string">'ul li').length / 2);  </span></span></li> 
      <li>    $(<span class="string">"#treelist").mobiscroll().treelist({  </span></li> 
      <li class="alt">        theme: <span class="string">"android-ics light",  </span></li> 
      <li>        lang: <span class="string">"zh",  </span></li> 
      <li class="alt">        defaultValue: [i,j],  </li> 
      <li>        cancelText: <span class="keyword">null,  </span></li> 
      <li class="alt">        placeholder: <span class="string">'选择车型',  </span></li> 
      <li>        headerText: function (valueText) { <span class="keyword">return <span class="string">"选择车型"; },  </span></span></li> 
      <li class="alt">        formatResult: function (array) { <span class="comment">//返回自定义格式结果  </span></li> 
      <li>            <span class="keyword">return $(<span class="string">'#treelist>li').eq(array[0]).children(<span class="string">'span').text() +<span class="string">' '+ $(<span class="string">'#treelist>li').eq(array[0]).find(<span class="string">'ul li').eq(array[1]).text().trim(<span class="string">' ');  </span></span></span></span></span></span></span></li> 
      <li class="alt">        }  </li> 
      <li>    });  </li> 
      <li class="alt">})   </li> 
      <li>

效果如图：