jQuery Mobile演示

時間 2019-11-20

標籤 jquery mobile 演示欄目 JQuery 简体版

原文原文鏈接

jQuery Mobile主要特性：javascript

1.基於jQuery結構css

2.兼容絕大部分手機平臺html

3.輕量級的庫前端

4.模塊化結構java

5.HTML5標記驅動的配置，快速開發頁面，把對Web前端開發者的腳本能力需求降到最小化jquery

6.漸進加強原則，jQuery Mobile徹底採用漸進加強原則app

7.相應設計框架

8.強大的AJAX導航系統模塊化

9.易用性網站

10.支持觸摸和鼠標操做

11.統一的UI組件

12.強大的主題化框架

該演示項目的所需組件：

data-role="page"	定義頁面容器（構建多頁面時用到）
data-role="header"	定義頁面或標題欄（該屬性可選）
data-role="content"	定義內容主題包裝容器（該屬性可選）
data-role="footer"	定義頁腳欄（該屬性可選）
data-role="button"	行內按鈕： data-inline="true" 組合按鈕： data-role="controlgroup + data-type="horizontal\| vertical" 回退按鈕： 1.添加 data-auto-btn="true" 2.綁定mobileinit，將 addBackBtn設置爲true
data-icon="grid"	圖標組件

所需外部「材料」

device-width：表示讓內容擴展到屏幕的整個寬度

initial-scale：用來查看Web頁面的初始縮放百分比或縮放因數，值爲1，則顯示一個未縮放的文檔

代碼附件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta keywords="JavaScript">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>jQuery Mobile演示網站</title>
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script language="javascript" type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="pageone">
        <div data-role="header" data-theme="a">
            <h1>jQuery Mobile演示網站</h1>
        </div>
        <nav data-role="navbar">
            <ul>
                <li><a href="#home" data-icon="home">首頁</a></li>
                <li><a href="#information" data-rel="dialog" data-icon="grid">新聞</a></li>
                <li><a href="#calendar" data-rel="dialog" data-icon="star">日曆</a></li>
            </ul>
        </nav>
        <div data-role="content" style="color: grey; font-size: 0.9em; line-height: 25px;">
            <p style="text-align: center;color: black; font-size: 1.2em;">這是jQuery Mobile的首頁</p>
            <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
            <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
            <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
            <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
            <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
            <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
        </div>
        <div data-role="footer" data-position="fixed" data-theme="a">
            <h1>Copyright Web 前端開發技術與實踐</h1>
        </div>
    </div>
    <!-- 彈出對話框 -->
    <div data-role="page" id="information">
        <div data-role="header">
            <h1>新聞</h1>
        </div>
        <div data-role="content">
            <p>這是新聞列表</p>
            <p>其實也沒啥事，就是叫你進來瞧瞧。驚不驚喜！意不意外！啥也沒有，哈哈哈哈哈哈哈哈哈……</p>
            <p>其實也沒啥事，就是叫你進來瞧瞧。驚不驚喜！意不意外！啥也沒有，哈哈哈哈哈哈哈哈哈……</p>
            <p>其實也沒啥事，就是叫你進來瞧瞧。驚不驚喜！意不意外！啥也沒有，哈哈哈哈哈哈哈哈哈……</p>
            <p>其實也沒啥事，就是叫你進來瞧瞧。驚不驚喜！意不意外！啥也沒有，哈哈哈哈哈哈哈哈哈……</p>
            <p>其實也沒啥事，就是叫你進來瞧瞧。驚不驚喜！意不意外！啥也沒有，哈哈哈哈哈哈哈哈哈……</p>
            <p>其實也沒啥事，就是叫你進來瞧瞧。驚不驚喜！意不意外！啥也沒有，哈哈哈哈哈哈哈哈哈……</p>
        </div>
    </div>
    <!-- 彈出對話框 -->
    <div data-role="page" id="calendar">
        <div data-role="header">
            <h1>日曆</h1>
        </div>
        <div data-role="content">
            <p>這是日曆</p>
            <p>今天是2017年9月8號，禮拜五！禮拜五哦！</p>
            <p>明兒個禮拜六，就放假啦！高不高興！</p>
        </div>
    </div>
</body>
</html>

代碼效果展現：

但願天天進步一點點^-^。以上，共勉

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。