提问者:小点点

Jquery UI datepicker破坏样式和图标


我面临的问题是稳定样式在我的html页面。每当我使用datepicker(jqmobile UI datepicker)时,外观和感觉都会受到严重影响。页眉上的图标、关闭对话框的图标、下拉列表中的类型图标都将消失。

这是我的标题部分,

 <head>
    <meta charset="UTF-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
    <link href="styles/main.css" rel="stylesheet" />
    <link rel="stylesheet" href="jquery-mobile/styles/jqm-icon-pack-fa.css" >
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

    <link type="text/css" href="styles/datepicker.css" rel="stylesheet" /> 
    <link type="text/css" href="jquery-mobile/styles/jquery.mobile.simpledialog.css" rel="stylesheet" /> 
    <script src="cordova.js" type="text/javascript"></script>
    <script src="jquery-mobile/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-mobile/js/jquery.mobile.simpledialog2.js"></script>
    <script src="scripts/Common.js"></script>
    <script src="scripts/FlightServices.js"></script>
</head>

如果我注释掉这行:

link rel=“stylesheet”href=“//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css

则图标会正确显示,但datepicker样式会被破坏。

如果我把这句话:

script src=“scripts/datepicker.js”而不是:script src=“scripts/jquery-ui.js”

Datepicker已完全禁用。

我在上面提到的部分有什么错误吗?有没有包含错误的文件?

任何人有任何建议,我将不胜感激。

谢谢santu ghosh


共1个答案

匿名用户

样式表的顺序很重要。

更改样式表的顺序,而不是保留其中一个或另一个。通常,应该首先添加themes样式表模板,然后添加您自己的样式表(main.css),它将您自己的修改添加到基模板中。编辑main.css以叠加主要冲突。

我还建议将移动样式表有条件地放置在移动平台上,除非这个页面严格适用于移动平台。

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link rel="stylesheet" href="jquery-mobile/styles/jqm-icon-pack-fa.css" >
<link href="styles/main.css" rel="stylesheet" />