我正在尝试在Adobe Dreamweaver CC中使用jQuery mobile,然后使用phonegap构建服务将应用程序部署到我的手机。这里的问题是Dreamweaver设计面板显示的是jQuery Mobile UI,但是通过手机部署的应用程序APK却没有。 :(
请在下面找到Dreamweaver CC的屏幕截图,其中包含设计和代码面板。
在下面找到整个index.html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<link href="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.accordion.min.css" rel="stylesheet" type="text/css">
<script src="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui-1.9.2.accordion.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">Accenture</a></li>
<li><a href="#page3">Digital</a></li>
<li><a href="#page4">CASF RIA</a></li>
<li><a href="#page5">Hybrid Applications using PhoneGap</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<a href="#page"><label style="color:white; font-weight:bolder">BACK</label></a><h1>ACCENTURE Page</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="selectmenu" class="select">Select Technology Areas:</label>
<select name="selectmenu" id="selectmenu">
<option value="option1">Digital</option>
<option value="option2">Oracle</option>
<option value="option3">Mobile</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider">Value:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<label for="flipswitch">Option:</label>
<select name="flipswitch" id="flipswitch" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>Header</h3>
<p>Content</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Header</h3>
<p>Content</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Header</h3>
<p>Content</p>
</div>
</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<a href="#page"><label style="color:white; font-weight:bolder">BACK</label></a><h1>DIGITAL Page</h1>
</div>
<div data-role="content">
<div id="Accordion1">
<h3><a href="#">Section 1</a></h3>
<div>
<p>Content 1</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Content 2</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Content 3</p>
</div>
</div>
Content </div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<a href="#page"><label style="color:white; font-weight:bolder">BACK</label></a><h1>CASF RIA</h1>
</div>
<div data-role="content">
<ol data-role="listview" data-inset="true" data-split-icon="arrow-d">
<li><a href="#">
<h3>Page</h3>
<p>Lorem ipsum</p>
<span class="ui-li-count">1</span></a><a href="#">Default</a></li>
<li><a href="#">
<h3>Page</h3>
<p>Lorem ipsum</p>
<span class="ui-li-count">1</span></a><a href="#">Default</a></li>
<li><a href="#">
<h3>Page</h3>
<p>Lorem ipsum</p>
<span class="ui-li-count">1</span></a><a href="#">Default</a></li>
<li><a href="#">
<h3>Page</h3>
<p>Lorem ipsum</p>
<span class="ui-li-count">1</span></a><a href="#">Default</a></li>
<li><a href="#">
<h3>Page</h3>
<p>Lorem ipsum</p>
<span class="ui-li-count">1</span></a><a href="#">Default</a></li>
<li><a href="#">
<h3>Page</h3>
<p>Lorem ipsum</p>
<span class="ui-li-count">1</span></a><a href="#">Default</a></li>
<li><a href="#">
<h3>Page</h3>
<p>Lorem ipsum</p>
<span class="ui-li-count">1</span></a><a href="#">Default</a></li>
<li><a href="#">
<h3>Page</h3>
<p>Lorem ipsum</p>
<span class="ui-li-count">1</span></a><a href="#">Default</a></li>
<li><a href="#">
<h3>Page</h3>
<p>Lorem ipsum</p>
<span class="ui-li-count">1</span></a><a href="#">Default</a></li>
<li><a href="#">
<h3>Page</h3>
<p>Lorem ipsum</p>
<span class="ui-li-count">1</span></a><a href="#">Default</a></li>
</ol>
Content </div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page5">
<div data-role="header">
<a href="#page"><label style="color:white; font-weight:bolder">BACK</label></a><h1>HYBRID APPLICATIONS using PhoneGap</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="email" name="email" id="email" value="" />
</div>
Content </div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<script type="text/javascript">
$(function() {
$( "#Accordion1" ).accordion();
});
</script>
</body>
</html>
这就是它在移动设备中的外观:
任何帮助将不胜感激:)
感谢。
答案 0 :(得分:1)
在浏览完APK后,发现Dreamweaver CC在从Macintosh打包APK时有一个错误。 jQuery mobile的主题CSS文件被视为默认的Macintosh Hard Drive Path。因此,您需要稍微调整它到相对文件路径。
Macintosh文件路径:
<link href="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
而是将主题复制到以下文件夹并使用相对文件路径:
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
效果很好:)