Com*_*emy 3 html javascript ajax jquery jquery-mobile
我正在尝试更改页面的一部分,我知道之前已经问过这个问题,但我无法找到解决问题的好方法.
红色是我想要动态更改的页面的一部分,具体取决于您在面板左侧单击的内容.
图片: 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
最好的祝福
我已经完成了自己的ajax加载页,但有一种方法可以使用jquery mobile internal,因为它感觉像是一个黑客.
jQuery Mobile基于Ajax Navigation; 它使用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");
(1)点击"收件箱"