问jquery mobile冲突: jquery mobile css和jquery mobile datepicker冲突？
EN

Stack Overflow用户

提问于 2014-02-05 19:00:10

回答 1查看 976关注 0票数 0

朋友们，我是移动应用程序开发的新手，我正在为phonegap android开发应用程序。当我使用jquery mobile做css和设计时。使用上面的urls。

    <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css"/>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.mobile-1.3.2.min.js"></script>
And now the problem is when i tried to set as datetime picker in my project using jquery mobile. using above urls  
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />       
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>        
    <script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
    <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.calbox.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/latest/jqm-datebox.mode.flipbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>  

</head>
<body>
<h1>Welcome to Andriod  PhoneGap</h1>
<div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <label for="mydate">Some Date</label>
            <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}'/>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div> 
<p>J-Technologies &copy; 2013 All Rights Reseverd | Design by <a href="http://www.jtechindia.com" target="_blank">J-Technologies</a></p>
</body>
</html>

当我添加这段代码时，整个jquery移动css会发生冲突，但我需要在项目中设置日期时间选择器，但它会发生冲突，日期时间选择器无法工作。当我移除我的jquery移动css时，它可以工作，但我需要两者。帮助我如何解决这个冲突这里是我的完整源代码

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<meta name="keywords" content="Delicious Iphone web template, Andriod web template, Smartphone web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<link href="css/style.css" rel="stylesheet" type="text/css"  media="all" />
<link href="css/slider.css" rel="stylesheet" type="text/css"  media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/camera.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />       
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>        
    <script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
    <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.calbox.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/latest/jqm-datebox.mode.flipbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>  

</head>
<body>
<h1>Welcome to Andriod  PhoneGap</h1>
<div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <label for="mydate">Some Date</label>
            <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}'/>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div> 
<p>J-Technologies &copy; 2013 All Rights Reseverd | Design by <a href="http://www.jtechindia.com" target="_blank">J-Technologies</a></p>
</body>
</html>

jquery

jquery-mobile

cordova

回答 1

Stack Overflow用户

发布于 2014-02-05 19:19:42

您已经使用了2个CSS文件

<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css"/>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

使用1.3.2分钟css，因为您引用的是1.3.2 jqm js

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21575320

复制

相似问题

问jquery mobile冲突: jquery mobile css和jquery mobile datepicker冲突？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery mobile冲突: jquery mobile css和jquery mobile datepicker冲突？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery mobile冲突: jquery mobile css和jquery mobile datepicker冲突？
EN