jQuery Mobile的附加HTML code [英] jQuery mobile appending html code
问题描述
我想追加一些code到使用jQuery / jQuery Mobile的页面，我只想一次不追加每次访问的页面。
**最后编辑**
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆gt;页面标题＆LT; /标题＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1＆GT;
＆LT;链接rel =stylesheet属性HREF =HTTP：//$c$c.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css/＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/jquery-1.6.2.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本＆GT;
// $（文件）。就绪（函数（）//当我用这个得到错误
$（'＃第1页）。生活（pageshow'，函数（）
{
//警告（！）;
VAR SECTION1 =＆LT; P＆GT;有的code第1页...＆LT; / P＆gt;中;
myClone1 = $（SECTION1）;
myClone1.appendTo（＃PLACEHOLDER1）触发（'创造'）。
}）; $（'＃第2页）。生活（pageshow'，函数（）
{
//警告（！）;
VAR第2节=＆LT; P＆GT;有的code 2页...＆LT; / P＆gt;中;
myClone2 = $（第2节）;
myClone2.appendTo（＃PLACEHOLDER2）触发（'创造'）。 }）;
＆LT; / SCRIPT＆GT;＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV数据角色=页面ID =第1页＆GT;
＆LT; DIV数据角色=内容＆GT;
＆LT; DIV数据角色=导航栏＆GT;
＆LT; UL＆GT;＆LT;李＆GT;＆LT;数据图标=家数据过渡=无ID =第1页的href =＃第1页＆GT;第1页＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT;数据图标=网格数据过渡=无ID =第2页的href =＃第2页＆GT;第2页＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =PLACEHOLDER1＆gt;页面1 LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV数据角色=页面ID =第2页＆GT;
＆LT; DIV数据角色=内容＆GT;
＆LT; DIV数据角色=导航栏＆GT;
＆LT; UL＆GT;＆LT;李＆GT;＆LT;数据图标=家数据过渡=无ID =第1页的href =＃第1页＆GT;第1页＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT;数据图标=网格数据过渡=无ID =第2页的href =＃第2页＆GT;第2页＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =PLACEHOLDER2＆gt;页面2'; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
您可以检查code你实际上追加前要附加的存在。
：在页面中的数据不会被添加随后的访问中这样 $（'＃第1页）。生活（pageshow'，函数（）
{
//警告（！）;
如果（$（本）.find（'p.appended_ code'）===长度0）{
VAR SECTION1 =＆LT; p =类appended_ code'＆GT;有的code第1页...＆LT; / P＆gt;中;
myClone1 = $（SECTION1）;
myClone1.appendTo（＃PLACEHOLDER1）触发（'创造'）。
}
}）;
请注意，我说的'appended_ code'类，你是追加，这是我用来检查追加code的存在选择段落标记。
- 更新 -
您也可以清理code位，如果你使用的是基于数字命名约定：
VAR pageData =新的Array（）;
pageData [1] =＆LT; p =类appended_class'＆GT;有的code第1页...＆LT; / P＆gt;中;
pageData [2] =＆LT; p =类appended_class'＆GT;有的code 2页...＆LT; / P＆gt;中;
$（'DIV [ID ^ =页]'）。生活（pagebeforeshow'，函数（）{
如果（$（本）.find（'p.appended_class'）。长度=== 0）{
。VAR PAGE_NUM = $（本）.attr（ID）取代（页面'，''）;
$（＃占位符+ PAGE_NUM）.append（pageData [PAGE_NUM]）触发（'创造'）。
}
}）;
请注意， DIV [ID ^ =页] 选择搜索带有以页开头的ID的div
下面是雅的jsfiddle： http://jsfiddle.net/S3wE6/1/
如果您希望将数据的初始加载我会建议让那里的数据追加到一个函数code线，把它在的$（document）被追加。就绪（）;
I would like to append some code to a page using jQuery/jQuery mobile, I would only like to append once not on each visit to the page.
** final edit **
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script>
//$(document).ready(function() // get error when I use this
$('#page1').live('pageshow', function ()
{
// alert("!");
var section1 = "<p>some code for page 1...</p>";
myClone1 = $(section1);
myClone1.appendTo("#placeholder1").trigger('create');
});
$('#page2').live('pageshow', function ()
{
// alert("!");
var section2 = "<p>some code for page 2...</p>";
myClone2 = $(section2);
myClone2.appendTo("#placeholder2").trigger('create');
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder1">Page 1</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder2">Page 2</div>
</div>
</div>
</div>
</body>
</html>
You can check for the existence of the code you are appending before actually appending. That way on subsequent visits to the page the data will not be added:
$('#page1').live('pageshow', function ()
{
// alert("!");
if ($(this).find('p.appended_code').length === 0) {
var section1 = "<p class='appended_code'>some code for page 1...</p>";
myClone1 = $(section1);
myClone1.appendTo("#placeholder1").trigger('create');
}
});
Note that I added the 'appended_code' class to the paragraph tag that you are appending and that is the selector I used to check for the existence of appended code.
--Update--
You can also clean-up the code a bit if you are using naming conventions based on numbers:
var pageData = new Array();
pageData[1] = "<p class='appended_class'>some code for page 1...</p>";
pageData[2] = "<p class='appended_class'>some code for page 2...</p>";
$('div[id^="page"]').live('pagebeforeshow', function () {
if ($(this).find('p.appended_class').length === 0) {
var page_num = $(this).attr('id').replace('page', '');
$("#placeholder" + page_num).append(pageData[page_num]).trigger('create');
}
});
Note that the div[id^="page"] selector searches for divs with an id that starts with "page"
Here is a jsfiddle for ya: http://jsfiddle.net/S3wE6/1/
If you want the data to be appended on the initial load I would recommend making the line of code where the data is appended into a function and calling it on $(document).ready();
这篇关于jQuery Mobile的附加HTML code的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
