Xiaoqiang's HTML5 mobile development road (47) - jquery mobile basic page framework-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Xiaoqiang's HTML5 mobile development road (47) - jquery mobile basic page framework

黄舟

Feb 15, 2017 pm 01:35 PM

1. Single container page structure

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

Copy after login

Description: Set the browser's zoom width and level to make the width of the page the same as the screen width of the mobile device.

2. Multi-container page structure

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

Copy after login

Description: The data-add-back-btn attribute indicates whether to add a "back" button in the upper left corner of the container. The default value is false.

In addition, adding the data-rel attribute to the element can also implement rollback.

3. External page link switching

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

Copy after login

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

Copy after login

If you don’t want to open the page in ajax mode, add rel="external"

# to the link element ##4. Preloading and page caching

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

Copy after login

Using the page caching function will make the DOM content larger. Once the caching function is selected, it must be cleaned up in time.

Set the data-dom-cache of the page container to true. You can inject the content of the page into the document cache, or set a global attribute through js code. The code is as follows:

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

Copy after login

The above is the content of Xiaoqiang's HTML5 mobile development road (47) - the basic page framework of jquery mobile. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn