手机日期插件jquery mobiscroll 实例

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>  

效果如图：
 



分类: JQuery