Question

我想在iPad中使用jQuery Mobile和PhoneGap实现拆分视图。许多网站推荐使用asyraf9 https://github.com/asyraf9/jquery-mobile/

我已经下载了包含文件包的zip文件。在demos\experiments\文件夹中，我看到了一个“splitview”目录。我使用该目录的内容作为参考。

我已在www文件夹的分割视图文件夹中添加了所有使用文件的文件。它仅显示如下所示的视图，但不显示拆分视图

index.htms中的部分代码如下所示，当我们使用“＆amp; copy CS8”

时会发生变化

“＆amp; copy CS8”中的任何语法概率

enter image description here

将哪个文件用作拆分视图的插件..？

当我使用它的拆分视图index.html文件时，它不显示拆分视图

就像一个段与表视图竞争而不是分割视图

enter image description here 什么是错的

Answer 1

使其适用于splitsview ..在Splitsview.js文件中生成

$.support.splitview =($query || ($.mobile.browser.ie && $(this).width() >= 480)) 
                      && $.mobile.ajaxEnabled;

as（评论右侧并执行$ .support.splitview = 1;）

$.support.splitview = 1;//($query || ($.mobile.browser.ie && $(this).width() >= 480)) 
                           && $.mobile.ajaxEnabled;

然后spliview适用于任何尺寸的手机。

Answer 2

你的意思是'data-id =“menu”'？事实上，它在桌面上的Web浏览器中运行良好，只有当我使用PhoneGap构建它才能在Android上安装应用程序时才会出现此问题。这是我的index.html：

 <!DOCTYPE html>
 <html>
  <head>
        <title>Jquery Mobile Splitview</title>
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="css/jquery.mobile.css" />
        <link rel="stylesheet" href="css/jquery.mobile.splitview.css" />
    <link rel="stylesheet"  href="css/jquery.mobile.grids.collapsible.css" />
    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="js/jquery.mobile.splitview.js"></script>
    <script type="text/javascript" src="js/jquery.mobile.js"></script>
    <script type="text/javascript" src="js/iscroll-wrapper.js"></script>
    <script type="text/javascript" src="js/iscroll.js"></script>
    <!--script type="text/javascript" src="scrollability.js"></script-->        
</head>
<body>
    <div data-role="panel" data-id="menu" data-hash="crumbs" data-context="a#default">
        <!-- Start of main page -->
        <div data-role="page" id="main" data-hash="false">
            <div data-role="header">
                <h1>Left panel</h1>
            </div><!-- /header -->
            <div data-role="content">
                The left content
            </div><!-- /content -->
        </div><!-- /page -->
    </div><!-- panel menu -->

    <div data-role="panel" data-id="main">
        <!-- Start of about page -->
        <div data-role="page" id="about">
            <div data-role="header">
                <h1>Right panel</h1>
            </div><!-- /header -->
            <div data-role="content">
                The right content
            </div><!-- /content -->
        </div><!-- /page -->
    </div><!-- panel main -->
    </body>
 </html>

似乎PhoneGap不支持此插件。

无论如何，谢谢你

Answer 3

在index.html中，检查出你有两个div，一个有data-role =“menu”，另一个有data-role =“main”。因此，一旦拥有它，在纵向模式下，您将显示主页面。在横向模式下，您将显示菜单和主页面。

您可以通过删除＆amp; copy代码进行检查，以验证在没有相同代码的情况下，您是否能够获得拆分视图。

JQuery Mobile Phone差距：使用asyraf9示例无效的分割视图

3 个答案: