PhoneGap中文网

 找回密码
 立即注册
查看: 69586|回复: 20
打印 上一主题 下一主题

jQuery Mobile 日期选择插件 mobiscroll-2.6.2 下载 使用说明

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
跳转到指定楼层
楼主
发表于 2013-8-3 11:43:40 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊。
日期插件JQM也提供了内置的,但样式方面不好看,只好百度、Google啦,找到了两款 jquery-mobile-dateboxmobiscroll-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还是不错的,我们可以设置一些常用的属性使之符合常规的日期格式。


//初始化日期控件
  1.     var opt = {
  2.         preset: 'date', //日期
  3.         theme: 'jqm', //皮肤样式
  4.         display: 'modal', //显示方式
  5.         mode: 'clickpick', //日期选择模式
  6.         dateFormat: 'yy-mm-dd', // 日期格式
  7.         setText: '确定', //确认按钮名称
  8.         cancelText: '取消',//取消按钮名籍我
  9.         dateOrder: 'yymmdd', //面板中日期排列格式
  10.         dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
  11.         endYear:2020 //结束年份
  12.     };
  13.    
  14.     $('input:jqmData(role="datebox")').mobiscroll(opt);
复制代码
这样就OK啦 看下效果图吧


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

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


本站下载地址:



it营
回复

使用道具 举报

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
沙发
 楼主| 发表于 2013-9-27 16:05:02 | 只看该作者
不错不错,楼主您辛苦了。。。
it营
回复 支持 反对

使用道具 举报

0

主题

59

帖子

61

积分

注册会员

Rank: 2

积分
61
板凳
发表于 2013-10-1 12:11:23 | 只看该作者
不错不错,楼主您辛苦了。。。
回复 支持 反对

使用道具 举报

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
地板
 楼主| 发表于 2013-10-5 14:47:19 | 只看该作者
正在学习中 谢谢楼主了 非常支持 开源
回复 支持 反对

使用道具 举报

23

主题

141

帖子

260

积分

中级会员

Rank: 3Rank: 3

积分
260
5#
发表于 2013-10-7 05:03:44 | 只看该作者
非常感谢楼主。。。
回复 支持 反对

使用道具 举报

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
6#
 楼主| 发表于 2013-10-8 20:16:57 | 只看该作者
写的真的很不错
回复 支持 反对

使用道具 举报

0

主题

15

帖子

50

积分

注册会员

Rank: 2

积分
50
7#
发表于 2013-11-6 22:22:13 | 只看该作者
写的真的很不错
回复 支持 反对

使用道具 举报

0

主题

1

帖子

4

积分

新手上路

Rank: 1

积分
4
8#
发表于 2013-11-7 18:43:15 | 只看该作者
能下载就好了。
回复 支持 反对

使用道具 举报

12

主题

31

帖子

687

积分

高级会员

Rank: 4

积分
687
9#
发表于 2013-12-23 09:25:16 | 只看该作者
不错。辛苦了。我也下载下来试试。发现虽然html5都有这些控件。但在手机上好像都不支持。晕。
回复 支持 反对

使用道具 举报

0

主题

19

帖子

50

积分

注册会员

Rank: 2

积分
50
10#
发表于 2014-1-14 11:50:25 | 只看该作者
好像现在收费了?
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-11-22 10:14 , Processed in 0.099135 second(s), 39 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表