Jquery 未检测到移动主题

Question

我刚刚创建了 this theme with the 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 控制台未报告任何错误。
可能是什么问题？

Answer 1

将您的主题移动到 jquery.mobile-1.4.5.min.css 下面，我推测是 themename.min.css。 CSS 中主题的工作方式通常是覆盖选择器，例如 class 名称。如果两个样式表将样式应用到同一个选择器，最后定义的实例就是被使用的那个。目前，您正在定义主题并用 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 手机主题
加载 jQuery 移动图标覆盖
加载您的自定义主题`thememain.min.css`

此外，将 JavaScript 移动到 CSS 文件下方是明智的。 CSS 文件并行下载，而 JavaScript 文件通常一次下载和解析一个文件。

Jquery 未检测到移动主题

Jquery mobile theme not detected

html

javascript

mobile

jquery

jquery-mobile