PhoneGap中文网

标题: jQuery Mobile 日期选择插件 mobiscroll-2.6.2 下载使用说明 [打印本页]

作者: admin 时间: 2013-8-3 11:43
标题: jQuery Mobile 日期选择插件 mobiscroll-2.6.2 下载使用说明
近期在移动方面的开发，使用jQuery Mobile ，移动方面的插件不如Web 方面的插件多，选择的更少，有一些需要自己去封装，但功力尚不足啊。
日期插件JQM也提供了内置的，但样式方面不好看，只好百度、Google啦，找到了两款 jquery-mobile-datebox 和 mobiscroll-2.6.2
jqueryMobileDatebox 这个在板上的表现不好，性能方面有点卡

mobiscroll-2.6.2下载

mobiscroll-2.6.2.zip (86.79 KB, 下载次数: 639)

注意使用中文的时候，引入中文的js文件就可以

mobiscroll 性能方面比前者要好一些，效果更简洁，划动更流畅
放在一起对比下

各位看官，你们觉得哪个好看一些呢
反正我觉得 mobiscroll 效果比较好一些，好了来看一些这个家伙的使用方法吧
第一步：到官网去下载个压缩包，下载需要先注册然后才能下载。下载的时候你可以选择你使用的框架及皮肤样式等，看下图

到此假设你已经成功注册并下载啦
第二步、新建一个HTML5文件，引jquery.js,jquerymobile.js 等等必须的文件，编写如下代码到你的文件中：

<div data-role="fieldcontain">
<label for="txtBirthday">出生日期：</label>
<input type="text" data-role="datebox" id="txtBirthday" name="birthday" />
</div>

我们可以这样去初始化日期控件：
$('input:jqmData(role="datebox")').mobiscroll().date();
预览下吧，是不是可以使用了呢！唯独这个界面是英文的，对于国人来说多少有点不爽，而官网又没有提供中文语言包，但没有关系，官网的API还是不错的，我们可以设置一些常用的属性使之符合常规的日期格式。

//初始化日期控件

var opt = {
preset: 'date', //日期
theme: 'jqm', //皮肤样式
display: 'modal', //显示方式
mode: 'clickpick', //日期选择模式
dateFormat: 'yy-mm-dd', // 日期格式
setText: '确定', //确认按钮名称
cancelText: '取消',//取消按钮名籍我
dateOrder: 'yymmdd', //面板中日期排列格式
dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
endYear:2020 //结束年份
};
$('input:jqmData(role="datebox")').mobiscroll(opt);

复制代码

这样就OK啦看下效果图吧

还有不清楚的看官网的文档哦

文档API 地址：http://docs.mobiscroll.com/

本站下载地址：

作者: admin 时间: 2013-9-27 16:05
不错不错，楼主您辛苦了。。。

作者: uqobk8216 时间: 2013-10-1 12:11
不错不错，楼主您辛苦了。。。

作者: admin 时间: 2013-10-5 14:47
正在学习中谢谢楼主了非常支持开源

作者: 你懂得 时间: 2013-10-7 05:03
非常感谢楼主。。。

作者: admin 时间: 2013-10-8 20:16
写的真的很不错

作者: charliewangjm 时间: 2013-11-6 22:22
写的真的很不错

作者: xiongwei 时间: 2013-11-7 18:43
能下载就好了。

作者: xiaoweijun 时间: 2013-12-23 09:25
不错。辛苦了。我也下载下来试试。发现虽然html5都有这些控件。但在手机上好像都不支持。晕。

作者: ymhsky 时间: 2014-1-14 11:50
好像现在收费了？

作者: liuzihui531 时间: 2014-1-14 13:16
怎么是显示404啊

作者: bluewait 时间: 2014-1-17 17:40
为什么不可以下载？

作者: 200ym 时间: 2014-1-20 14:00
不给下载呀

作者: sssmmmyyy 时间: 2014-2-20 13:08
下载不了咋么办

作者: sssmmmyyy 时间: 2014-2-20 13:08

下载不了咋么办

作者: sssmmmyyy 时间: 2014-2-20 13:08

下载不了咋么办？？

作者: lobtao 时间: 2014-8-31 16:03
不错不错，楼主您辛苦了。。。不过收费了

作者: gundumw100 时间: 2014-9-1 10:09
这个官网上要收费的嘛

作者: idMark 时间: 2014-9-7 21:37
很好，收藏！

作者: ILY_132230 时间: 2014-9-15 10:15
学习中，很不错

作者: tj_zx_1986 时间: 2015-1-23 16:32
不错哦不过弹出日期控件时怎么屏蔽手机输入法呢

欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)