Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (40) – mehrere Möglichkeiten, die Header-Definition in jqMobi zu üben-H5-Tutorial-php.cn

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (40) – mehrere Möglichkeiten, die Header-Definition in jqMobi zu üben

黄舟

Freigeben： 2017-02-15 13:08:53

Original

1830 Leute haben es durchsucht

1. Definieren Sie den globalen Header

Dieser Header ist der Standard-Header für alle Panels und muss innerhalb von

stehen, d. h. mit

Zum Beispiel:

<!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">
    	<header id="header">
                <a id="backButton" href="javascript:;" class="button" >Back</a>
                <h1>Single Page App</h1>
        </header>
        <p id="content">
            <p id="home">
                <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=&#39;navbar_home&#39; class=&#39;icon home&#39;>home</a>
                <a href="#sketch" id=&#39;navbar_pencil&#39; class=&#39;icon pencil&#39;>Sketch</a>
                <a href="#picture" id=&#39;navbar_picture&#39; class=&#39;icon picture&#39;>Picture</a>
        </p>
    </p>
</body>
</html>

Nach dem Login kopieren

Laufeffekt

2. Panel führt den Header-Tag

in < ein. p id="afui" > Innerhalb, das heißt, setzen Sie ein Header-Tag auf der gleichen Ebene wie

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=&#39;navbar_home&#39; class=&#39;icon home&#39;>home</a>
                <a href="#sketch" id=&#39;navbar_pencil&#39; class=&#39;icon pencil&#39;>Sketch</a>
                <a href="#picture" id=&#39;navbar_picture&#39; class=&#39;icon picture&#39;>Picture</a>
        </p>
    </p>
</body>
</html>

Nach dem Login kopieren

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=&#39;navbar_home&#39; class=&#39;icon home&#39;>home</a>
                <a href="#sketch" id=&#39;navbar_pencil&#39; class=&#39;icon pencil&#39;>Sketch</a>
                <a href="#picture" id=&#39;navbar_picture&#39; class=&#39;icon picture&#39;>Picture</a>
        </p>
    </p>
</body>
</html>

Nach dem Login kopieren

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=&#39;#home&#39; class=&#39;icon home&#39;>首页</a>
                <a href=&#39;#about&#39; class=&#39;icon info&#39;>关于我们</a>
            </footer>
            <nav>
            	<p class=&#39;title&#39;>Home</p>
                <ul>
                	<li><a class="icon home mini" href="#main">Home</a></li>
                </ul>
            </nav>
        </p>
    </p>
</body>
</html>

Nach dem Login kopieren

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). !