jQuery Mobile 移动网站开发之日期控件Mobiscroll 2.5 使用说明

news/2024/5/13 15:38:30/文章来源:https://blog.csdn.net/albert528108/article/details/40682665
电脑显示完全两样  
android 则无法显示  所以pass掉。
2.第三方   datebox
<labelfor="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/
运行效果：
jQuery <wbr>Mobile <wbr>移动网站开发之日期控件Mobiscroll <wbr>2.5 <wbr>使用说明
挺好看、但是不实用
手机电脑显示一样、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）
效果图：
jQuery <wbr>Mobile <wbr>移动网站开发之日期控件Mobiscroll <wbr>2.5 <wbr>使用说明

使用介绍：
第一步：去官网http://download.mobiscroll.com/prod#/jqm/datetime/animation/jqmwidget下载样式和JS
jQuery <wbr>Mobile <wbr>移动网站开发之日期控件Mobiscroll <wbr>2.5 <wbr>使用说明

第二部：
在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>

控件代码：
<divdata-role="frmMain_txt_SB_SERVERTIME">
<labelfor="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();
此时的效果：
jQuery <wbr>Mobile <wbr>移动网站开发之日期控件Mobiscroll <wbr>2.5 <wbr>使用说明

效果不错、在手机上也不会卡、 但界面是英文的、对于国人来说多少有点不爽、而官网又没有提供中文语言包、但没有关系、官网的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);
最终效果就是
jQuery <wbr>Mobile <wbr>移动网站开发之日期控件Mobiscroll <wbr>2.5 <wbr>使用说明


官网的DOCS 写的很详细、文档API 地址：http://docs.mobiscroll.com/

附完整JS代码 
<script type="text/javascript"language="javascript">
      //给隐藏控件赋值获取时间控件的内容
      function BindDate() {
          var byDate= $('#frmMain_txt_SB_SERVERTIME').val();
          //varpreDate = $('#txtSB_PRETIME').val();
          $('#hfbyDate').val(byDate);
          //$('#hfpreDate').val(preDate);
          returntrue;
      }
      //初始化日期控件设置样式
      $(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>

顺便说下Jqm的屏蔽Ajax功能

<link rel="stylesheet"href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"/>
<scriptsrc="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<scripttype="text/javascript">
$(document).bind("mobileinit", function () {
          //覆盖的代码
          $.mobile.ajaxEnabled = false;
          $.mobile.hashListeningEnabled = false;
          //$.mobile.linkBindingEnabled = false;
      });
</script>
<scriptsrc="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_872377.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

国内比较购物网站推荐

国内比较购物网站推荐

比较购物网站在国外很多&#xff0c;在欧美比较流行的有Bizrate、 Shopping、 Pricegrabber、 Kelkoo、 Nextag、 Yahoo Shopping等 等&#xff0c;通过这些网站你可以比较主流的B2C&#xff0c;C2C网站上面产品的价格从而寻找最合适的购物网站&#xff0c;随着这些购物比较网站…
阅读更多...
测试网站各项性能的31 个免费在线工具

测试网站各项性能的31 个免费在线工具

你是否肯定你的网站完全兼容各大浏览器&#xff1f;是否知道多少秒可以打开你的网站&#xff1f; 是否可以自信地说你的网站根本就没有打不开的时候&#xff1f; 是否…… 虽然它看似不重要&#xff0c;但这些在一定程度上也对你的网站的访问量产生了影响 。这里列出了一份31 个…
阅读更多...
两个桌面美化的网站

两个桌面美化的网站

http://www.stardock.com/ 产品大多要收费&#xff0c;可是也有免费版。里面的东西都是精品。 特别推荐 fence 和 object dock windowsFx也很华丽&#xff0c;但似乎只有试用30天 还有一个开源的程序Launchy http://www.launchy.net/ 提供一个搜索栏可以进行快捷访问&am…
阅读更多...
资产泄漏（网站）

资产泄漏（网站）

知识点&#xff1a; 1、 CMS指纹识别源码获取方式 2、 习惯&配置&特性等获取方式 3、托管资产平台资源搜索监控 详细点&#xff1a; 参考&#xff1a;https://www.secpulse.com/archives/124398.html 源码泄漏原因&#xff1a; 1、从源码本身的特性入口 2、从管理员…
阅读更多...
041_CSS及案例-网站主页模板

041_CSS及案例-网站主页模板

文章目录 1. CSS介绍2. 基本语法2.1 CSS 页面的引入方法——内联式2.2 CSS 页面的引入方法——嵌入式2.3 CSS 页面的引入方法——外联式 3. 常用样式4. 基本选择器4.1 标签选择器4.2 id 选择器4.3 类选择器4.4 层级选择器4.5 组选择器4.6 伪类及伪元素选择器 5. 盒子模型6. CSS…
阅读更多...
使用python-requests爬虫模拟登陆中国海洋大学教务处网站

使用python-requests爬虫模拟登陆中国海洋大学教务处网站

python的第三方库Requests是一个简单而且实用的网络爬虫库&#xff0c;今天&#xff0c;我将为大家演示如何通过requests爬虫实现模拟登录中国海洋大学教务处网站。 程序流程&#xff1a; 1、引入需要的外部库。 import requests import base64 import re import time impor…
阅读更多...
无意中发现其它网站使用我的文章

无意中发现其它网站使用我的文章

今天上网时&#xff0c;无意中发现了一篇文章&#xff0c;很熟悉呀&#xff0c;再仔细看了下&#xff0c;发现这内容是我自己写的。不过我没有在该网站上发表过文章呀。看来是我的文章“被使用”了。 下面是我使用百度搜索“Linux Mint(系统更新&#xff09; ”这个关键字时的…
阅读更多...
HTML基础——网站信息显示页面

HTML基础——网站信息显示页面

1、语法和规范 HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。 HTML文件分为头部分(<head></head>)和体部分(<body></body>) HTML标签都是由开始标签和结束标签组成。(<hr />) HTML标签不区分大小写&#xff0c;建议使用小写。 2、HTM…
阅读更多...
HTML基础——网站图片显示页面

HTML基础——网站图片显示页面

1、图片标签 <img /> 属性&#xff1a; 　　　　src:指的是图片显示的路径(位置) 　　　　　　绝对路径&#xff1a;D:\Pictures\Saved Pictures 　　　　　　相对路径&#xff1a; 　　　　　　　　　　①同一级&#xff1a;直接写文件名称或者./文件名称 　　　　　　　…
阅读更多...
HTML基础——网站友情链接显示页面

HTML基础——网站友情链接显示页面

1、列表标签　　有序列表&#xff1a;type默认是1,2,3……&#xff0c;reserved指降序排列 　　　　　<ol type"I" start"" reversed"reversed"> 　　　　　　　<li></li> 　　　　　</ol> 　　无序列表&#xff1a;typ…
阅读更多...
HTML基础——网站首页显示页面

HTML基础——网站首页显示页面

1、表格标签&#xff1a; border设置边框&#xff0c;align设置位置(居中等)&#xff0c;bgcolor设置背景颜色&#xff0c;cellspacing设置边框之间的空隙&#xff0c;cellpadding设置边框与里面内容的间距。 table表&#xff0c;tr行&#xff0c;td单元格 <table border&qu…
阅读更多...
HTML基础——网站后台显示页面

HTML基础——网站后台显示页面

1、框架集标签&#xff1a;&#xff08;作用&#xff1a;将页面进行区域的划分) 　　<frameset rows"" cols""> 　　　　<frame src""/> 　　　　<frame name""/> 　　</frameset> 属性&#xff1a; 　　　　…
阅读更多...
HTMLCSS——网站注册页面

HTMLCSS——网站注册页面

1、表单标签 所有需要提交到服务器端的表单项必须使用<form></form>括起来&#xff01; form 标签属性&#xff1a; action,整个表单提交的位置(可以是一个页面&#xff0c;也可以是一个后台 java 代码) method,表单提交的方式(get/post/delete……等 7 种) Ge…
阅读更多...
HTMLCSS——使用DIV和CSS完成网站首页重构

HTMLCSS——使用DIV和CSS完成网站首页重构

1、DIV 相关的技术 　　Div 它是一个 html 标签&#xff0c;一个块级元素(单独显示一行)。它单独使用没有任何意义&#xff0c;必须结合CSS来使用。它主要用于页面的布局。 Span 它是一个 html 标签&#xff0c;一个内联元素(显示一行)。它单独使用没有任何意义&#xff0c;必须…
阅读更多...
自己动手搭建一个简单的网站

自己动手搭建一个简单的网站

我准备搭建一个属于自己的网站&#xff0c;一方面是了解建站的知识&#xff0c;另一个方面是为了测试Http请求相关的内容。 建站资料 下面是建站需要的资料: 服务器&#xff1a;也就是高级一点的电脑&#xff0c;它主要用来存放网页数据&#xff1b;web服务器&#xff1a;就…
阅读更多...
Linux中关于HTTP协议网站的搭建和https网站简单的文件编辑

Linux中关于HTTP协议网站的搭建和https网站简单的文件编辑

[rootlocalhost httpd]# vim /etc/httpd/conf.d/vhosts.conf 在这个文件中进行编辑 <Directory /www> AllowOverride none Require all granted 这个表示访问这个网站&#xff0c;不允许被覆盖&#xff0c;任何人可以访问 <Directory /usr/local/student> AuthTy…
阅读更多...
Tomcat之web应用的部署和网站目录的映射

Tomcat之web应用的部署和网站目录的映射

&#xfeff;&#xfeff; //注&#xff1a;$CATALINA_BASE表示Tomcat安装的目录&#xff0c;后面你会看到 //前半部分为分析&#xff0c;后半部分为实战 //CATALINA -->一个好听的名字:卡特琳娜 什么是web应用的部署和网站目录的映射?说白了就是如何让用户访问到我们开发…
阅读更多...
xml+xslt+css+php 快速构建可扩展网站

xml+xslt+css+php 快速构建可扩展网站

作者:庞帆 shineyearmsn.com shinepfgmail.com 版权:新浪网技术中国有限公司 参考:http://www.beigechina.com 1.让数据与显示分离 test.xml 数据: <xml> <title>test title</title> <content>test content</content> <top>banner</top…
阅读更多...
小公司如何部署实施Linux集群网站

小公司如何部署实施Linux集群网站

其实在许多小公司和小企业里&#xff0c;尤其是牵涉到电子商务和电子广告类的网站&#xff0c;他们的网站也要求作负载均衡高可用的Linux集群&#xff0c;但由于成本的制约&#xff0c;老板都会要求系统架构师设计的方案能够用最少的钱实现这个要求&#xff0c;作为系统架构师的…
阅读更多...
双色球旋转矩阵网站

双色球旋转矩阵网站

网站地址&#xff1a;http://115.29.47.28:8080/si 用户名&#xff1a;super 密码&#xff1a;abc123 网站是拿dwz做的&#xff0c;好久没搞前段了&#xff0c;做起来还是有点费劲。 有问题和意见建议大家可以来给我留言。 网站截图如下&#xff1a; 有旋转矩阵方面经验的可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业