文章/答案/技术大牛

发布

社区首页 >问答首页 >Adobe Dreamweaver CC Phonegap构建服务问题

问Adobe Dreamweaver CC Phonegap构建服务问题
EN

Stack Overflow用户

提问于 2013-06-27 12:21:34

回答 1查看 1.5K关注 0票数 1

我正尝试在Adobe Dreamweaver CC中使用jQuery mobile，然后使用phonegap build服务将应用程序部署到我的手机上。这里的问题是，Dreamweaver设计面板显示了APK，而部署在手机上的应用程序jQuery却没有。:(

请在下面找到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>

这是它在移动设备中的外观：

如有任何帮助，我们将不胜感激:)

谢谢。

phonegap-build

jquery

jquery-mobile

cordova

dreamweaver

回答 1

Stack Overflow用户

发布于 2013-06-28 12:03:52

通过APK后，我刚刚发现Dreamweaver CC在打包来自Macintosh的APK时有一个bug。jQuery移动端的主题CSS文件被作为默认的Macintosh硬盘路径。因此，您需要将其设置为相对文件路径。

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">

它工作得很好:)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17334492

复制

相似问题

问Adobe Dreamweaver CC Phonegap构建服务问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Adobe Dreamweaver CC Phonegap构建服务问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Adobe Dreamweaver CC Phonegap构建服务问题
EN