jQuery Mobile 移动网站开发之日期控件Mobiscroll 2.5 使用说明
来源:互联网 发布:乌鲁木齐软件培训 编辑:程序博客网 时间:2024/06/01 09:02
在用jQuery Mobile 做手机网站、需要用日期控件
挺好看、但是不实用
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);
//给隐藏控件赋值获取时间控件的内容 function BindDate() { var byDate = $('#frmMain_txt_SB_SERVERTIME').val(); //var preDate = $('#txtSB_PRETIME').val(); $('#hfbyDate').val(byDate); //$('#hfpreDate').val(preDate); return true; } //初始化日期控件设置样式 $(document).ready(function () { $('input:jqmData(role="datebox")').mobiscroll().date(); //初始化日期控件 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); }); </script>
//覆盖的代码 $.mobile.ajaxEnabled = false; $.mobile.hashListeningEnabled = false; //$.mobile.linkBindingEnabled = false; });
找了3个
分别展示下:
1.可以说是html5自己的
<label for="date-1">
购买时间*
</label>
<input type="date" data-clear-btn="false" name="date-1" id="frmMain_txt_SB_SERVERTIME" value="" >
重点就是 input type="date"这个属性
效果图:
效果和性能综合比较是属于经济实惠的
Iphone 显示和电脑显示完全两样 android 则无法显示 所以pass掉。
2.第三方 datebox
<label for="mydate">购买时间*</label>
<input name="mydate" id="frmMain_txt_SB_SERVERTIME" type="date" data-role="datebox"
data-options='{"mode": "datebox"}'>
主页:http://dev.jtsage.com/jQM-DateBox/
运行效果:
挺好看、但是不实用
手机电脑显示一样、android和iphone 都支持、可是有点卡 也没有中文文档 调整起来不方便 pass
并且需要在JQM的基础上添加JS链接:
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
3.找到了Mobiscroll、在博客园一位大神的文章里学的(http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html)
效果图:
使用介绍:
第一步:去官网http://download.mobiscroll.com/prod#/jqm/datetime/animation/jqmwidget下载样式和JS
第二部:
在Asp界面、需要引入除Jqm的3个文件和下载到的CSS和JS
<link href="mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<script src="mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script>
控件代码:
<div data-role="frmMain_txt_SB_SERVERTIME">
<label for="frmMain_txt_SB_SERVERTIME">购买时间*</label>
<input type="text" data-role="datebox" id="frmMain_txt_SB_SERVERTIME" name="frmMain_txt_SB_SERVERTIME"/>
</div>
这样还没完、还要初始化日期控件:
$('input:jqmData(role="datebox")').mobiscroll().date();
此时的效果:
效果不错、在手机上也不会卡、但界面是英文的、对于国人来说多少有点不爽、而官网又没有提供中文语言包、但没有关系、官网的API还是不错的、我们可以设置一些常用的属性使之符合常规的日期格式。
//初始化日期控件
最终效果就是
官网的DOCS 写的很详细、文档API 地址:http://docs.mobiscroll.com/
附完整JS代码
<script type="text/javascript" language="javascript">
顺便说下Jqm的屏蔽Ajax功能
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
0 0
- jQuery Mobile 移动网站开发之日期控件Mobiscroll 2.5 使用说明
- jQuery Mobile 移动网站开发之日期控件Mobiscroll 2.5 使用说明
- jQuery Mobile 移动网站开发之日期控件Mobiscroll 2.5 使用说明
- jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明
- jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明
- jquery mobile mobiscroll 日期插件使 用mobiscroll
- jQuery Mobile移动网站开发
- Mobiscroll — 配合jQuery Mobile 的日期选择控件附DEMO
- mobiscroll 日期控件
- 我也移动开发之jQuery Mobile
- jQuery Mobile移动开发
- 使用jQuery Mobile移动开发框架将博客网站快速转化为Mobile网站
- 使用jQuery Mobile移动开发框架将博客网站快速转化为Mobile网站
- Html5 + jquery mobile + mobiscroll ,REST手机客户端
- 使用jQuery Mobile 快速开发mobile 网站
- 移动新闻网站,掌上移动新闻,移动新闻客户端,jQuery Mobile移动新闻网站,移动新闻网站demo,新闻阅读器开发
- jquery.mobiscroll 适合移动端使用的滑动选择控件 -- 自定义选项示例
- 移动端jquery-pie-loader动态饼状图以及mobiscroll时间控件(最新版)
- CSS基础之简介
- 打开所有地图列表
- gridview实现单选
- spring + redis 实现数据的缓存
- 关于iis无法连接数据库
- jQuery Mobile 移动网站开发之日期控件Mobiscroll 2.5 使用说明
- 如何让你的传输更安全--基于SSL协议的通信模式
- Spring3 MVC 深入研究
- Android Theme详细
- CSS代码重构与优化之路
- 关于dubbo服务的xml配置文件报错的问题
- HTML知识汇总集合
- cocos2d-lua里float 转 int
- Windbg的常用命令