JQuery 手机差距：使用 asyraf9 示例的拆分视图不起作用答案

【问题标题】：JQuery Mobile Phone gap: Split view using asyraf9 example not workingJQuery 手机差距：使用 asyraf9 示例的拆分视图不起作用
【发布时间】：2012-05-28 12:01:48
【问题描述】：

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

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

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

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

“&copy CS8”中的任何语法问题

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

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

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

怎么了

【问题讨论】：

标签： jquery android iphone jquery-mobile cordova

【解决方案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 将适用于任何尺寸的手机。

【讨论】：

【解决方案2】：

您的意思是 '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 好像不支持这个插件。

还是谢谢你

【讨论】：

【解决方案3】：

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

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

【讨论】：