Нестилизованные (без применения классов) Страницы jQuery Mobile Простая навигация

StackOverflow https://stackoverflow.com/questions/4246488

Вопрос

Я создал простой двухстраничный пример: первая страница имеет представление списка, а вторая - просто <h1>, однако, когда загружается вторая страница, к ней теперь автоматически применяются стили пользовательского интерфейса?Нужно ли мне что-то вызывать вручную или возникла проблема с тем, как я расположил навигацию?Код ниже, любая помощь очень ценится.

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>

второй.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>
Это было полезно?

Решение

На самом деле это была известная ошибка, исправленная в коммите. https://github.com/jquery/jquery-mobile/commit/80d56e655bac8aa6205a0c1f5a9877493a5ced71

Другие советы

AFAIK Это то, что он предназначен для того, чтобы сделать: когда вы ссылаетесь на страницу HTML, он вставляет свое тело в качестве контента внутри и между мобильным контекстом jQuery of the jQuery. Если вы хотите полный контроль HTML, вы должны поставить Rol = «внешний» в ваших ссылках, в противном случае они загружаются через AJAX, анализируют содержимое и вставлены динамически.

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

Постараться с 

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

а также

href="second.html?" instead of href="second.html"
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top