您的位置：首页 > Web前端 > JQuery

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

2016-12-15 13:53 477 查看

不废话，直接上代码

<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里面。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航