Unstyled (keine Klassen angewendet) Seiten jQuery Mobile Einfache Navigation

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

Frage

ich ein einfaches zwei Seite Beispiel erstellt habe, erste Seite hat eine Listenansicht und die zweiten nur ein <h1> jedoch, wenn die zweite Seite gibt es jetzt ui Stile automatisch auf sie angewandt geladen wird? Muss ich etwas manuell aufrufen oder ist es ein Problem mit, wie ich aus der Navigation gelegt habe? Code unten jede Hilfe sehr geschätzt.

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>
War es hilfreich?

Lösung

Das war eigentlich ein Know Bug und fixiert begehen https://github.com/ jquery / jquery-mobile / commit / 80d56e655bac8aa6205a0c1f5a9877493a5ced71

Andere Tipps

AFAIK das ist, was es konzipiert ist zu tun: Wenn Sie zu einer HTML-Seite verknüpfen sie den Körper als Inhalt fügt innerhalb und zwischen dem jQuery mobilen Kontext einer Kopf- und Fußzeile. Wenn Sie die volle Kontrolle über den HTML wollen, müssen Sie rel = „external“ in Ihre Links setzen sonst sind sie über AJAX geladen, für den Inhalt analysiert und dynamisch eingefügt.

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

Versuchen Sie es mit 

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

und 

href="second.html?" instead of href="second.html"
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top