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

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

黄舟

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

Original

1630 people have browsed it

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

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

Copy after login

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

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