2010-11-22 5 views
1

Я создал простой пример из двух страниц: первая страница имеет вид списка, а вторая - только <h1>, однако при загрузке второй страницы теперь применяются стили ui это автоматически? Должен ли я называть что-то вручную или есть проблема с тем, как я выложил навигацию? Код ниже любой помощи, которую очень ценят.Unstyled (классы не применяются) Страницы jQuery Мобильная простая навигация

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

AFAIK это то, что он предназначен, чтобы сделать: когда вы ссылку на 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" 
Смежные вопросы