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

瑞安的建议也有效。请记住，如果您决定覆盖click事件，并绕过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>

jquery mobile只替换内容div

4 个答案: