jquery - iPhone jQuery : How to implement a Split view in iPad using Jquery Mobile + phone gap in iPhone

标签 jquery iphone ipad jquery-mobile cordova

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

示例代码 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> 

但它在同一页面上一一从上到下显示两个 View ,如下所示

enter image description here

我需要两个表作为 split view 左侧一个 ( root view ) 和右侧其他 ( details view )

如何使用 jQuery?提前致谢

最佳答案

您可以使用http://jeromeetienne.github.com/jquery-mobile-960/并用网格分割它。

如果您了解 960.gs 或任何其他 css 网格框架,这对您来说会很容易。上述站点有使用演示。

关于jquery - iPhone jQuery : How to implement a Split view in iPad using Jquery Mobile + phone gap in iPhone,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10754271/

相关文章:

javascript - bool 值不是 javascript 中的函数

javascript - 如何设置两个jquery cookie?

jQuery Fancybox 和 YouTube 嵌入

iphone - 仅当点击屏幕时隐藏 iOS 的 Default.png

ios - 应用程序使用的 iCloud 存储空间?

ios - 仅限 iPhone 的应用程序在 iPad 上崩溃

ios - 自动旋转代码适用于 iPhone,但不适用于 iPad

javascript - 无法将 jquery UI 按钮样式添加到所有按钮 Codeigniter

ipad - 如何在弹出框内显示键盘?,ipad 密码锁定样式

ios - 如何制作没有线条的子路径?