我没有得到自定义UI的ThemeRoller在手机phonegap android？ [英] I am not getting customized UI of ThemeRoller in mobile for phonegap android?
问题描述
我已自定义的主题已下载主题，添加为参考，但我的移动UI不显示我我的自定义主题：
I have customized theme have downloaded theme, added as reference but my mobile UI is not displaying me my custom theme :
这是自定义主题： ThemeRoller自定义主题
并将其添加为phonegap Android但没有结果：
Here is the custom theme:ThemeRoller Custom Theme and added it as in phonegap Android but no result:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="themes/converterThemeFinald.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="themes/converterThemeFinald.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="converterListPage">
<div data-role="header">
<h1>UNIT CONVERTER</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#" id="tempButton">TEMPERATURE</a></li>
<li><a href="#" id="weightButton">WEIGHT</a></li>
<li><a href="#" id="currencyButton">CURRENCY CONVERTER</a></li>
<li><a href="#" id="speedButton">SPEED CONVERSION</a></li>
</ul>
</div>
</div>
如何在我的应用程序中获取主题Roller的自定义主题，请帮助我
SCREEN下面是Garter的回答后的照片：
How can I get my custom theme of theme Roller in my App please help me SCREEN SHOTS AFTER FOLLOWING ANSWER of Gajorates:
推荐答案
您的问题是，您盲目地关注jQuery Mobile主题 - 滚动教程如何应用新主题。你有两个新的主题色板A和B.你包括他们之前，你初始化完整的jQuery Mobile CSS谁也有原始的A和B色板。因为完整的jQuery Mobile CSS最后被初始化了它的CSS将被应用在你的自定义。
Your problem is that you are blindly following jQuery Mobile theme-roller tutorial how to apply new theme. You have two new theme swatches A and B. And you are including them before you initialize full jQuery Mobile CSS who also has original A and B swatches. Because full jQuery Mobile CSS was initialized last its CSS will be applied over your custom one.
您可以通过两种不同的方式修复此问题：
You can fix this problem in 2 different ways:
-
删除此行：
Remove this line:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
HTML示例：
HTML example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<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="test.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
要测试这个功能，只需使用自定义CSS替换test.css即可。
To test this just replace test.css with your custom CSS.
或者你应该最后初始化CSS：
Or you should initialize your CSS last:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="themes/converterThemeFinald.min.css" />
这篇关于我没有得到自定义UI的ThemeRoller在手机phonegap android？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
