suchen

Heim >Web-Frontend >H5-Tutorial >Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (47) – JQuery Mobile Basic Page Framework

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

黄舟
黄舟Original
2017-02-15 13:35:541534Durchsuche

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>

Beschreibung: b62d660874315ce13494b0e1c375e418Stellen 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>

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 3499910bf9dac5ae3c52d5ede7383485-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>
<!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>

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>

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;
})


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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (46) – Wechselkursrechner [2]Nächster Artikel：Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (46) – Wechselkursrechner [2]

In Verbindung stehende Artikel

Mehr sehen