开发者社区> cometwo123> 正文

手机日期插件jquery mobiscroll 实例

简介:
+关注继续查看

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

 

  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)  
  7.   
  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)  
  12.   
  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)  
  18.   
  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. }  
  42.        


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

 

 

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

 

自定义年月(去掉年月日的"日"滚轮布局):

 

  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>  
  12.   
  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 示例一:

 

  1. <style>  
  2. .mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }  
  3. </style>  
  4.   
  5. <ul id="treelist">  
  6.     <li>普通班</li><li>VIP班</li><li>特色班</li><li>至尊班</li><li>女子特训班</li>  
  7. </ul>  
  8.   
  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 示例二:

 

  1. <style>  
  2. .mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }  
  3. </style>  
  4.   
  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>  
  43.   
  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>  


效果如图:

 

分类: JQuery

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java常用类库--实例操作--取得当前日期
<p><span style="white-space:pre"></span>在开发中经常需要取得日期,而且每次取得日期的时候代码都会重复,所以既然是重复的代码就可以将其定义成一个类,以方便重复调用,但是在操作的时候有一点土鳖需要注意:如果月份是1月,则应该显示01,但是如果是01的话,则数字肯定会忽略掉0。</p> <p><img src="http://img.blog.csdn.
1110 0
ArcGIS API for Javascript 3.21地图开发实例(一、图形绘制和删除及popup弹出层)
前言 Arcgis是一个地理系统的平台,可用来进行数据数据展示或二次开发。这里我们所使用的是Arcgis对于JavaScript的api,也就是web端的api进行开发。
9703 0
jQuery EasyUI API 中文文档 - 日期时间框(DateTimeBox)
DateTimeBox  日期时间框 扩展自 $.fn.datebox.defaults。用 $.fn.datetimebox.defaults 重写了 defaults。     依赖 datebox timespinner 用法 1.
998 0
5月2日云栖精选夜读:DT科技评论第35期:可以解锁任何手机的万能指纹
迈克菲如何做云安全?谷歌开辟机器学习新方法:“联合学习”、AlphaGo将与柯洁进行围棋大战、谷歌神经网络可将语音直接翻译成文字...本周科技新鲜资讯,尽在DT科技评论!
4075 0
Asp.net MVC 2.0 + Unity 2.0(IoC) + EF4.0 实例:RoRoWoBlog 开源项目框架代码
本开源项目当前使用框架如下: 前台表现:Asp.net MVC 2 数据持久层:ADO.Net Entity Framework 4.0 依赖注入容器:Unity 2.0 开发工具:VS2010   开源项目地址:http://rorowo.
1026 0
ADB的安装和使用教程,小米手机连接adb实例演示
ADB的安装和使用教程,小米手机连接adb实例演示
182 0
+关注
1029
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载