移動端日歷控件 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)
    <br />
    @Html.LabelFor(m => m.Birthday)

    <!-- Generate a date scroller for the birthday model property-->
    @Html.Mobiscroll().DateFor(m => m.Birthday)
    <br />
    @Html.LabelFor(m => m.Gender)

    <!-- create the selectlist used for the select scroller -->
    IEnumerable<SelectListItem> genders = new SelectList(new List<string>(){"male", "female"});
    @Html.Mobiscroll().SelectFor(m => m.Gender, genders)
    <br />
    @Html.LabelFor(m => m.FavoriteBook)

    <!-- create the selectlist for the books grouped by author -->
    Dictionary<string, IEnumerable<SelectListItem>> books = new Dictionary<string, IEnumerable<SelectListItem>>();
    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)
    <br />
    <button type="submit">Send</button>
}

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

 

 

以下是本人看了一下API后隨意寫的幾個例子，其實用select去做會更好，此處只是演示，就隨便啦！

 

自定義年月（去掉年月日的"日"滾輪布局）：

 

@{
    ViewBag.Title = "taste mobiscroll";
}
@section styles{
<link href="~/Content/mobiscroll-2.13.2.full.min.css" rel="stylesheet" />
<style>
</style>
}
<div class="container">
    <input id="date" />
</div>

@section scripts{
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/mobiscroll-2.13.2.full.min.js"></script>
<script>
$(function () {
    $("#date").mobiscroll().date({
        theme: "android-ics light",
        lang: "zh",
        cancelText: null,
        dateFormat: 'yy/mm', //返回結果格式化為年月格式
        // 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] + "月";
        }
    });
})
</script>
}

效果如下圖：

 

treelist 示例一：

 

<style>
.mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }
</style>

<ul id="treelist">
    <li>普通班</li><li>VIP班</li><li>特色班</li><li>至尊班</li><li>女子特訓班</li>
</ul>

<script>
$(function () {
    $("#treelist").mobiscroll().treelist({
        theme: "android-ics light",
        lang: "zh",
        defaultValue: [Math.floor($('#treelist li').length/2)],
        cancelText: null,
        headerText: function (valueText) { return "選擇班級"; }
    });
})
</script>

效果如下圖：

 

 

treelist 示例二：

 

<style>
.mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }
</style>

<ul id="treelist">
    <li>
        <span>奧迪</span>
        <ul>
            <li>奧迪A3</li>
            <li>奧迪A4L</li>
            <li>奧迪A6L</li>
            <li>奧迪Q3</li>
            <li>奧迪Q5</li>
            <li>奧迪A4</li>
            <li>奧迪A6</li>
            <li>奧迪A1</li>
            <li>奧迪A3(進口)</li>
        </ul>
    </li>
    <li>
        <span>寶馬</span>
        <ul>
            <li>寶馬X1</li>
            <li>寶馬i3</li>
            <li>寶馬1系</li>
            <li>寶馬3系</li>
            <li>寶馬5系</li>
        </ul>
    </li>
    <li>
        <span>奔馳</span>
        <ul>
            <li>奔馳A級</li>
            <li>奔馳C級</li>
            <li>奔馳E級</li>
            <li>奔馳S級</li>
            <li>奔馳GLK級</li>
            <li>奔馳CLA級</li>
            <li>奔馳CLS級</li>
        </ul>
    </li>
</ul>

<script>
$(function () {
    var i = Math.floor($('#treelist>li').length / 2),
        j = Math.floor($('#treelist>li').eq(i).find('ul li').length / 2);
    $("#treelist").mobiscroll().treelist({
        theme: "android-ics light",
        lang: "zh",
        defaultValue: [i,j],
        cancelText: null,
        placeholder: '選擇車型',
        headerText: function (valueText) { return "選擇車型"; },
        formatResult: function (array) { //返回自定義格式結果
            return $('#treelist>li').eq(array[0]).children('span').text() +' '+ $('#treelist>li').eq(array[0]).find('ul li').eq(array[1]).text().trim(' ');
        }
    });
})
</script>

效果如圖：