iPhone JQuery:如何使用 iPhone 中的 Jquery Mobile + phone gap 在 iPad 中实现拆分视图
Posted
技术标签:
【中文标题】iPhone JQuery:如何使用 iPhone 中的 Jquery Mobile + phone gap 在 iPad 中实现拆分视图【英文标题】:iPhone JQuery: How to implement a Split view in iPad using Jquery Mobile + phone gap in iPhone 【发布时间】: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?提前谢谢
【问题讨论】:
【参考方案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 并且该死的易于实现
【讨论】:
以上是关于iPhone JQuery:如何使用 iPhone 中的 Jquery Mobile + phone gap 在 iPad 中实现拆分视图的主要内容,如果未能解决你的问题,请参考以下文章
iPhone/Android/BlackBerry 上的 jQuery
使用phonegap和jquery mobile开发iphone应用程序时如何禁用本机键盘上的Go按钮?
使用 HTML5/jQuery 从 iPhone 获取用户编号