3

如何在 jQuery Mobile 中切换导航栏的界面，以便我可以按下 div 中的按钮并显示不同的导航栏？

4

4 回答 4

7

jQuery Mobile NAV Toggle 的jsFiddle演示

我通过上面的链接创建了一个jsFiddle 演示，应该可以解决您的问题。

特别是，您可以轻松设置 NAV 栏以及在不同栏之间切换。

我说不同的条是因为小提琴允许您需要更多的 NAV 条，并且很容易适应。可以肯定的是，任何 NAV 条都会在5 个按钮处达到最大值。

编辑：根据您的消息评论，一旦创建超过 1 个页面，就可以轻松地在页面之间导航。这个不同的jsFiddle展示了如何标记锚标记以动态切换页面。这可以与原始的 jsFiddle Answer 一起使用以提供完整的解决方案。


重新编辑：根据您最近的评论，这个新的 jsFiddle允许在同一页面上切换按钮内容。

提供简单的小提琴评论以了解发生了什么，但询问任何不清楚的地方。

于 2012-06-02T22:28:44.737 回答
0

签出 updatelayout 事件。此事件由框架内动态显示/隐藏内容的组件触发，并作为一种通用机制来通知其他组件它们可能需要更新其大小或位置。来自 jQuery 网站的示例：

$( '#foo' ).hide().trigger( 'updatelayout' );
于 2012-05-30T18:21:15.387 回答
0

这是你想要达到的目标吗？ http://jsfiddle.net/cHrSN/18/

于 2012-06-02T18:19:55.197 回答
0

您的选项卡是否必须集成到 JQM urlHistory 或浏览器历史记录中？

如果不是，我将可折叠集更改为选项卡查看器，因此我没有将可折叠集从上到下更改，而是将小部件更改为支持 data-type="horizo​​ntal "，然后从左到右显示可折叠，内容部分显示为标签。我还添加了 next-previous 按钮，因此您可以通过单击选项卡按钮或 prev-next 按钮来回切换。

但是，这一切都发生在页面内部，因此不支持浏览器后退按钮。

如果这朝着正确的方向发展，我可以提供一个示例页面和解释。

于 2012-06-03T14:12:09.450 回答