jquery - jquery mobile 仅替换内容 div

Question

我正在使用 jquery mobile 并且我喜欢多页概念，您可以通过参考他们的 ID 将孔页替换为另一个页面。

现在我的应用程序有一个导航栏（当然），我讨厌当我点击导航栏中的链接时，整个页面都向左滑动（包括导航栏），而另一个页面来自右边。

我只是想替换内容div，导航栏应该固定在底部而不是一直刷新！你懂我的意思吗？如果我只是指内容 div id，它不像我指的是页面 id 那样工作。

我希望你知道我的意思。那么我该如何处理呢？

Answer 1

一种方法是覆盖click链接事件，并用新内容替换 div （目标）的内容。在 jQuery 中这样做很简单，例如

 $('#replacement-target').html( $('#source-content').html() ); 

要与 jQuery 一起玩，您可能需要调用refresh内容以确保它被框架正确设置样式。

有关示例，请参见此 jsFiddle。

Answer 2

$('#replacement-target-page-id div[data-role="content"]').replaceWith(
    function(return$('#source-content-page-id div[data-role="content"]').contents();)

Answer 3

另一种解决方案是关闭过渡效果 $.mobile.defaultPageTransition = 'none';

并使用固定页脚。http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

瑞安的建议也有效。请记住，如果您决定覆盖点击事件，并绕过 jqm 导航模型，您将无法访问非常方便的 jqm 页面事件。这实际上取决于您的应用程序的需求是什么。

Answer 4

对我有用的是通过使用外部标题使标题/导航栏远离页面。这样，我仍然可以使用 jquery 页面转换并保持导航栏静态。

此处记录了外部工具栏 - http://demos.jquerymobile.com/1.4.4/toolbar-external/

我必须初始化导航栏和任何其他我要远离页面 DOM 的组件。在这种情况下，菜单面板。根据 jqm 文档，代码如下所示：

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="menu-panel"></div>
<div data-role="page" id="home">
    <div role="main" class="ui-content"></div>
</div>

<script>
$(function(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
    $( "[data-role='panel']" ).panel();
});
</script>