PhoneGap应用程序与HTML5

我正在构建一个网站，然后将其转换为使用PhoneGap的3个操作系统（iOS，Android & Windows Phone）的移动应用程序。我的网页结构是这样的，它有3个垂直DIV。我已经使用Media-Queries控制了这些DIV的宽度，并且它在桌面& Android模拟器上工作正常。这意味着在桌面上所有三个DIV将同时显示，但在移动应用程序中，我想一次只显示一个DIV，当用户使用触摸水平滚动屏幕时，第二个DIV将显示在移动屏幕上，同样，第三个DIV开启使用触摸进一步滚动。总之，我希望每个DIV都是移动应用程序的一个页面。PhoneGap应用程序与HTML5

但它显示了主屏幕上的所有三个div。我想知道如何控制我的网页，当它在桌面上查看时，所有三个DIV将同时显示，并且在使用PhoneGap应用程序在移动设备上查看时，每次只有一个div可供用户看到。

希望我对你很清楚。我也粘贴HTML代码

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Site</title> 
    <link rel="stylesheet" href="main.css" /> 
    <script type="text/JavaScript" src="CommonFunctions.js"></script> 
    <meta name="viewport" content="width=device-with, initial-scale=1, user-scalable=yes"> 
</head> 
<body> 
    <div id="topContainer" class="container"> 
     <div id="topSectionHeating" class="topSectionHeating">   
      DIV1 
     </div> 

     <div id="topSectionHotWater" class="topSectionHotWater">    
      DIV2 
     </div> 

     <div id="topSectionSchedule" class="topSectionSchedule">  
      DIV3 
     </div>  
    </div> 
</body>

来源

2012-10-09 Amit Kumar Jain

您是否尝试过的jQuery？您可以将onClick（）分配给按钮，并相应地显示/隐藏div。

如果你不熟悉的jQuery，开始here或提供了一些很好的教程here

来源

2012-10-09 15:55:49

感谢凯沙夫。我找到了一种解决方法，只使用媒体查询来完成此操作。您能否告诉我关于如何使用jQuery Mobile在HTML5中实施滑动事件？或者给我提供一些有用的链接。 –

jQuery手机已获得广泛的文档。 [这里]（http://jquerymobile.com/test/docs/api/events.html）是你正在寻找的滑动事件。 –

谢谢。我知道了。 –

PhoneGap应用程序与HTML5

回答

相关问题