`
H小阿飞
  • 浏览: 274372 次
  • 性别: Icon_minigender_1
  • 来自: 南通
社区版块
存档分类
最新评论

解决关于jquery mobile databox日期插件手机上失效的问题

 
阅读更多

不废话,直接上代码

<html>
<head>
	<title>密码修改</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="../css/jquery.mobile-1.0.1.min.css">  
	<script src="../js/jquery-1.7.1.min.js"></script>
    <script src="../js/jquery.mobile-1.0.1.min.js"></script>   	
    
    <link rel="stylesheet" href="../css/jquery.mobile.datebox.min.css">
    <script src="../js/jquery.mobile.datebox.min.js"></script> 
</head>
<body>
    <div data-role="page">   
       <div data-role="content" class="content">
        <label for="mydate">生日:</label>
        <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox"}'>	        	
       </div>
    </div>
</body>
</html>

    如上页面,我是把它放在一个web工程里面的,用tomcat启起来,我在pc机上的chrome浏览器访问,是没有问题的,日期控件一切正常,然后我用android手机连上公司的无线,这样我的手机和我工作的电脑就是在一个局域网内了,接着我就用手机上自带的浏览器访问访问我电脑上的这个web工程,日期控件在手机上也是正常的。可是当我把此页面移动到一个phonegap项目里面,用webview加载访问显示此网页,然后把此项目打成apk,放到手机上,安装此程序,运行安装好的程序,日期控件效果就没有了,就失效了。后来改了一下databox.min.js和databox.min.css引入的地方,就ok了,不放在head里面,而是放在page里面。


<!DOCTYPE HTML>
<html>
<head>
	<title>密码修改</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="../css/jquery.mobile-1.0.1.min.css">  
	<script src="../js/jquery-1.7.1.min.js"></script>
    <script src="../js/jquery.mobile-1.0.1.min.js"></script>   	
    
</head>
<body>
    <div data-role="page">   
    <link rel="stylesheet" href="../css/jquery.mobile.datebox.min.css">
    <script src="../js/jquery.mobile.datebox.min.js"></script> 
    
       <div data-role="content" class="content">
        <label for="mydate">生日:</label>
        <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox"}'>	        	
       </div>
    </div>
</body>
</html>

 

对此问题,我个人觉得是由于jquerymobile页面链接加载的时候,采用了ajax异步加载,整个页面不重新刷新,所以我把它写在head里面,并没有引用进来,而需要写在page里面。

1
0
分享到:
评论
1 楼 xincanfly 2014-05-07  
真心帮了大忙了,十分感谢……    

相关推荐

Global site tag (gtag.js) - Google Analytics