我刚刚创建了this theme与 jquery mobile theme rooler ，并将其包含在我的页面中，如下所示:
<!DOCTYPE html>
<html>
<head>
<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="themename.min.css" />
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div class="container" data-role="page" data-theme="a">
<div class="title" data-role="header">Title</div>
<div class="box" data-role="content">
Content
</div> <div class="footer" data-role="footer">
Some other content
</div>
</div>
</body>
</html>
但是显示的是默认主题:
Chrome 控制台未报告任何错误。
可能是什么问题？
最佳答案
将您的主题(我认为是 themename.min.css)移动到 jquery.mobile-1.4.5.min.css 下面。主题在 CSS 中的工作方式通常是通过覆盖选择器，例如类名。如果两个样式表将样式应用于同一选择器，则使用最后定义的实例。目前，您正在定义主题并使用主 jQuery 主题覆盖它。颠倒顺序，您的问题应该得到解决。以下是最佳加载场景。
<!DOCTYPE html>
<html>
<head>
<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="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="themename.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
对于 CSS:
- 加载默认的 jQuery Mobile 主题
- 加载 jQuery Mobile 图标覆盖
- 加载您的自定义主题`thememain.min.css`
此外，将 JavaScript 移至 CSS 文件下方是明智的做法。 CSS 文件是并行下载的，而 JavaScript 文件通常一次下载并解析一个。
关于javascript - 未检测到 Jquery 移动主题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28327182/