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>

代码效果展现：

但愿天天进步一点点^-^。以上，共勉