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

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

详情: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. @section scripts{
  13. <script src="~/Scripts/jquery-1.8.2.min.js"></script>
  14. <script src="~/Scripts/mobiscroll-2.13.2.full.min.js"></script>
  15. <script>
  16. $(function () {
  17. $("#date").mobiscroll().date({
  18. theme: "android-ics light",
  19. lang: "zh",
  20. cancelText: null,
  21. dateFormat: 'yy/mm', //返回结果格式化为年月格式
  22. // wheels:[], 设置此属性可以只显示年月,此处演示,就用下面的onBeforeShow方法,另外也可以用treelist去实现
  23. onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }, //弹掉“日”滚轮
  24. headerText: function (valueText) { //自定义弹出框头部格式
  25. array = valueText.split('/');
  26. return array[0] + "年" + array[1] + "月";
  27. }
  28. });
  29. })
  30. </script>
  31. }

效果如下图:

treelist 示例一:

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

效果如下图:

treelist 示例二:

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

效果如图:

jquery mobiscroll 滑动、滚动的更多相关文章

  1. Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

  2. [转载]Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

  3. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  4. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  5. jQuery BreakingNews 间歇滚动

    BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式--淡入淡出( ...

  6. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery.hhLRSlider 左右滚动图片插件

    /**  * jQuery.hhLRSlider 左右滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  8. 20 个非常棒的jQuery内容滑动插件

    Wow Slider  WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...

  9. 基于jQuery左右滑动切换特效

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

随机推荐

  1. Titanic幸存预测分析(Kaggle)

    分享一篇kaggle入门级案例,泰坦尼克号幸存遇难分析. 参考文章: 技术世界,原文链接 http://www.jasongj.com/ml/classification/ 案例分析内容: 通过训练集 ...

  2. 2016-2017-2 20155325实验二《Java面向对象程序设计》实验报告

    实验二 面向对象程序设计-1 答案截图 码云代码链接 链接1 实验遇到的问题和解决过程 问题1:在plugins里搜索不到JUnitGenerator V2.0只能搜到Generste Teats 问 ...

  3. 20145234黄斐《网络对抗技术》PC平台逆向破解

    Shellcode注入 基础知识 Shellcode实际是一段代码,但却作为数据发送给受攻击服务器,将代码存储到对方的堆栈中,并将堆栈的返回地址利用缓冲区溢出,覆盖成为指向 shellcode的地址. ...

  4. centos7.4 防火墙设置

    1.关闭默认的firewall防火墙 systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service ...

  5. nginx基础配置加基础实战演示

    目录 基本配置 设置用户 工作衍生进程数 错误日志存放路径 pid文件存放路径 设置最大连接数 http->server gzip 字符编码 nginx的基本格式 实战配置 虚拟主机配置 开始配 ...

  6. python--自定义模块

    python模块说明:类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才能完成(函数又可以在不 ...

  7. Qt-QML-电子罗盘

    使用QML中的Canvas实现电子罗盘绘制,效果图如下 一个简单的电子罗盘,红色N极.其中中间飞机表示当前的指向, 还是比较简单的,直接上代码吧 /* 作者:张建伟 时间:2018年4月27日 简述: ...

  8. 安装文件报错error while loading shared libraries: libssl.so.6

    http://www.openssl.org/source/  这里下载http://www.openssl.org/source/openssl-1.0.0r.tar.gz 安装命令为:tar -z ...

  9. 英特尔® 实感™ 前置摄像头 SR300 和 F200 的比较

    原文地址 简介 SR300 是支持 Microsoft Windows 10 操作系统的第二代英特尔® 实感™ 前置摄像头. 与 F200 摄像头型号相似,SR300 使用编码光深技术,在更小范围内创 ...

  10. arcgis10.2怎么把地理坐标系转化为投影坐标系(平面,米制坐标) arcmap 10.2 从 WGS_1984 转 Beijing_1954

    方法一:在Arcmap中转换:从 WGS_1984 转 Beijing_19541.加载要转换的数据,右下角为经纬度2.点击视图——数据框属性——坐标系统3.导入或选择正确的坐标系(如选:Beijin ...