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开发1-基本框架_第1张图片

 jQuery Mobile新增加的tag属性

Component HTML5 data-* attribute
Header, Footer toolbars

Content body
Buttons data-icon="info">Button
Grouped buttons
Inline buttons
Form element (Select menu)



Basic List views
Dialogs Open dialog
data-rel="dialog" data-transition="pop">Open dialog
Transitions

 

一、jQuery Mobile开发mobile web page Structure

单页面框架

DOCTYPE html>
<html>
<head>
<title>jQuery Mobile web templatetitle>
<meta name="viewport" content="width=device-width, initial-scale=1">   
<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">   
    <div data-role="header">
        <h1>Page Titleh1>
    div>
    
    <div data-role="content">
        <p>Page content goes here.p>
    div>
    
    <div data-role="footer">
        <h4>Page Footerh4>
    div>
    
div>
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 templatetitle> 
    <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" id="one">
    <div data-role="header">
        <h1>Multi-pageh1>
    div>

    <div data-role="content" >   
        <h2>Oneh2>        
        <p>I have an <code>idcode> 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>idcode> of the page you want to show. For example, to <a href="#two" >linka> to the page with an <code>idcode> 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>    
        <p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)a>p>
    div>
    
    <div data-role="footer" data-theme="d">
        <h4>Page Footerh4>
    div>
div>


<div data-role="page" id="two" data-theme="a">
    <div data-role="header">
        <h1>Twoh1>
    div>

    <div data-role="content" data-theme="a">    
        <h2>Twoh2>
        <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-themecode> 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>
    
    <div data-role="footer">
        <h4>Page Footerh4>
    div>
div>


<div data-role="page" id="popup">
    <div data-role="header" data-theme="e">
        <h1>Dialogh1>
    div>

    <div data-role="content" data-theme="d">    
        <h2>Popuph2>
        <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>
    
    <div data-role="footer">
        <h4>Page Footerh4>
    div>
div>
body>
html>

 

三、页面主题——theme

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

jQuery Mobile开发1-基本框架_第2张图片

其他主题如下图

jQuery Mobile开发1-基本框架_第3张图片

四、页面过渡

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

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

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

 

你可能感兴趣的:(jQuery Mobile开发1-基本框架)