Question

我试图更改页面的一部分，我知道之前已经提到过，但我无法找到解决问题的好方法。

红色是我想要动态更改的页面的一部分，具体取决于您在面板左侧单击的内容。

图片： http://wstaw.org/m/2014/04/24/ask.png

HTML代码： http://pastebin.ubuntu.com/7322513/

<body id="framework">
    <div data-role="page" class="page ui-responsive-panel">
    <!-- header -->
    <div data-role="header" data-theme="a">
        <h1 id="titlepage">ICU</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
        <a href="#right-panel" data-icon="gear" data-iconpos="notext">Add</a>
    </div>
    <!-- /header -->

    <!-- content that is replaced by ajax -->
    <div id="content" data-role="content">
        <h2>content</h2>
    </div>
    <!-- /content -->

    <!-- Left menu panel -->
    <div data-role="panel" data-position="left" data-position-fixed="false" data-display="overlay" id="nav-panel" data-theme="b">

        <ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search" id="nav">
            <li data-icon="delete" style="background-color:#111;" data-theme="b">
                <!--Removed data-rel="close" since there is a bug in jquery mobile https://github.com/jquery/jquery-mobile/issues/1405 -->
                <a href="#closemenu">Close menu</a>
            </li>

            <li data-filtertext="Inbox">

                <a href="html/dummy.html">
                    <span class="ui-mail-icon-blue nav-ui-thumbnail"></span>
                    <span class="ui-li-count ui-btn-up-a ui-btn-corner-all" id="mail#">2</span>
                    <h1 class="ui-li-headline">Inbox</h1>
                    <p class="ui-li-desc" id="gotMail">Du har mail!</p>
                </a>
            </li>

            <li data-filtertext="Startsida">
                <a href="html/dummy2.html">
                    <span class="ui-start-icon nav-ui-thumbnail"></span>
                    <h1 class="ui-li-headline">Startsida</h1>

                </a>
            </li>

            <li data-filtertext="Översikt">
                <a href="html/dummy2.html">
                    <span class="ui-overview-icon nav-ui-thumbnail"></span>
                    <h1 class="ui-li-headline">Översikt</h1>
                    <p class="ui-li-desc">Antal elever (2)</p>

                </a>
            </li>

            <!--Nav list divider-->
            <li data-role="list-divider" role="heading" class="ui-button ui-li-divider ui-bar-a ui-li-has-count">
                Avdelningar
                <span id="departments#" class="ui-li-count ui-btn-up-a ui-btn-corner-all">2</span>
            </li>
            <!--/Nav list divider-->


            <!--Auto generated departments-->
            <li data-filtertext="Testpage">
                <a href="html/dummy.html">
                    <span class="ui-department-placeholder nav-ui-thumbnail"></span>
                    <h1 class="ui-li-headline">Avdelning 1</h1>
                    <p class="ui-li-desc">Antal elever (2)</p>
                </a>
            </li>

            <li data-filtertext="Testpage2">
                <a href="html/dummy2.html">
                    <span class="ui-department-placeholder nav-ui-thumbnail"></span>
                    <h1 class="ui-li-headline">Avdelning 2</h1>
                    <p class="ui-li-desc">Antal elever (3)</p>
                </a>
            </li>

        </ul>
    </div>

Jquery代码：

function loadPage(page, title) {
    $.ajax({
        url: page,
        async: false
    }).done(function (data) {
        $("#content").html(data);
        $("#titlepage").html(title);
    }).fail(function () {
        alert("Gick inte att ladda");
    });
}

我已经完成了自己的ajax加载页，但有一种方法可以使用jquery mobile internal，因为它感觉像是黑客。

结论，有没有办法更好地做到这一点？和如何我应该为每个页面加载脚本，使用主页标题一次加载所有这些脚本，或者在加载内容时加载脚本。

我正在使用 Jquery jquery-2.1.0 JqueryMobile jquery.mobile-1.4.2

最好的问候

Answer 1

我已经完成了自己的ajax加载页，但有一种方法可以使用jquery mobile internal，因为它感觉像是黑客。

jQuery Mobile基于Ajax导航;它使用Ajax检索页面，将它们加载到DOM中，然后在显示它们之前初始化它们。这就是说，当你使用Ajax加载外部数据时，你正在以正确的方式做到这一点。

您可以使用$.ajax()，.load()或$.get()。但是，请记住，您需要手动初始化检索的数据 - 如果它包含jQM小部件 - 使用增强方法，例如.enhanceWithin()。

我应该为每个页面加载脚本，使用主页标题一次加载所有页面，还是在加载内容时加载脚本。

当您使用单页模型时，更安全（也许您应该）在head中为每个页面加载所有JS库和样式表。尽管如此，jQM将在首页的初始化中仅加载一次链接，其余页面将通过Ajax加载/检索。 jQM会在任何外部页面中加载第一个 data-role=page并忽略其他任何内容。

为什么要加载所有JS和样式表？如果用户刷新当前页面，是为了让jQM再次运行。在这种情况下，当前刷新 / 重新加载页面将变为第一个页面。

绑定事件并添加侦听器：

使用jQM时，您需要远离.ready()和/或$(function(){})并使用Page Events。除了某些情况，例如使用外部工具栏，面板或弹出窗口。在加载页面之前，首次运行时，需要手动初始化 外部小部件。

$(function () {
  $("#ExternalPanel").panel();
});

至于添加侦听器，请使用pagecreate事件。

$(document).on("pagecreate", "#pageID", function () {
  $("foo").off("click").on("click", function () {
    /* do something */
  });
});

您需要删除.off()以前的绑定，然后.on()再次添加它们，因为外部页面会在显示时通过pagecreate。因为jQM一旦隐藏就会从DOM中删除外部页面。

将元素附加到活动页面的最后一点。您需要特定于添加Ajax检索的元素的位置。

var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
$.get("URL", function (data) {
    $("#foo", activePage).html(data).enhanceWithin();
}, "html");

Demo ^（1） - Code

^{（1）点击＆＃34;收件箱＆＃34;}

Jquery mobile，更改页面的一部分

1 个答案:

绑定事件并添加侦听器：