jquery mobile 仅替换内容 div答案

【问题标题】：jquery mobile replace just the content divjquery mobile 仅替换内容 div
【发布时间】：2012-04-14 13:21:06
【问题描述】：

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

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

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

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

【问题讨论】：

标签： jquery mobile jquery-mobile

【解决方案1】：

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

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

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

请参阅此jsFiddle 以获取示例。

【讨论】：

谢谢。但是在您的代码中，您还会刷新整个页面，而不仅仅是内容 div？
它只是将一个 div 的内容替换为另一个 div 的内容。由于内容大小不同，页脚会移动。要解决这个问题，您可以使用固定页脚，即<div data-role="footer" data-position="fixed">

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

谢谢。我的页脚是固定的，但我觉得很烦人的是，当您单击导航栏中的按钮时，整个页面（包括导航栏）都在刷新。我希望导航栏是固定的，就像 iOS 应用程序（如 ipod 应用程序）具有固定的导航栏。
看看上面的链接，你试过在你的标题上设置 data-position="fixed" 吗？或者您可以使用持久导航栏。 jquerymobile.com/test/docs/toolbars/footer-persist-a.html

【解决方案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>

【讨论】：