iPhone JQuery：如何使用 iPhone 中的 Jquery Mobile + phone gap 在 iPad 中实现拆分视图答案

【问题标题】：iPhone JQuery: How to implement a Split view in iPad using Jquery Mobile + phone gap in iPhoneiPhone JQuery：如何使用 iPhone 中的 Jquery Mobile + phone gap 在 iPad 中实现拆分视图
【发布时间】：2012-06-01 00:39:50
【问题描述】：

我曾尝试使用 JQuery mobile Phone gap 实现 split view

示例代码在 index.html

    <head> 
        <link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" />
        <link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" />
        <link rel="stylesheet" href="inc/resources/css/jquery.toastmessage.css" />

        <script type="text/javascript" src="inc/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"></script>

        <script type="text/javascript" src="inc/phonegap-1.2.0.js"></script>
    </head> 

    <body> 

        <div data-role="page" data-theme="c">
            <div data-role="header">
                Mpbile Split View
            </div>   

            <div data-role="content">

                 <!--- Left side view------>
                <div class="left-content">
                    <h3>lef hand content</h3>
                    <ul data-role="listview">
                        <li>One</li>
                        <li>One</li>
                        <li>One</li>
                        <li>One</li>
                    </ul>
                </div>

                <!--- Right side view------>
                <div class="right-content">
                    <h3>Right hand content</h3>
                    <ul data-role="listview">
                        <li>Two</li>
                        <li>Two</li>
                        <li>Two</li>
                        <li>Two</li>
                    </ul>
                </div>
            </div>
        </div>


    </body> 
</html>

但它在同一页面上从上到下一一显示两个视图，如下所示

我需要两张桌子作为 split view 左侧一张（root view ）和右侧其他（details view）

如何使用 jQuery？提前谢谢

【问题讨论】：

标签： jquery iphone ipad jquery-mobile cordova

【解决方案1】：

您可以使用http://jeromeetienne.github.com/jquery-mobile-960/ 并将其与该网格分开。

如果您了解 960.gs 或任何其他 css 网格框架，这对您来说将非常容易。在提到的网站上有使用演示。

【讨论】：

这是一个3年没有更新的GitHub项目。该文档似乎非常好，主页作为其工作原理的示例。另一方面，如果你只想将 iPod 屏幕分成两半，这似乎有点过头了。最后，有一个五个月前的评论，仍然没有得到答复，询问是否会更新以支持最新版本的 jQuery。我说“不！”

【解决方案2】：

尝试使用我的multiview plugin。

它允许在 Jquery Mobile 中并排显示 1/2/3 个面板以及弹出面板。我没有用 PhoneGap 尝试过（刚刚完成 JQM 1.1），所以如果你试一试，请告诉我它是否有效（我应该猜）。

请使用 1.1 版本和 JQM 1.1.multiview，这需要一些调整才能正常工作。

我目前正在编写新的 README 和示例网站。几天后应该会起来。

【讨论】：

这是一个 2 年未更新的 GitHub 项目，仍然没有 README 文件，也没有我能看到的任何其他文档，也没有指向示例站点的指针。我说“不！”
如果您有时间提供上述任何内容，请随时 fork、更新和维护，因为我目前无法...

【解决方案3】：

试试 simplesplitview

http://simplesplitview.sourceforge.net/

它是最好的 jquerymobile splitview 并且该死的易于实现

【讨论】：