国产成人精品福利网站人,性欧美大战久久久久久久野外黑人,国产精品视频一区二区三区小说

Cordova 3.x 基礎(chǔ)（9）

2014.11.24

目前Version 1.4.1，這里只是做個摘要，官方的Demos有很詳細(xì)的使用說明。
http://demos.jquerymobile.com/1.4.1/
http://api.jquerymobile.com/

（1）引入

Html代碼

<!DOCTYPE html>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="lib/jquery.mobile/jquery.mobile-1.4.1.min.css" />
<script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile/jquery.mobile-1.4.1.min.js"></script>

（2）基本構(gòu)造
單頁面

Html代碼

<div data-role="page">
<div data-role="header">...</div>
<div role="main" class="ui-content">...</div>
<div data-role="footer">...</div>
</div>

***1.4之前主體部分使用「data-role="content"」

多頁面

Html代碼

<div data-role="page" id="first">
<div data-role="header">...</div>
<div role="main" class="ui-content">...</div>
<div data-role="footer">...</div>
</div>
<div data-role="page" id="second">
<div data-role="header">...</div>
<div role="main" class="ui-content">...</div>
<div data-role="footer">...</div>
</div>

在早期版本中為了提高頁面跳轉(zhuǎn)的效率，在一個文件中定義多個頁面，通過「href="#ID名"」頁面跳轉(zhuǎn)。默認(rèn)顯示文件中定義的第一個page，如果要自定義初期顯示其他page的話

Js代碼

if (document.location.hash == "")
document.location.hash = "#second";

但是這樣也就加重了HTML的load速度，所以現(xiàn)在基本都是1個文件1個頁面。

（3）主題Theme
除過一些特殊的Widget（比如ListView）需要特殊設(shè)置外，大部分Widget都可以通過data-theme來修改主題。1.4之前提供a、b、c、d、e五種主題，從1.4開始做了簡化。官方還提供了自定義主題的ThemeRoller for jQuery Mobile：http://themeroller.jquerymobile.com/

（4）Header/Footer
首先Header和Footer都不是必須元素，在需要的是時候添加即可。

Header
只有標(biāo)題

Html代碼

<div data-role="header">
<h1>Title</h1>
</div>

左按鈕

Html代碼

<div data-role="header" data-theme="b">
<a href="#" class="ui-btn ui-btn-a ui-btn-left">Left</a>
<h1>Title</h1>
</div>

右按鈕

Html代碼

<div data-role="header" data-theme="b">
<h1>Title</h1>
<a href="#" class="ui-btn ui-btn-a ui-btn-right">Right</a>
</div>

1.4之前按鈕是先左后右放置，跟代碼寫在什么地方?jīng)]有關(guān)系?，F(xiàn)在的版本希望class屬性明確指定位置。

左右按鈕

Html代碼

<div data-role="header" data-theme="b">
<a href="#" class="ui-btn ui-btn-a ui-btn-left">Left</a>
<h1>Title</h1>
<a href="#" class="ui-btn ui-btn-a ui-btn-right">Right</a>
</div>

回退按鈕

Html代碼

<div data-role="header" data-add-back-btn="true" data-back-btn-text="Back">
<h1>jQuery Mobile TIPS</h1>
<a href="help.htmll" class="ui-btn ui-btn-a ui-btn-right">About</a>
</div>

1.4之前回退按鈕需要通過<a>元素來實現(xiàn)。

全局回退按鈕有效設(shè)置：

Js代碼

$(document).on('mobileinit', function() {
$.mobile.toolbar.prototype.options.addBackBtn = true;
$.mobile.toolbar.prototype.options.backBtnText = 'Back';
});

data-position="fixed" 固定位置
data-fullscreen="true" 頁面Tap的時候隱藏
data-id屬性頁面跳轉(zhuǎn)的時候只會滑動content部分

（5）鏈接Link

Html代碼

<a 跳轉(zhuǎn)動畫

默認(rèn)跳轉(zhuǎn)動畫
Js代碼
1. $(document).bind("mobileinit", function(){
2. $.mobile.defaultTransition = "slidedown";
3. })
（6）按鈕Button
顯示一個按鈕，有<button>、<a>、<input>三種方式。

對于<button>和<a>
Html代碼
1. <button class="ui-btn">...</button>
2. <a href="#" class="ui-btn">...</a>
1.4以前使用「data-role="button"」

ui-btn-inline 緊湊
ui-corner-all 圓角
ui-shadow 陰影
ui-btn-* 變更主題
ui-mini 最小化

對于<input>
<input type="button" value="..." />
<input>稍微不同，需要通過data-xxxxx屬性來設(shè)置樣式。
data-inline、data-corners、data-shadow、data-theme、data-mini

按鈕組
Html代碼
1. <div data-role="controlgroup">
2. <button class="ui-btn">...</button>
3. <a href="index.html" class="ui-btn">...</a>
4. <input type="button" value="..." />
5. </div>
水平放置按鈕
Html代碼
1. <div data-role="controlgroup" data-type="horizontal">...</div>
(7)導(dǎo)航Navbar
Html代碼
1. <div data-role="navbar">
2. <ul>
3. <li><a href="#" data-icon="grid">Summary</a></li>
4. <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
5. <li><a href="#" data-icon="gear">Setup</a></li>
6. </ul>
7. </div>
（8）列表Listview

一般
Html代碼
1. <ul data-role="listview">
2. <li><a href="#">Acura</a></li>
3. <li><a href="#">Audi</a></li>
4. <li><a href="#">BMW</a></li>
5. <li><a href="#">Cadillac</a></li>
6. <li><a href="#">Ferrari</a></li>
7. </ul>
分組
Html代碼
1. <ul data-role="listview" data-inset="true">
2. <li data-role="list-divider">Mail</li>
3. <li><a href="#">Inbox</a></li>
4. <li><a href="#">Outbox</a></li>
5. <li data-role="list-divider">Contacts</li>
6. <li><a href="#">Friends</a></li>
7. <li><a href="#">Work</a></li>
8. </ul>
（9）左右滑動菜單Panel
Html代碼
1. <div data-role="page">
2. <div data-role="header" data-position="fixed">
3. <h1>Fixed header</h1>
4. <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
5. <a href="#add-form" data-icon="gear" data-iconpos="notext">Add</a>
6. </div>
7. <div role="main" class="ui-content jqm-content jqm-fullwidth">
8. //......
9. </div>
10. <div data-role="footer" data-position="fixed">
11. <h4>Fixed footer</h4>
12. </div>
13. <div data-role="panel" data-position-fixed="true" data-display="push" id="nav-panel">
14. //......
15. </div>
16. <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" id="add-form">
17. //......
18. </div>
19. </div>

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

打開APP，閱讀全文并永久保存查看更多類似文章

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区