Jquery的移动，一个页面的改变部分 [英] Jquery mobile, change part of a page
问题描述
我试图改变一个网页的一部分，我知道，这已被问过，但我真的不能找到一个很好的解决了我的问题。
红色的颜色是我想要动态改变取决于您点击左侧即是面板页面的部分。
图片： http://wstaw.org /m/2014/04/24/ask.png
HTML code： http://pastebin.ubuntu.com/ 7322513 /
＆LT;身体ID =框架＆GT;
＆LT; DIV数据角色=页面级=页面的UI响应面板＆GT;
＆LT;！ - 标题 - ＆GT;
＆所述;股利数据角色=头数据主题=一个＆GT;
＆LT; H1 ID =titlepage＆GT; ICU＆LT; / H1＆GT;
＆LT; A HREF =＃导航面板数据图标=酒吧数据iconpos =NOTEXT＆GT;菜单＆LT; / A＆GT;
＆LT; A HREF =＃右面板中的数据图标=齿轮数据iconpos =NOTEXT＆gt;添加＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT;！ - /头 - ＆GT;
＆LT;！ - 这被替换为Ajax内容 - ＆GT;
＆LT; DIV ID =内容的数据角色=内容＆GT;
＆其中; H2＆gt;内容＆所述; / H2＆GT;
＆LT; / DIV＆GT;
＆LT;！ - /内容 - ＆GT;
＆LT;！ - 左侧菜单面板 - ＆GT;
＆LT; DIV数据角色=面板数据位=左的数据位固定=假数据显示=叠加ID =导航面板数据主题=B＆GT;
＆LT; UL数据角色=列表视图数据主题=数据分压器主题=A的风格=的margin-top：-16px;类=导航搜索ID =导航＆GT;
＆LT;李数据图标=删除的风格=背景颜色：＃111;数据主题=B＆GT;
＆LT;！ - 删除的数据，相对=关闭，因为在jQuery Mobile的https://github.com/jquery/jquery-mobile/issues/1405的错误 - ＆GT;
＆LT; A HREF =＃closemenu＆GT;关闭菜单＆LT; / A＆GT;
＆LT; /李＆GT;
＆LT;李数据filtertext =收件箱＆GT;
＆LT; A HREF =HTML / dummy.html＆GT;
＆LT;跨度类=UI的邮件图标蓝色NAV-UI-缩略图＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=UI丽计数UI-BTN-UP-一个UI-BTN-角落，所有的ID =邮件＃＆GT; 2'; / SPAN＆GT;
＆LT; H1类=UI丽的标题＆GT;收件箱＆LT; / H1＆GT;
＆其中，P类=UI丽递减ID =gotMail＆GT;杜哈日邮件＆LT;！/ P＆GT;
＆所述; / a取代;
＆LT; /李＆GT;
＆LT;李数据filtertext =Startsida＆GT;
＆LT; A HREF =HTML / dummy2.html＆GT;
＆LT;跨度类=UI启动图标NAV-UI-缩略图＆GT;＆LT; / SPAN＆GT;
＆LT; H1类=UI丽的标题＆GT; Startsida＆LT; / H1＆GT;
＆所述; / a取代;
＆LT; /李＆GT;
＆LT;李数据filtertext =概要＆GT;
＆LT; A HREF =HTML / dummy2.html＆GT;
＆LT;跨度类=UI-概述图标NAV-UI-缩略图＆GT;＆LT; / SPAN＆GT;
＆LT; H1类=UI丽的标题＆GT;概要＆LT; / H1＆GT;
＆其中，P类=UI丽递减＆GT;安塔尔elever（2）＆LT; / P＆GT;
＆所述; / a取代;
＆LT; /李＆GT;
＆LT;！ - 导航列表分 - ＆GT;
＆LT;李数据角色=名单分频器角色=标题级=UI按钮UI丽分频器UI吧 - 一个UI丽具有计数＆GT;
Avdelningar
＆LT;跨度ID =＃部门级=UI丽计数UI-BTN-UP-一个UI-BTN-角落都＆GT; 2'; / SPAN＆GT;
＆LT; /李＆GT;
＆LT;！ - /导航列表除法 - ＆GT;
＆LT;！ - 自动生成部门 - ＆GT;
＆LT;李数据filtertext =Testpage＆GT;
＆LT; A HREF =HTML / dummy.html＆GT;
＆LT;跨度类=UI-部门占位符NAV-UI-缩略图＆GT;＆LT; / SPAN＆GT;
＆LT; H1类=UI丽的标题＆GT; Avdelning 1＆LT; / H1＆GT;
＆其中，P类=UI丽递减＆GT;安塔尔elever（2）＆LT; / P＆GT;
＆所述; / a取代;
＆LT; /李＆GT;
＆LT;李数据filtertext =Testpage2＆GT;
＆LT; A HREF =HTML / dummy2.html＆GT;
＆LT;跨度类=UI-部门占位符NAV-UI-缩略图＆GT;＆LT; / SPAN＆GT;
＆LT; H1类=UI丽的标题＆GT; Avdelning 2'; / H1＆GT;
＆其中，P类=UI丽递减＆GT;安塔尔elever（3）＆LT; / P＆GT;
＆所述; / a取代;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
jQuery的code：
函数loadPage（页，标题）{
$阿贾克斯（{
网址：网页，
异步：假的
}）。完成（功能（数据）{
$（＃内容）HTML（数据）;
$（＃titlepage）HTML（职称）;
}），失败（函数（）{
警报（吉克INTE ATT ladda）;
}）;
}
我已经做了我自己的AJAX loadpage的作品，但有没有办法使用jQuery Mobile的内部，因为它感觉就像一个黑客攻击。
结论，有没有办法做到这一点更好？和如何的，我应该加载脚本的每一页，采用主页头加载所有这些一次还是有办法加载时的内容加载脚本。
即时通讯使用 jQuery的的jQuery 2.1.0 JqueryMobile jquery.mobile-1.4.2
最好的问候
我已经做了我自己的AJAX loadpage的作品，但有没有办法使用jQuery Mobile的内部，因为它感觉就像一个黑客攻击。
jQuery Mobile的基于Ajax的导航;它使用Ajax来检索网页，加载到DOM，然后的初始化的他们显示他们之前。这是说，当你使用Ajax加载外部数据，你正在做正确的方式。
您可以使用 $。阿贾克斯（）， .load（）或 $获得（）。但是，请记住，你需要手动的初始化的数据检索 - 如果它包含JQM部件 - 使用的增强方法的如： .enhanceWithin（）。
我应该加载脚本的每一页，采用主页头加载所有这些一次还是有办法加载时的内容加载脚本。
由于您使用的单页型号的，它是安全的（也许你应该）加载所有的JS库和样式表中的头的每一个页面。然而，JQM将加载在第一页的初始化，页面的其余部分将被载入/通过Ajax检索这些链接仅曾。 JQM负载第一 数据角色=页找到任何的外部的页面，而忽略任何其他的事情。
为什么加载所有的JS和样式表？是让JQM再次合作的情况下，用户的刷新的当前页面。在这种情况下，当前的刷新 / 重新加载的页面变成第一页。
绑定事件并添加监听器：
在使用JQM，你需要远离。就绪（）和/或 $（函数（）{}）和使用的页活动的。除了某些情况下，例如使用的外部的工具栏，面板或弹出窗口。这些的外部的部件必须的初始化的手动上首次运行加载页面之前。
$（函数（）{
$（＃ExternalPanel）面板（）。
}）;
至于添加监听器，使用 pagecreate 事件。
$（文件）。在（pagecreate，#pageID，函数（）{
$（富）。关（点击）。在（点击，函数（）{
/* 做一点事 */
}）;
}）;
您需要删除 .off（） previous绑定，然后。对（）将它们添加再次，因为的外部的页面通过 pagecreate 时，他们都表示。因为JQM删除的从DOM外部的网页一下子就消失。
在附加元素活动页面最后一点。你必须要具体，要在其中添加阿贾克斯获取这些元素。
VAR activePage = $ .mobile.pageContainer.pagecontainer（getActivePage）;
$获得（URL，功能（数据）{
$（＃富，activePage）。html的（数据）.enhanceWithin（）;
}，HTML）;
演示 （1） - <一个HREF =http://jsfiddle.net/Palestinian/cfqMU/相对=nofollow> code
（1）点击收件箱
I'm trying to change a part of a page, I know that this has been asked before but I cannot really find a good solution to my issue.
The red colour is the part of the page I want to change dynamically depending on what you click on the left side that is a panel.
Image: http://wstaw.org/m/2014/04/24/ask.png
HTML Code: 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 Code:
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");
});
}
I have done my own ajax loadpage that works but is there a way to use the jquery mobile internal since it feels like a hack.
Conclusion, is there a way to do this better? and how should i load script for each page, using the main-page header to load all of them at once or is there a way to load the script when that content is loaded.
Im using Jquery jquery-2.1.0 JqueryMobile jquery.mobile-1.4.2
Best Regards
I have done my own ajax loadpage that works but is there a way to use the jquery mobile internal since it feels like a hack.
jQuery Mobile is based on Ajax Navigation; it uses Ajax to retrieve pages, load them into DOM and then initialize them before showing them. This been said, when you use Ajax to load external data, you are doing it the right way.
You can use $.ajax(), .load() or $.get(). However, bear in mind that you need to manually initialize data retrieved - in case it contains jQM widgets - using enhancement methods e.g. .enhanceWithin().
Should I load script for each page, using the main-page header to load all of them at once or is there a way to load the script when that content is loaded.
As you're using Single Page Model, it is safer (maybe you should) load all JS libraries and style sheets in head for each and every page. Nevertheless, jQM will load those links only once on first page's initialization, the rest of pages will be loaded/retrieved via Ajax. jQM loads first data-role=page it finds in any external page and neglects any thing else.
Why to load all JS and style sheets? Is to get jQM working again in case a user refreshes current page. In this case, the current refreshed / reloaded page becomes first page.
Binding events and adding listeners:
When using jQM, you need to stay away from .ready() and/or $(function(){}) and use Page Events. Except for some cases e.g. using External toolbars, panels or popups. Those External widgets need to be initialized manually on first run before page is loaded.
$(function () {
$("#ExternalPanel").panel();
});
As for adding listeners, use pagecreate event.
$(document).on("pagecreate", "#pageID", function () {
$("foo").off("click").on("click", function () {
/* do something */
});
});
You need to remove .off() previous bindings and then .on() add them again, since external pages go through pagecreate whenever they are shown. Because jQM removes external pages from DOM once hidden.
One final point on appending elements to active page. You need to be specific as where you want to add those elements retrieved by Ajax.
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
$.get("URL", function (data) {
$("#foo", activePage).html(data).enhanceWithin();
}, "html");
(1) Click "inbox"
这篇关于Jquery的移动，一个页面的改变部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
