人人IT網

人人IT網

當前位置: 主頁 > JAVA編程 > ANT >

jQuery Mobile筆記一

時間:2012-07-26 19:56來源:Internet 作者:Internet 點擊:
1、模板結構 1.1 jQuery Mobile單頁模板 <!DOCTYPE html>  <html>  <head


1、模板結構

1.1 jQuery Mobile單頁模板

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8">

<title>Page Template</title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> //user-scalable=no 禁用縮放

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<!--<script src="custom-srcipt-js"></script>-->  //自定義腳本位置

<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</head> 

<body> 

<div data-role="page">

<div data-role="header">

<h1>Page Header</h1>

</div>

<div data-role="content">

<p>你好</p>         //注意:html文件的編碼格式要为utf-8,否則有中文會亂碼

</div>

<div data-role="footer" data-position="fixed"//默認頁腳在內容之後,添加此句後定位到屏幕底部

<h4>Page Footer</h4>

</div>

<script type="text/javascript">

/*Page specific scripts here*/

</script>

</div>

</body>

</html>

1.2 多頁模板

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8">

<title>Multi Page Example</title> 

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

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script type="text/javascript">/* Shared scripts for all internal and ajax-loaded pages */</script>

<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</head> 

<body> 

<!-- First Page -->

<div data-role="page" id="home" data-title="Welcome">

<div data-role="header">

<h1>Multi-Page</h1>

</div>

<div data-role="content">

<a href="#contact-info" data-role="button">Contact Us</a>

</div>

<script type="text/javascript">   //多頁面文檔內部javascript

/* Page specific scripts here. */

</script>

</div>

<!-- Second Page -->

<div data-role="page" id="contact-info" data-title="Contacts">

<div data-role="header">

<h1>Contact Us</h1>

</div>

<div data-role="content">

Contact information...

</div>

</div>

(1)每個頁面必須包含唯一id

(2)最初顯示多個頁面時,只有第一個頁面得到增強並顯示

(3)鏈接到一個內部頁面時,必須通過頁面id來引用,href="#contact",載入頁面的地址multi-page.html#contact

(4)多頁面文檔內部的javascript不能被其他頁面訪問

(5)父文檔head標簽內聲明的所有腳本,都可以被內部頁面和通過Ajax載入的頁面訪問

2、頁面切換和過度

2.1 切換分類

(1)一個多頁文檔中,一個內部頁到另一內部頁(Ajax導航)

根據#id <a href="#next">

(2)同一個域範圍內,一個單頁文檔切換到另一單頁文檔(Ajax導航)

<a href="otherDocument.html">Go to next page</a>

3)當連接到一個多頁面文檔時,必須为其鏈接添加rel="external"HTTP

<a href="multi-page.html" rel="external">Home</a>

(4)外部絕對地址,連接到另一個域(HTTP)

<a href="www.mobileweb.com" data-rel="external"></a>

<a href="www.mobileweb.com" target="_blank"></a>

(5)打開dailog

<a href="confirmtion.html" data-rel="dialog">Open Dialog</a>

<a href="confirmtion.html" data-role="dialog">Open Dialog</a>

(6)返回到上一頁面

<a href="back.html" data-direction="reverse">Back</a>

(7)移動應用特殊鏈接,URI

電話 

<a href="tel:+1800229933">Call us free!</a>

Video and VoIP Calls  

<a href="facetime:101010">Call me using Facetime</a>

<a href="skype:skype_user?call">Call us using Skype</a>

Email

<a href="mailto:info@mobilexweb.com">Mail us</a>

<a href="mailto:info@mobilexweb.com?subject=Contact%20from%20mobile">Mail us</a>

<a href="mailto:info@mobilexweb.com?subject=Contact&body=This%20is%20the%20body">Mail us</a>

2.2 頁面間過度

<a href="otherDocument.html" data-transition="slide">Go to next page</a>

slide

slideup

slidedown

pop

fade

flip

The default right-to-left animation.

Bottom-to-top animation, mostly used for modal pages.

Top-to-bottom animation.

The new page will grow from a small point in the middle to a full-screen page.

A cross-fade animation between old and new pages.

A 2D or 3D rotation animation. 3D is available only on some devices, such as iOS

devices. On other devices, such as those that are Android-based, this transition

renders a 2D rotation that may not be the effect you really want.

3toolbar 工具條——使用頁眉或頁腳

3.1位置模式

1)默認模式(DefaultInline mode

當頁面content內容超過一屏時,滾動頁面時,頁眉和頁腳將隱藏。

<div data-role="header">

<h1>Default</h1>

</div>

2)固定模式(Fixed

<div data-role="header"  data-position="fixed">

<h1>Fixed</h1>

</div>

<div data-role="footer"  data-position="fixed">

</div>

頁眉和頁腳位於頂部和底部,位置不變,否則當內容較少是,頁腳緊隨內容之後顯示

3)全屏模式(FullScreen)适用於瀏覽圖片,電子書應用

<div data-role="page"  data-fullscreen="true">

<div data-role="header"  data-position="fixed">

<h1>Fixed</h1>

</div>

<div data-role="footer"  data-position="fixed">

</div>

</div>

頁眉和頁腳基於響應來出現和消失

3.2 添加按鈕(通用於頁眉和頁腳)

1)只帶有文本按鈕

<a href="#">Done</a>

2)只帶有圖標的按鈕

<a href="#" data-icon="plus" data-iconpos="notext"></a>

3)既有文本又有圖標的按鈕

<a href="#" data-icon="plus" >Done</a>

3.3頁眉

1)修改按鈕位置,默認左側對齊(class="ui-btn-left"),可修改到右側對齊

<a href="#" data-icon="plus" class="ui-btn-right">Done</a>

2)添加回退按鈕

a)在頁面容器添加data-auto-back-btn="true",为某個特定頁面添加回退按鈕

<div data-role="page" data-auto-back-btn="true" data-back-btn-text="Pervious" data-back-btn-theme="e">

b)在绑定mobileinit選項時,全局启動回退按鈕

$(document).bind('mobileinit',function(){

$.mobile.page.prototype.option.addBackBtn=true;

$.mobile.page.prototype.option.backBtnText="Previous";   //回退按鈕顯示的文字

$.mobile.page.prototype.option.backBtnTheme="b";

});

如果在全局启用了回退按鈕,可通過在頁面頁眉中添加data-auto-back-btn="false"禁用特定頁面回退按鈕

c)回退鏈接

<a href="home.html" data-rel="back" data-role="button"> Go Back</a>

3.4 頁腳

(1)添加永久導航條

<div data-role="footer" data-id="main" data-position="fixed" data-theme="b"> //創建永久導航條,避免頁面轉換期間閃爍,需要唯一data-id="main"

<div data-role="navbar"> //標記为導航條

<ul>

<li><a href="#" data-icon="star" class="ui-btn-active ui-state-persist">天氣</a></li>    //ui-btn-active默認選中項,ui-state-persist保持固定

<li><a href="#" data-icon="info" class="ui-btn-inactive ui-state-persist">趨勢</a></li>   //ui-btn-active默認未選中項

<li><a href="setup.html" data-icon="gear" class="ui-btn-inactive ui-state-persist">城市</a></li>

<li><a href="#exit" data-icon="delete" data-rel="dialog" data-transition="pop" class="ui-btn-inactive ui-state-persist">退出</a></li>

</ul>

</div>

</div>

(2)帶自定義圖標導航條

<!-- tab bar with custom icons -->

<div data-role="footer" class="ui-navbar-custom" data-position="fixed">

<div data-role="navbar" class="ui-navbar-custom">

<ul>

<li><a href="#" id="home" data-icon="custom">Home</a></li>

<li><a href="#" id="movies" data-icon="custom" class="ui-btn-active">Movies</a></li>

<li><a href="#" id="theatres" data-icon="custom">Theatres</a></li>

</ul>

</div>

</div>

<style>

.ui-navbar-custom .ui-btn .ui-btn-inner { font-size: 11px!important; padding-top: 24px!important; padding-bottom: 0px!important; }

.ui-navbar-custom .ui-btn .ui-icon { width: 30px!important; height: 20px!important; margin-left: -15px!important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }

#home .ui-icon { background:  url(../images/53-house-w.png) 50% 50% no-repeat; background-size: 22px 20px; }

#movies .ui-icon { background:  url(../images/107-widescreen-w.png) 50% 50% no-repeat; background-size: 25px 17px; }

#theatres .ui-icon { background:  url(../images/15-tags-w.png) 50% 50% no-repeat; background-size: 20px 20px; }

</style>

4Main roles available in jQuery Mobile 1.0          

data-role =""   

Role 

    Description

page 

header 

content

footer 

navbar

button

controlgroup

collapsible

collapsible-set

fieldcontain

listview

dialog

slider 

nojs

Defines a page, the unit that jQuery Mobile uses to show content

Header of a page

Content of a page

Footer of a page

Defines a navigation bar, typically inside a header

Renders a visual button

Renders a component 

Collapsible panel of content inside a page

 

Group of collapsible panels (accordion)

Container for form fields

Content of multiple items as a list

Dialog page

Visual slider for Boolean values

Element that will be hidden on jQuery Mobiles compatible browsers

5、主題(data-theme

Letter             Description                                                                       Color in the default theme

a           Highest level of visual priority (default on toolbars)           black

b           Secondary level of visual priority                                            blue

c           Baseline level (default swatch for most situations)            silver

d           Alternate secondary level                                                         gray

e           Accent                                                                                           yellow


         

 

 

 

 


From:CSDN
頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
發表評論
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
評價:
表情:
驗證碼:點擊我更換圖片
欄目列表
推薦內容