jquery mobiscroll 滑动、滚动

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)
  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去做会更好,此处只是演示,就随便啦!

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

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

[csharp] view plaincopyprint?

  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 示例二:

[csharp] view plaincopyprint?

  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>

效果如图:

时间: 2024-10-17 10:37:40

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

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

Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动.滚动插件 : http://www.cnblogs.com/linJie1930906722/p/6072984.htm

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

分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: 1 <div class="bodyCon08"><!--学员--> 2 <div class="students"> 3 4 <div id="four_flash"> 5 <div class="flashB

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

WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑,是很不错的图像滑块设计工具. Nivo Slider Nivo Slider是一款出色的jQuery幻灯片插件,支持多种切换效果,可定制性强. Simple Multi-Item Slider一款基于jQuery插件的多项目滚动条,Simple Multi-Item Slider Category slider with

基于jQuery左右滑动切换特效

分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="bodyCon08"><!--学员--> <div class="students"> <div id="four_flash"> <div class="flashBg&qu

jQuery BreakingNews 间歇滚动

BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式——淡入淡出(fade)和向上滑动(slide). 在线实例 实例演示 使用方法 <div class="BreakingNewsController easing" id="breakingnews1">      <div class="bn-titl

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

在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQuery Slider 中挑选出适合自己的插件也是需要一些时间的.因此这篇文章给大家挑选了10款优秀的 jQuery Slider 插件,希望能帮助到你. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 精选12款优秀 jQuery Ajax 分页插件和教程 10大流行的 M

jQuery 随滚动条滚动效果 (适用于内容页长文章)

直接入题! 当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的. 好吧,昨天写了这个东西,jQuery滚动随动区块,代码如下: //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollOut = $('.cookie-list'); //隐藏rollStart之后的区块 rollStart.before('<div class="da_rollbox">

jquery制作滑动面板

[web开发]☆★之jquery制作滑动面板 项目开发中,我们有时候需要点击某个按钮出现一个面板,在面板上有我们需要的一些操作,或者是图片.ok!如下简单制作滑动面板效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

jQuery 随滚动条滚动效果 (固定版)

//侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollSet = $('.search,.weibo,.group,.feed-mail,.tags'); //添加rollStart之前的随动区块 rollStart.before('<div class="da_rollbox" style="position:fixed;background-color:#fff;width:inherit;"