Heim >Web-Frontend >H5-Tutorial >Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (40) – mehrere Möglichkeiten, die Header-Definition in jqMobi zu üben
Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (40) – mehrere Möglichkeiten, die Header-Definition in jqMobi zu üben
- 黄舟Original
- 2017-02-15 13:08:531832Durchsuche
1. Definieren Sie den globalen Header
Dieser Header ist der Standard-Header für alle Panels und muss innerhalb von 4d3cdd0d6096fc7d10c3f51eabfb6ad0 stehen, d. h. mit 0df675b05d45eefb94f26ba1d929e1e4 Innerhalb, das heißt, setzen Sie ein Header-Tag auf der gleichen Ebene wie 1a73dfa055a76c3606858f541f15b00f Fügen Sie dann ein Attribut data-header="custom_header"
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jqMobi</title> <link href="css/af.ui.css" rel="stylesheet" type="text/css"/> <link href="css/icons.css" rel="stylesheet" type="text/css"/> <script src="appframework.js" type="text/javascript"></script> <script src="ui/appframework.ui.js" type="text/javascript"></script> </head> <body> <p id="afui"> <p id="content"> <p id="home" data-header="custom_header"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </p> <p id="sketch"> <p>sketch</p> </p> </p> <header id="custom_header"> <a id="backButton" href="javascript:;" class="button" >Back</a> <h1>Single Page App</h1> </header> <p id="navbar"> <a href="#home" id='navbar_home' class='icon home'>home</a> <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a> <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a> </p> </p> </body> </html>
zu dem Bereich hinzu, der diesen Header benötigt. 3. Geben Sie jeden an Panel Benutzerdefinierter Header
definiert einen Header innerhalb des Panels, der angepasst werden muss. Dieser Header gehört derzeit nur zum Panel
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jqMobi</title> <link href="css/af.ui.css" rel="stylesheet" type="text/css"/> <link href="css/icons.css" rel="stylesheet" type="text/css"/> <script src="appframework.js" type="text/javascript"></script> <script src="ui/appframework.ui.js" type="text/javascript"></script> </head> <body> <p id="afui"> <p id="content"> <p id="home" class="panel"> <header> <a id="backButton" href="javascript:;" class="button" >Back</a> <h1>Single Page App</h1> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </p> <p id="sketch"> <p>sketch</p> </p> </p> <p id="navbar"> <a href="#home" id='navbar_home' class='icon home'>home</a> <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a> <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a> </p> </p> </body> </html>
4. Definieren Sie das Titelattribut für das entsprechende Tag, und das System generiert automatisch einen Header
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jqMobi</title> <link href="css/af.ui.css" rel="stylesheet" type="text/css"/> <link href="css/icons.css" rel="stylesheet" type="text/css"/> <script src="appframework.js" type="text/javascript"></script> <script src="ui/appframework.ui.js" type="text/javascript"></script> </head> <body> <p id="afui"> <p id="content"> <p id="home" title="首页" class="panel" selected="true" data-footer="custom_footer"> </p> <p id="about" title="关于我们" class="panel" data-footer="custom_footer"> </p> <header id="custom_header"> <h1>首页</h1> </header> <footer id="custom_footer"> <a href='#home' class='icon home'>首页</a> <a href='#about' class='icon info'>关于我们</a> </footer> <nav> <p class='title'>Home</p> <ul> <li><a class="icon home mini" href="#main">Home</a></li> </ul> </nav> </p> </p> </body> </html>
Das Obige ist der Inhalt von Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (40) – verschiedene Möglichkeiten, die Header-Definition in jqMobi zu üben. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). !
In Verbindung stehende Artikel
Mehr sehen- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen