1

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

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

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

当我们使用“ © CS8 ”时，index.htms 中的部分代码发生了如下变化

“© CS8”中的任何语法问题

在此处输入图像描述

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

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

它就像一个段与表视图而不是拆分视图

在此处输入图像描述 怎么了

4

3 回答 3

3

为了使它适用于 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 将适用于任何尺寸的手机。

于 2012-10-18T04:28:17.090 回答
1

你的意思是 'data-id="menu"' 吗？事实上，它在桌面上的网络浏览器中运行良好，只有当我使用 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 不支持这个插件。

还是非常感谢

于 2012-08-02T14:12:43.743 回答
0

在 index.html 中，检查您有两个 div，一个具有 data-role="menu" 和另一个 data-role="main"。所以，一旦你有了它，在纵向模式下你就会显示主页。在横向模式下，您将显示菜单和主页。

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

于 2012-08-02T12:41:31.890 回答