2010-11-22 25 views
1

我创建了一个简单的两页的例子,第一页有一个列表视图和第二只是一个<h1>,但是当第二页被载入现在有适用于UI风格它会自动?我是否必须手动打电话或者如何布置导航时遇到问题?代码下面的任何帮助非常赞赏。无样式(无类应用)的页面jQuery Mobile的简单的导航

的index.html

<!doctype html> 
<html lang="en" class="no-js"> 
<head> 
<meta charset="utf-8"> 

<title>Page One</title> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
</head> 
<body> 
<div data-role="page" data-theme="a" id="second"> 
<div data-role="header"> 
<h1 id="logo" class="ui-title">Header</h1> 
</div> 

<div data-role="content"> 
<ul data-role="listview" data-inset="true" data-theme="c" data-split-theme="d"> 
<li class="ui-li-has-thumb"> 
<img class="ui-li-thumb" src="http://jquerymobile.com/demos/1.0a2/docs/lists/images/album-bb.jpg" /> 
<h3 class="ui-li-heading">FooBar</h3> 
<p class="ui-li-desc">Progress</p> 
<a href="second.html"></a> 
</li> 
<li class="ui-li-has-thumb"> 
<img class="ui-li-thumb" src="http://jquerymobile.com/demos/1.0a2/docs/lists/images/album-bb.jpg" /> 
<h3 class="ui-li-heading">FooBar</h3> 
<p class="ui-li-desc">Progress</p> 
<a href="second.html"></a> 
</li> 
</ul> 
</div> 

<div data-role="footer" data-position="fixed"> 
<div data-role="navbar" class="ui-glyphish"> 
<ul> 
<li><a class="ui-btn-active" id="quickfind" href="index.html" data-icon="custom">QuickFind</a></li> 
<li><a id="lessons" href="lessons.html&ui-page=listview-1" data-icon="custom" data-theme="a">Lessons</a></li> 
<li><a id="progress" href="#" data-icon="custom" data-theme="a">Progress</a></li> 
<li><a id="favs" href="#" data-icon="custom" data-theme="a">Favs</a></li> 
</ul> 
</div> 
</div> 
</div> 
</body> 
</html> 

second.html

<!doctype html> 
<html lang="en" class="no-js"> 
<head> 
<meta charset="utf-8"> 

<title>Page Two</title> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1 id="logo" class="ui-title">Second</h1> 
</div> 

<div data-role="content"> 
<h1>Hello Page Two</h1> 
</div> 

<div data-role="footer" data-position="fixed"> 
<div data-role="navbar" class="ui-glyphish"> 
<ul> 
<li><a class="ui-btn-active" id="quickfind" href="index.html" data-icon="custom">QuickFind</a></li> 
<li><a id="lessons" href="lessons.html&ui-page=listview-1" data-icon="custom" data-theme="a">Lessons</a></li> 
<li><a id="progress" href="#" data-icon="custom" data-theme="a">Progress</a></li> 
<li><a id="favs" href="#" data-icon="custom" data-theme="a">Favs</a></li> 
</ul> 
</div> 
</div> 
</div> 
</body> 
</html> 

回答

0

据我所知,这就是它的设计要做到:当你链接到它插入它的HTML页面的机身为内容中和之间的jQuery页眉和页脚的移动上下文。如果你想完全控制HTML,你必须在你的链接中放置rel =“external”,否则它们通过AJAX加载,解析内容并动态插入。

http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-pages.html

+0

当页面插入问题。不调用page()函数来启动新内容作为页面... – Gcoop 2010-11-30 13:29:13

0

尝试用

href="index.html?" instead of href="index.html" 

href="second.html?" instead of href="second.html"