Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (47) – JQuery Mobile Basic Page Framework-H5-Tutorial-php.cn

Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (47) – JQuery Mobile Basic Page Framework

黄舟

Freigeben： 2017-02-15 13:35:54

Original

1531 Leute haben es durchsucht

1. Einzelcontainer-Seitenstruktur

<!DOCTYPE html> 
<html>
<head>
<title>Jquery mobile 基本页面框架</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
	<p data-role="page">
    	<p data-role="header">
        	<h1>标题</h1>
        </p>
        <p data-role="content">
        	<p>内容部分</p>
        </p>
        <p data-role="footer">
        	<h4>页脚</h4>
        </p>
    </p>
</body>
</html>

Nach dem Login kopieren

Beschreibung: Stellen Sie die Zoombreite und -stufe des Browsers so ein, dass die Breite der Seite mit der Bildschirmbreite des Mobilgeräts übereinstimmt.

2. Seitenstruktur mit mehreren Containern

<!DOCTYPE html> 
<html>
<head>
<title>Jquery mobile 基本页面框架</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
	<p data-role="page" id="p1">
    	<p data-role="header">
        	<h1>标题</h1>
        </p>
        <p data-role="content">
        	<p>内容部分</p>
            <a href="#p2">下一页</a>
        </p>
        <p data-role="footer">
        	<h4>页脚</h4>
        </p>
    </p>
   	<p data-role="page" id="p2" data-add-back-btn="true">
    	<p data-role="header">
        	<h1>标题</h1>
        </p>
        <p data-role="content">
        	<p>内容部分</p>
        </p>
        <p data-role="footer">
        	<h4>页脚</h4>
        </p>
    </p>
</body>
</html>

Nach dem Login kopieren

Beschreibung: Das data-add-back-btn-Attribut gibt an, ob in der oberen linken Ecke eine Schaltfläche „Zurück“ hinzugefügt werden soll des Containers ist der Standardwert false.

Darüber hinaus kann durch Hinzufügen des data-rel-Attributs zum -Element auch ein Rollback erreicht werden.

3. Wechsel der externen Seitenverknüpfung

<!DOCTYPE html> 
<html>
<head>
<title>Jquery mobile 基本页面框架</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
	<p data-role="page" id="p1">
    	<p data-role="header">
        	<h1>标题</h1>
        </p>
        <p data-role="content">
        	<p>内容部分</p>
            <a href="#p2">下一页</a>
        </p>
        <p data-role="footer">
        	<h4>页脚</h4>
        </p>
    </p>
   	<p data-role="page" id="p2" data-add-back-btn="true">
    	<p data-role="header">
        	<h1>标题</h1>
        </p>
        <p data-role="content">
        	<em style="float:right;padding-right:5px">
            	<a href="about.htm">访问外部页面</a>
            </em>
        </p>
        <p data-role="footer">
        	<h4>页脚</h4>
        </p>
    </p>
</body>
</html>

Nach dem Login kopieren

<!DOCTYPE html> 
<html>
<head>
<title>Jquery mobile 基本页面框架</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
	<p data-role="page" data-add-back-btn="true">
    	<p data-role="header">
        	<h1>外部页面</h1>
        </p>
        <p data-role="content">
        	你好，感谢你的关注
        </p>
        <p data-role="footer">
        	<h1></h1>
        </p>
    </p>
</body>
</html>

Nach dem Login kopieren

Wenn Sie die Seite nicht im Ajax-Modus öffnen möchten, fügen Sie rel= hinzu „extern“ zum Linkelement „

4. Vorladen und Seiten-Caching

        <p data-role="content">
        	<em style="float:right;padding-right:5px">
            	<a href="about.htm" data-prefetch="true">访问外部页面</a>
            </em>
        </p>

Nach dem Login kopieren

Durch die Verwendung der Seiten-Caching-Funktion wird der DOM-Inhalt größer. Sobald die Caching-Funktion ausgewählt ist, bereinigen Sie rechtzeitig.

Setzen Sie den Daten-Dom-Cache des Seitencontainers auf true. Sie können den Inhalt der Seite in den Dokument-Cache einfügen oder ein globales Attribut über js-Code festlegen. Der Code lautet wie folgt:

$(function(){
    $.mobile.page.prototype.options.domCache = true;
})

Nach dem Login kopieren

Das Obige ist der Inhalt von Xiaoqiangs HTML5-Mobile-Entwicklungsstraße (47) – dem grundlegenden Seiten-Framework von jquery Mobile. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (). www.php.cn)!