0

我想将动态生成的页面附加到正文，但我在控制台中没有看到任何错误，也没有在 UI 上看到动态页面。我错过了什么？一旦我得到这些，我也有多个页面，当我通过列表项导航到这些页面时，需要生成所有这些页面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
 <title>Appstore</title>
 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/>



<script src="js/chaseappstore.js"></script>




<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"
    />
<link rel="stylesheet" href="css/chaseappstore.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">     </script>

<script>
if(/dy.htm/.test(window.location.href))
{
alert("h");

pg=CreatePageheader();
alert(pg);
$('body').append(pg);
alert("appended");

}


function CreatePageheader()
{
 alert('hh');
 pageDOM="<div id='LatestBuilds' data-role='page' data-transition='slide'   data-        cache='never' data-theme='aa'><div class='mFuturePageHeader chromeBar acb'  data-    role='header' data-tap-toggle='false' data-id='header' data-position='fixed'><table><tbody><tr><td class='left'><div  class='hidden' style=''><a  href='options.htm' data-rel='dialog' data-transition='slidedown'><img  src='images/logout_60x60_tp.png' class='hidden logoutButtonA' /></a></div><div class='hiddenshow'  style=''><a  href='javascript:ref()' data-rel='dialog' data-transition='slidedown'><img  src='images/Home.png' class=' hiddenshow logoutButtonA' /></a></div></td><td class='center mFuturePageHeaderTitle'>Chase Appstore - Latest Builds</td><td class='right'></td></tr></tbody></table></div>"
 pageDOM+="<div data-role='content'><div data-role='collapsible'data-theme='a' data-collapsed='false' data-content-theme='d'><h2>iPhone/iPod</h2><ul data-role='listview' data-filter='true' data-inset='false' id='iPhoneCIG'></ul></div><div data-role='collapsible' data-theme='a' data-collapsed='false' data-content-theme='d'><h2>iPad</h2><ul data-role='listview' data-filter='true'  data-inset='false' id='iPadCIG'></ul></div><div data-role='collapsible'data-theme='a' data-collapsed='false' data-content-theme='d'><h2>Windows</h2><ul data-role='listview' data-filter='true' data-inset='false' id='WindowsCIG'></ul></div><div data-role='collapsible' data-theme='a' data-collapsed='false' data-content-theme='d'><h2>Android</h2><ul data-role='listview' data-filter='true'  data-inset='false' id='AndroidCIG' ></ul></div></div>"
  pageDOM+="<div data-role='footer' data-id='footer' data-theme='a'  data-position='fixed'><div data-role='navbar'><ul><li><a href='#LatestProdBuilds'>Prod<br/>Links</a></li><li><a href='#LatestBuildsTSS'>TSS/<br/>WSS</a></li><li><a href='#LatestBuildsUR'><br/>CARD</a></li><li><a href='#' class='ui-btn-active ui-state-persist'>CIG/<br/>MEP</a></li><li><a href='#AllBuilds'>All<br/>Builds</a></li></ul></div></div></div>"



 return pageDOM;
} 



 </script>



</head>

<body class="body">  </body>




</html>
4

1 回答 1

0

Omar 很接近，之后您需要做的就是在将页面附加到页面容器后更改页面。此外，请仔细查看您的代码，记住使用 var 作为变量，并且在创建页面时您可能需要考虑使用对象而不是超长字符串。也许通过JSLint运行你的 javascript 。

试一试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
 <title>Appstore</title>
 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/>



<script src="js/chaseappstore.js"></script>




<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"
    />
<link rel="stylesheet" href="css/chaseappstore.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">     </script>

<script>

function load() {
    var pg = CreatePageheader();
    $.mobile.pageContainer.append(pg);
    $.mobile.changePage('#LatestBuilds');
}


function CreatePageheader()
{
 var pageDOM="<div id='LatestBuilds' data-role='page' data-transition='slide'   data-        cache='never' data-theme='aa'><div class='mFuturePageHeader chromeBar acb'  data-    role='header' data-tap-toggle='false' data-id='header' data-position='fixed'><table><tbody><tr><td class='left'><div  class='hidden' style=''><a  href='options.htm' data-rel='dialog' data-transition='slidedown'><img  src='images/logout_60x60_tp.png' class='hidden logoutButtonA' /></a></div><div class='hiddenshow'  style=''><a  href='javascript:ref()' data-rel='dialog' data-transition='slidedown'><img  src='images/Home.png' class=' hiddenshow logoutButtonA' /></a></div></td><td class='center mFuturePageHeaderTitle'>Chase Appstore - Latest Builds</td><td class='right'></td></tr></tbody></table></div>"
 pageDOM+="<div data-role='content'><div data-role='collapsible'data-theme='a' data-collapsed='false' data-content-theme='d'><h2>iPhone/iPod</h2><ul data-role='listview' data-filter='true' data-inset='false' id='iPhoneCIG'></ul></div><div data-role='collapsible' data-theme='a' data-collapsed='false' data-content-theme='d'><h2>iPad</h2><ul data-role='listview' data-filter='true'  data-inset='false' id='iPadCIG'></ul></div><div data-role='collapsible'data-theme='a' data-collapsed='false' data-content-theme='d'><h2>Windows</h2><ul data-role='listview' data-filter='true' data-inset='false' id='WindowsCIG'></ul></div><div data-role='collapsible' data-theme='a' data-collapsed='false' data-content-theme='d'><h2>Android</h2><ul data-role='listview' data-filter='true'  data-inset='false' id='AndroidCIG' ></ul></div></div>"
  pageDOM+="<div data-role='footer' data-id='footer' data-theme='a'  data-position='fixed'><div data-role='navbar'><ul><li><a href='#LatestProdBuilds'>Prod<br/>Links</a></li><li><a href='#LatestBuildsTSS'>TSS/<br/>WSS</a></li><li><a href='#LatestBuildsUR'><br/>CARD</a></li><li><a href='#' class='ui-btn-active ui-state-persist'>CIG/<br/>MEP</a></li><li><a href='#AllBuilds'>All<br/>Builds</a></li></ul></div></div></div>"



 return pageDOM;
} 



 </script>



</head>

<body class="body" onload="load()">  </body>




</html>
于 2013-08-20T02:49:23.083 回答