jQuery Mobile开发1-基本框架

HTML 页眉部分加载三个重要的 jQuery Mobile 组件：

jQuery Core 库 — 核心 jQuery 库
jQuery Mobile 库 — jQuery 框架特定于移动的部分
jQuery Mobile CSS — 定义核心 jQuery Mobile UI 元素的 CSS，它定义过渡和不同的 UI 小部件，比如滑块和按钮，大量使用 Webkit 变形和动画。
jQuery Mobile theme CSS — 可选项

$.mobile and supported methods and events

jQuery Mobile新增加的tag属性

Component	HTML5 data-* attribute
Header, Footer toolbars	<div data-role="header"> <div data-role="footer">
Content body	<div data-role="content">
Buttons	<a href="index.html" data-role="button" data-icon="info">Button</a>
Grouped buttons	<div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Hell Yeah</a> </div>
Inline buttons	<div data-inline="true"> <a href="index.html" data-role="button">Foo</a> <a href="index.html" data-role="button" data-theme="b">Bar</a> </div>
Form element (Select menu)	<div data-role="fieldcontain"> <label for="select-options" class="select">Choose an option:</label> <select name="select-options" id="select-options"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option2">Option 3</option> </select> </div>
Basic List views	<ul data-role="listview"> <li><a href="index.html">One</a></li> <li><a href="index.html">Two</a></li> <li><a href="index.html">Three</a></li> </ul>
Dialogs	<a href="foo.html" data-rel="dialog">Open dialog</a> <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
Transitions	<a href="index.html" data-transition="pop" data-back="true">

一、jQuery Mobile开发mobile web page Structure

单页面框架

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile web template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">   <!--responsive web design-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>

<body>
<div data-role="page">   <!-- page 表示本网页的框架为页面框架 -->
    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->
    
    <div data-role="content">
        <p>Page content goes here.</p>
    </div><!-- /content -->
    
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /header -->
    
</div><!-- /page -->
</body>
</html>

其中：

1.<meta name="viewport" content="width=device-width, initial-scale=1">

用于自适应页面，即responsive web design

2. data-role

是jQuery Mobile的特征tag ，这里 data-role="page" 表示本网页是页面属性

二、多页面框架——多个本地页面

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Multi-page template</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head> 
    
<body> 
<!-- Start of first page: #one -->
<div data-role="page" id="one">
    <div data-role="header">
        <h1>Multi-page</h1>
    </div><!-- /header -->

    <div data-role="content" >   
        <h2>One</h2>        
        <p>I have an <code>id</code> of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
        <p>You link to internal pages by referring to the <code>id</code> of the page you want to show. For example, to <a href="#two" >link</a> to the page with an <code>id</code> of "two", my link would have a <code>href="#two"</code> in the code.</p>    
        <h3>Show internal pages:</h3>
        <p><a href="#two" data-role="button">Show page "two"</a></p>    <!-- 使用锚点（Anchor）#two跳转到inner page 2 -->
        <p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
    </div><!-- /content -->
    
    <div data-role="footer" data-theme="d">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page one -->

<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">
    <div data-role="header">
        <h1>Two</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">    
        <h2>Two</h2>
        <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>    
        <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>    
        <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p>    
    </div><!-- /content -->
    
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page two -->

<!-- Start of third page: #popup -->
<div data-role="page" id="popup">
    <div data-role="header" data-theme="e">
        <h1>Dialog</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="d">    
        <h2>Popup</h2>
        <p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>        
        <p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>    
    </div><!-- /content -->
    
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page popup -->
</body>
</html>

三、页面主题——theme

在data-theme 中定义，如<div data-role="content" data-theme="a">定义了inner page是用的主题a
默认主题如下图

其他主题如下图

四、页面过渡

jQuery Mobile 支持基于 CSS 的页面过渡（受到 jQtouch 的启发），页面过渡在导航到一个新页面和返回上一个页面时应用。这些过渡包括：

幻灯片—— 提供一个水平过渡
向上滑动和向下滑动—— 提供上下屏幕的过渡
弹出—— 提供一个爆炸式过渡类型
淡出—— 提供一个淡出过渡
翻页—— 提供一个翻页过渡

可以以两种方式添加页面过渡：

向链接添加一个数据过渡属性，使用 <a href="index.html" data-transition="pop" data-back="true">
在静态页面上使用 data-transition。
通过编程方式，使用 $.mobile.changePage("pendingtasks.html", "slideup");
处理动态页面时使用编程方法。

转载于:https://www.cnblogs.com/JoannaQ/archive/2012/08/26/2657208.html

jQuery Mobile开发1-基本框架

猜你喜欢