wid 窗口 s/4 The show read int ons length

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控件

[csharp] view plaincopyprint?

1. @using (Html.BeginForm())
2. {
3. @Html.LabelFor(m => m.Name)
4. @Html.TextBoxFor(m => m.Name)
5. <br />
6. @Html.LabelFor(m => m.Birthday)
8. <!-- Generate a date scroller for the birthday model property-->
9. @Html.Mobiscroll().DateFor(m => m.Birthday)
10. <br />
11. @Html.LabelFor(m => m.Gender)
13. <!-- create the selectlist used for the select scroller -->
14. IEnumerable<SelectListItem> genders = new SelectList(new List<string>(){"male", "female"});
15. @Html.Mobiscroll().SelectFor(m => m.Gender, genders)
16. <br />
17. @Html.LabelFor(m => m.FavoriteBook)
19. <!-- create the selectlist for the books grouped by author -->
20. Dictionary<string, IEnumerable<SelectListItem>> books = new Dictionary<string, IEnumerable<SelectListItem>>();
21. books.Add("Adams", new SelectList(new List<string>() {
22. "The Hitchhiker‘s Guide to the Galaxy",
23. "The Restaurant at the End of the Universe",
24. "So Long, and Thanks for All the Fish",
25. "Life, the Universe and Everything"
26. }));
27. books.Add("Asimov", new SelectList(new List<string>() {
28. "I, Robot",
29. "The Caves of Steel",
30. "Foundation"
31. }));
32. books.Add("Herbert", new SelectList(new List<string>() {
33. "Dune",
34. "God Emperor of Dune",
35. "Dune Messiah",
36. "Children of Dune"
37. }));
38. @Html.Mobiscroll().SelectFor(m => m.FavoriteBook, books)
39. <br />
40. <button type="submit">Send</button>
41. }

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

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

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

[csharp] view plaincopyprint?

1. @{
2. ViewBag.Title = "taste mobiscroll";
3. }
4. @section styles{
5. <link href="~/Content/mobiscroll-2.13.2.full.min.css" rel="stylesheet" />
6. <style>
7. </style>
8. }
9. <div class="container">
10. <input id="date" />
11. </div>
13. @section scripts{
14. <script src="~/Scripts/jquery-1.8.2.min.js"></script>
15. <script src="~/Scripts/mobiscroll-2.13.2.full.min.js"></script>
16. <script>
17. $(function () {
18. $("#date").mobiscroll().date({
19. theme: "android-ics light",
20. lang: "zh",
21. cancelText: null,
22. dateFormat: ‘yy/mm‘, //返回結果格式化為年月格式
23. // wheels:[], 設置此屬性可以只顯示年月，此處演示，就用下面的onBeforeShow方法,另外也可以用treelist去實現
24. onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }, //彈掉“日”滾輪
25. headerText: function (valueText) { //自定義彈出框頭部格式
26. array = valueText.split(‘/‘);
27. return array[0] + "年" + array[1] + "月";
28. }
29. });
30. })
31. </script>
32. }

效果如下圖：

treelist 示例一：

[csharp] view plaincopyprint?

1. <style>
2. .mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }
3. </style>
5. <ul id="treelist">
6. <li>普通班</li><li>VIP班</li><li>特色班</li><li>至尊班</li><li>女子特訓班</li>
7. </ul>
9. <script>
10. $(function () {
11. $("#treelist").mobiscroll().treelist({
12. theme: "android-ics light",
13. lang: "zh",
14. defaultValue: [Math.floor($(‘#treelist li‘).length/2)],
15. cancelText: null,
16. headerText: function (valueText) { return "選擇班級"; }
17. });
18. })
19. </script>

效果如下圖：

treelist 示例二：

[csharp] view plaincopyprint?

1. <style>
2. .mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }
3. </style>
5. <ul id="treelist">
6. <li>
7. <span>奧迪</span>
8. <ul>
9. <li>奧迪A3</li>
10. <li>奧迪A4L</li>
11. <li>奧迪A6L</li>
12. <li>奧迪Q3</li>
13. <li>奧迪Q5</li>
14. <li>奧迪A4</li>
15. <li>奧迪A6</li>
16. <li>奧迪A1</li>
17. <li>奧迪A3(進口)</li>
18. </ul>
19. </li>
20. <li>
21. <span>寶馬</span>
22. <ul>
23. <li>寶馬X1</li>
24. <li>寶馬i3</li>
25. <li>寶馬1系</li>
26. <li>寶馬3系</li>
27. <li>寶馬5系</li>
28. </ul>
29. </li>
30. <li>
31. <span>奔馳</span>
32. <ul>
33. <li>奔馳A級</li>
34. <li>奔馳C級</li>
35. <li>奔馳E級</li>
36. <li>奔馳S級</li>
37. <li>奔馳GLK級</li>
38. <li>奔馳CLA級</li>
39. <li>奔馳CLS級</li>
40. </ul>
41. </li>
42. </ul>
44. <script>
45. $(function () {
46. var i = Math.floor($(‘#treelist>li‘).length / 2),
47. j = Math.floor($(‘#treelist>li‘).eq(i).find(‘ul li‘).length / 2);
48. $("#treelist").mobiscroll().treelist({
49. theme: "android-ics light",
50. lang: "zh",
51. defaultValue: [i,j],
52. cancelText: null,
53. placeholder: ‘選擇車型‘,
54. headerText: function (valueText) { return "選擇車型"; },
55. formatResult: function (array) { //返回自定義格式結果
56. return $(‘#treelist>li‘).eq(array[0]).children(‘span‘).text() +‘ ‘+ $(‘#treelist>li‘).eq(array[0]).find(‘ul li‘).eq(array[1]).text().trim(‘ ‘);
57. }
58. });
59. })
60. </script>

效果如圖：

移動端日歷控件 mobiscroll 的簡單使用、參數設置