我面临的问题是稳定样式在我的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
样式表的顺序很重要。
更改样式表的顺序,而不是保留其中一个或另一个。通常,应该首先添加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" />