`
流浪鱼
  • 浏览: 1684689 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQM 日期插件 mobiscroll

 
阅读更多

http://www.mobiscroll.com/

 

http://code.google.com/p/mobiscroll/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gbk">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>Mobiscroll</title>
    <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.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <!--Includes-->
	<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
	<script src="js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
  $(function(){
	var opt = {
        preset: 'date', //日期
        theme: 'sense-ui', //皮肤样式
        display: 'modal', //显示方式 
        mode: 'scroller', //日期选择模式
        dateFormat: 'yy-mm-dd', // 日期格式
        setText: '确定', //确认按钮名称
        cancelText: '取消',//取消按钮名籍我
        dateOrder: 'yymmdd', //面板中日期排列格式
        dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
        endYear:2020 //结束年份
    };
    $("#scroller").mobiscroll(opt).date(opt);
	//之前给群里共享发错了。记得之前写过一个,估计丢了。现在重写一个。并完善一下,下面注释部分是上面的参数可以替换改变它的样式
	//希望一起研究插件的朋友加我个人QQ也可以,本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。
	// 直接写参数方法
	//$("#scroller").mobiscroll(opt).date(); 
	// Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
	//具体参数定义如下
    //{
    //preset: 'date', //日期类型--datatime,
    //theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】
								//【wp light】【wp】
    //mode: "scroller",//操作方式【scroller】【clickpick】【mixed】
    //display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】
    //dateFormat: 'yyyy-mm-dd', // 日期格式
    //setText: '确定', //确认按钮名称
    //cancelText: '清空',//取消按钮名籍我
    //dateOrder: 'yymmdd', //面板中日期排列格
    //dayText: '日', 
    //monthText: '月',
    //yearText: '年', //面板中年月日文字
    //startYear: (new Date()).getFullYear(), //开始年份
    //endYear: (new Date()).getFullYear() + 9, //结束年份
    //showNow: true,
    //nowText: "明天",  //
    //showOnFocus: false,
    //height: 45,
    //width: 90,
    //rows: 3}
});
    </script>
</head>

<body>
<input id="scroller" name="scroller" />   

亲们,觉得日期界面不漂亮,看代码。我都写上每个参数的具体注释了。再看不懂,我也没办法了。
</body>
</html>

 

 

 

分享到:
评论
1 楼 IT小丑 2015-06-11  
太棒了,谢谢。。。mobiscroll-2.5.2可用

相关推荐

    滚动日期插件Mobiscroll2.14.4,jqm_databox1.4.5,使用样例

    总之,Mobiscroll是一款针对移动设备优化的日期和时间选择插件,它提供了高效、美观的解决方案,配合jqm_databox1.4.5等组件,能够帮助开发者构建出功能丰富的移动应用。对于那些寻求提升用户体验和性能优化的开发者...

    jQuery Mobile开发中日期插件Mobiscroll使用说明

    Mobiscroll插件与jQuery Mobile的集成并不复杂。首先,开发者需要访问Mobiscroll的官方网站下载所需的压缩包。下载过程中需要注册一个账户,然后选择合适的框架和皮肤样式进行下载。下载完成后,开发者需要创建一个...

    手机时间选择插件mobiscroll-2.6.2最好用的版本

    //theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】 //【wp light】【wp】 //mode: "scroller",//操作方式【scroller】【clickpick】...

    zepto+iscroll实现的仿JQM日期滑动插件

    按照zepto插件的形式编写的用于移动端的日期选择插件,参照了JQM提供的日期控件的样式。使用iscroll插件来支持滑动。代码结构通俗易懂,方便编写zepto插件的初学者学习参考。在这里分享资源也只是抛砖引玉,希望能帮...

    jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo

    本篇文章将详细探讨`jqm文件上传`、`jqm的表单操作`、`jqm的ajax使用`以及相关的`文件操作demo`,帮助你掌握如何在jqm环境中实现文件,尤其是图片的上传功能。 1. **jqm文件上传** jQuery Mobile提供了对HTML5表单...

    jqm中文时间控件

    `jqm中文时间控件`是专门为这种情况设计的一个插件,它整合了jQuery Mobile(jqm)框架的功能,并针对中文环境进行了优化。这个插件允许用户以直观、便捷的方式选择时间,提高了移动应用的用户体验。 jQuery Mobile...

    jqm模仿iPhone桌面菜单,jqm实战开发,jqm开发例子Demo

    jqm模仿iPhone桌面菜单,jqm实战开发,jqm开发例子Demo jqm模仿iPhone jqmDemo jqm例子 jqm实战开发 jqm选项卡 使用jqm实现iPhone桌面功能,jQuery Mobile实现选项卡功能

    jqm4gwt-standalone-1.3.5.zip

    《jqm4gwt-standalone-1.3.5.zip》是一个开源项目的压缩包,主要包含jqm4gwt的插件,该插件专为整合jQuery Mobile和GWT(Google Web Toolkit)设计,目的是为了让开发人员在GWT应用中能够方便地使用jQuery Mobile的...

    jqm开发的音乐播放器

    综上所述,"jqm开发的音乐播放器"项目不仅展示了 jqMobi 在移动前端开发中的实用性,也体现了其在构建交互式音乐播放应用方面的潜力。开发者可以通过这个实例学习如何结合 jqMobi 的特性和 HTML5 的音频 API 来创建...

    jquery mobile分页显示插件

    3. **分页插件的安装**:通常,你可以通过下载 jqm-pagination-master 压缩包,解压后将相应的 CSS 和 JavaScript 文件引入到项目中,然后按照文档说明进行配置。 4. **使用方法**:创建分页组件通常涉及设置数据...

    JQM1.4.5-DEMOS:JQM 移动演示 1.4.5

    5. **表单支持**:提供了对各种表单元素的增强,如日期选择器、滑块输入、多选框等,使得在移动设备上填写表单更加便捷。 6. **增强的数据链接**:通过`data-url`属性实现页面的无刷新加载,提供平滑的用户界面过渡...

    jqm-demo.rar

    http://blog.csdn.net/chelen_jak/article/details/19397569 源码

    Jquery 漂亮的分页插件

    **jQuery 漂亮分页插件详解** 在网页开发中,当数据量过大时,分页功能就显得尤为重要,它能帮助用户更好地浏览和管理大量信息。jQuery 是一款广泛使用的 JavaScript 库,提供了丰富的插件来实现各种功能,其中包括...

    jquery mobile的所有版本库api文档简单示例demo下载jqm学习大全

    jquery mobile的所有版本库api文档简单示例demo下载jqm学习大全下载后评论反积分! jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整...

    jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解

    jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解

    24时区APK+源码, android+JQM

    标题 "24时区APK+源码, android+JQM" 提供了一个关于Android应用程序开发的项目,其中结合了Java和jQuery Mobile(JQM)技术。这个项目旨在帮助初学者理解如何在Android平台上利用HTML来构建用户界面,并且通过JQM...

    JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片.pdf

    JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片.pdf

    JQM实战源码

    **jQuery Mobile 深度解析** jQuery Mobile 是一个专为移动设备设计的前端框架,它提供了易用的组件和交互模式,使得开发者可以快速构建响应式、触屏友好的网页应用。本篇将深入探讨jQuery Mobile的核心概念和实战...

Global site tag (gtag.js) - Google Analytics