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控件
- @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 mobiscroll 滑动、滚动的更多相关文章
- Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...
- [转载]Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- 精心挑选10款优秀的 jQuery 图片左右滚动插件
在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...
- jQuery BreakingNews 间歇滚动
BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式--淡入淡出( ...
- jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery.hhLRSlider 左右滚动图片插件
/** * jQuery.hhLRSlider 左右滚动图片插件 * User: huanhuan * QQ: 651471385 * Email: th.wanghuan@gmail.com ...
- 20 个非常棒的jQuery内容滑动插件
Wow Slider WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...
- 基于jQuery左右滑动切换特效
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
随机推荐
- Titanic幸存预测分析(Kaggle)
分享一篇kaggle入门级案例,泰坦尼克号幸存遇难分析. 参考文章: 技术世界,原文链接 http://www.jasongj.com/ml/classification/ 案例分析内容: 通过训练集 ...
- 2016-2017-2 20155325实验二《Java面向对象程序设计》实验报告
实验二 面向对象程序设计-1 答案截图 码云代码链接 链接1 实验遇到的问题和解决过程 问题1:在plugins里搜索不到JUnitGenerator V2.0只能搜到Generste Teats 问 ...
- 20145234黄斐《网络对抗技术》PC平台逆向破解
Shellcode注入 基础知识 Shellcode实际是一段代码,但却作为数据发送给受攻击服务器,将代码存储到对方的堆栈中,并将堆栈的返回地址利用缓冲区溢出,覆盖成为指向 shellcode的地址. ...
- centos7.4 防火墙设置
1.关闭默认的firewall防火墙 systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service ...
- nginx基础配置加基础实战演示
目录 基本配置 设置用户 工作衍生进程数 错误日志存放路径 pid文件存放路径 设置最大连接数 http->server gzip 字符编码 nginx的基本格式 实战配置 虚拟主机配置 开始配 ...
- python--自定义模块
python模块说明:类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才能完成(函数又可以在不 ...
- Qt-QML-电子罗盘
使用QML中的Canvas实现电子罗盘绘制,效果图如下 一个简单的电子罗盘,红色N极.其中中间飞机表示当前的指向, 还是比较简单的,直接上代码吧 /* 作者:张建伟 时间:2018年4月27日 简述: ...
- 安装文件报错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 ...
- 英特尔® 实感™ 前置摄像头 SR300 和 F200 的比较
原文地址 简介 SR300 是支持 Microsoft Windows 10 操作系统的第二代英特尔® 实感™ 前置摄像头. 与 F200 摄像头型号相似,SR300 使用编码光深技术,在更小范围内创 ...
- arcgis10.2怎么把地理坐标系转化为投影坐标系(平面,米制坐标) arcmap 10.2 从 WGS_1984 转 Beijing_1954
方法一:在Arcmap中转换:从 WGS_1984 转 Beijing_19541.加载要转换的数据,右下角为经纬度2.点击视图——数据框属性——坐标系统3.导入或选择正确的坐标系(如选:Beijin ...