滑动、滚动
来源:互联网 发布:mac修改快捷键设置 编辑:程序博客网 时间:2024/05/01 04:46
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>
效果如图:
1 0
- 滑动、滚动
- jquery mobiscroll 滑动、滚动
- 滑动导航栏+滚动页面
- 滚动条和滑动块
- android 隐藏滑动滚动条
- OnScrollListener滑动(滚动)监听
- ViewPager实现滑动滚动条
- Android 设置TextView滑动滚动条和滑动效果
- overflow 显示一行可以滑动,不显示滑动滚动条
- javascript图片自动左右滑动滚动切换
- view跟水平滚动条一起滑动
- UIScrolView里自己滚动滑动 ,无限制那种
- 关于滑动条滚动 scroll兼容
- ViewPage + Fragment 图片滑动和自动滚动
- SwipeBackLayout 滑动返回与垂直滚动优化
- 手机标题栏左右滑动无滚动条
- js监听滚动条滑动到底部
- 滑动窗口滚动条触发事件
- iOS开发_统计xcode代码行数
- [LeetCode] Recover Binary Search Tree
- 2014年总结
- python 学习笔记(二十)
- JTA-Java Transaction API
- 滑动、滚动
- SharedPreferences(2)
- 我理解中的cocos2dx之Ref
- iOS生成UUID
- A plus B II
- 安卓手机优化,修改build.prop
- [ios]关于MediaPlayer 播放进度的存取
- Recover Binary Search Tree
- String,StringBuffer,StringBuilder之间的区别和联系