久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

搜索
分享

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

 飛鷹飛龍飛天 2014-11-24
     目前Version 1.4.1,，這里只是做個(gè)摘要,，官方的Demos有很詳細(xì)的使用說明,。
http://demos./1.4.1/
http://api./

（1）引入
Html代碼  收藏代碼
  1. <!DOCTYPE html>  
  2.   
  3. <meta charset="UTF-8" />  
  4. <meta name="viewport" content="width=device-width, initial-scale=1" />  
  5.   
  6. <link rel="stylesheet" type="text/css" href="lib/jquery.mobile/jquery.mobile-1.4.1.min.css" />  
  7. <script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>  
  8. <script type="text/javascript" src="lib/jquery.mobile/jquery.mobile-1.4.1.min.js"></script>  


（2）基本構(gòu)造
單頁面
Html代碼  收藏代碼
  1. <div data-role="page">   
  2.   <div data-role="header">...</div>   
  3.   <div role="main" class="ui-content">...</div>   
  4.   <div data-role="footer">...</div>   
  5. </div>  

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

多頁面
Html代碼  收藏代碼
  1. <div data-role="page" id="first">  
  2.   <div data-role="header">...</div>   
  3.   <div role="main" class="ui-content">...</div>   
  4.   <div data-role="footer">...</div>   
  5. </div>  
  6. <div data-role="page" id="second">   
  7.   <div data-role="header">...</div>   
  8.   <div role="main" class="ui-content">...</div>   
  9.   <div data-role="footer">...</div>   
  10. </div>  

在早期版本中為了提高頁面跳轉(zhuǎn)的效率，在一個(gè)文件中定義多個(gè)頁面,，通過「href="#ID名"」頁面跳轉(zhuǎn),。默認(rèn)顯示文件中定義的第一個(gè)page，如果要自定義初期顯示其他page的話
Js代碼  收藏代碼
  1. if (document.location.hash == "")  
  2.      document.location.hash = "#second";  

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

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

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

Header
只有標(biāo)題
Html代碼  收藏代碼
  1. <div data-role="header">  
  2.     <h1>Title</h1>  
  3. </div>  


左按鈕
Html代碼  收藏代碼
  1. <div data-role="header" data-theme="b">  
  2.   <a href="#" class="ui-btn ui-btn-a ui-btn-left">Left</a>  
  3.   <h1>Title</h1>  
  4. </div>  


右按鈕
Html代碼  收藏代碼
  1. <div data-role="header" data-theme="b">  
  2.   <h1>Title</h1>  
  3.   <a href="#" class="ui-btn ui-btn-a ui-btn-right">Right</a>  
  4. </div>  

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

左右按鈕
Html代碼  收藏代碼
  1. <div data-role="header" data-theme="b">  
  2.   <a href="#" class="ui-btn ui-btn-a ui-btn-left">Left</a>  
  3.   <h1>Title</h1>  
  4.   <a href="#" class="ui-btn ui-btn-a ui-btn-right">Right</a>  
  5. </div>  


回退按鈕
Html代碼  收藏代碼
  1. <div data-role="header" data-add-back-btn="true" data-back-btn-text="Back">  
  2.     <h1>jQuery Mobile TIPS</h1>  
  3.     <a href="help.htmll" class="ui-btn ui-btn-a ui-btn-right">About</a>  
  4. </div>  

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

全局回退按鈕有效設(shè)置：
Js代碼  收藏代碼
  1. $(document).on('mobileinit', function() {  
  2.   $.mobile.toolbar.prototype.options.addBackBtn = true;  
  3.   $.mobile.toolbar.prototype.options.backBtnText = 'Back';  
  4. });  


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

（5）鏈接Link
Html代碼  收藏代碼
  1. <a >...</a>  


同一Domain下,，link默認(rèn)使用ajax加載。

data-transition="slide" 跳轉(zhuǎn)動(dòng)畫

默認(rèn)跳轉(zhuǎn)動(dòng)畫
Js代碼  收藏代碼
  1. $(document).bind("mobileinit", function(){   
  2.    $.mobile.defaultTransition = "slidedown";  
  3. })  


（6）按鈕Button
顯示一個(gè)按鈕,，有<button>,、<a>、<input>三種方式,。

對(duì)于<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 最小化

對(duì)于<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）左右滑動(dòng)菜單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>  

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購買等信息,，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請(qǐng)點(diǎn)擊一鍵舉報(bào),。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多