jquery-mobile基礎(chǔ)屬性與用法詳解

更新時(shí)間：2016年11月23日 14:23:28 作者：栁羅風(fēng)塵

這篇文章主要介紹了jquery-mobile基礎(chǔ)屬性與用法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery-mobile常用屬性功能與具體使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jquery-mobile基礎(chǔ)屬性與用法。分享給大家供大家參考，具體如下：

寫在前面

本文是根據(jù)w3c 學(xué)習(xí)軌跡，自己研習(xí)過程中記錄下的筆記，只供自己學(xué)習(xí)軌跡記錄之用，不喜勿噴。

0. 引入庫

引入對應(yīng)的文件：

<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

一、頁面結(jié)構(gòu)說明

頁面的三要素：

頁面 data-role="page" //注意這個(gè)屬性必須有且為最外層div 否則事件注冊的時(shí)候會自動(dòng)注冊倆次
頁頭 data-role="header" //頁面頭部標(biāo)題或菜單區(qū)
內(nèi)容 data-role="content" //頁面內(nèi)容
頁尾 data-role="footer" //頁尾標(biāo)題或菜單區(qū)

<div data-role="page" id="pageone">
 <div data-role="header">
  <h1>在此處寫入標(biāo)題</h1>
 </div>
 <div data-role="content">
  <p>在此處寫入正文</p>
 </div>
 <div data-role="footer">
  <h1>在此處寫入頁腳文本</h1>
 </div>
</div>

【1.頁面全屏】

需要當(dāng)前頁面的頭部和尾部留在最上和最下的時(shí)候可以在 header 和 footer 的div 中加上屬性

data-position="fixed" data-fullscreen="true"

注意倆個(gè)必須同時(shí)加，否則將無任何效果

【2.頁面標(biāo)題居中】

必須在 header 或 footer的 div的下一級加上 h1 標(biāo)簽其他標(biāo)簽無效

<div data-role="footer">
  <h1>標(biāo)題文字</h1>
</div>

二、在HTML中創(chuàng)建多個(gè)頁面

【頁面內(nèi)之間切換】

默認(rèn)顯示第一個(gè)頁面
其他頁面隱藏

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">轉(zhuǎn)到頁面二</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">轉(zhuǎn)到頁面一</a>
  </div>
</div>

【對話框】

如果頁面中只用倆個(gè)page 默認(rèn)第一個(gè)page 為主體頁面
不會因?yàn)榈诙€(gè)標(biāo)簽a的data-rel 屬性改變第一個(gè)頁面成為對話框

當(dāng)然如果有多個(gè)page，其他的也是可以更改的，但是第一個(gè)page 不會更改

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo" data-rel="dialog">轉(zhuǎn)到對話框二</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="header">
  <h1>我是一個(gè)對話框！</h1>
 </div>
 <div data-role="content">
  <p>對話框與普通頁面不同，它顯示在當(dāng)前頁面的頂端。它不會橫跨整個(gè)頁面寬度。對話框頁眉中的圖標(biāo) “X” 可關(guān)閉對話框。</p>
  <a href="#pageone">轉(zhuǎn)到頁面一</a>
 </div>
 <div data-role="footer">
 <h1>頁腳文本</h1>
 </div>
</div>

三、多個(gè)頁面之間的過渡效果

在a標(biāo)簽中添加屬性

data-transition="slide"

當(dāng)然可以添加滑動(dòng)的反方向動(dòng)作

data-direction="reverse"

fade 默認(rèn)。淡入淡出到下一頁。

flip 從后向前翻動(dòng)到下一頁。

flow 拋出當(dāng)前頁面，引入下一頁。

pop 像彈出窗口那樣轉(zhuǎn)到下一頁。

slide 從右向左滑動(dòng)到下一頁。

slidefade 從右向左滑動(dòng)并淡入到下一頁。

slideup 從下到上滑動(dòng)到下一頁。

slidedown 從上到下滑動(dòng)到下一頁。

turn 轉(zhuǎn)向下一頁。

none 無過渡效果。

四、按鈕的使用

生成按鈕的三種方式

<button>
<input type="submit/reset/button"/>
<a data-role="button"> (推薦)

【導(dǎo)航按鈕】

data-role="button"

【行內(nèi)按鈕】

默認(rèn)一個(gè)按鈕占據(jù)一行，如果不想占據(jù)一行可以使用內(nèi)聯(lián)屬性

data-inline="true"

【組合按鈕】

data-role="controlgroup"
data-type="horizontal/vertical"

<div data-role="controlgroup" data-type="horizontal">
  <p>水平分組：</p>
  <a href="#" data-role="button">按鈕 1</a>
  <a href="#" data-role="button">按鈕 2</a>
  <a href="#" data-role="button">按鈕 3</a>
</div>
<div data-role="controlgroup" data-type="vertical">
  <p>垂直分組（默認(rèn)）：</p>
  <a href="#" data-role="button">按鈕 1</a>
  <a href="#" data-role="button">按鈕 2</a>
  <a href="#" data-role="button">按鈕 3</a>
</div>

【后退按鈕】（會自動(dòng)忽略 href屬性）

data-rel="back"

data-corners true | false
規(guī)定按鈕是否有圓角。默認(rèn)true
data-mini true | false
規(guī)定是否是小型按鈕。默認(rèn)false
data-shadow true | false
規(guī)定按鈕是否有陰影。默認(rèn)true

五、圖標(biāo)的使用

為按鈕添加圖標(biāo) 只要加上如下屬性即可

data-icon="search"

data-icon="arrow-l" 左箭頭

data-icon="arrow-r" 右箭頭

data-icon="delete" 刪除

data-icon="info" 信息

data-icon="home" 首頁

data-icon="back" 返回

data-icon="search" 搜索

data-icon="grid" 網(wǎng)格

圖標(biāo)定位

data-iconpos="top/left/right/bottom" 默認(rèn)left

只要圖標(biāo)的話：

將上述屬性設(shè)置為 notext

data-iconpos="notext"

六、工具欄的使用

【頁眉】

向文字的左右倆測各加一個(gè)按鈕

<div data-role="page">
 <div data-role="header">
  <a href="#" data-role="button" data-icon="home">首頁</a>
  <h1>歡迎訪問我的主頁</h1>
  <a href="#" data-role="button" data-icon="search">搜索</a>
 </div>
</div>

[單個(gè)按鈕居右]（默認(rèn)居左）

如果只加一個(gè)按鈕，不管是加在h1的前面還是后面都會默認(rèn)放在左側(cè)，如果想放在右側(cè)，需在按鈕上添加

如下屬性

class="ui-btn-right"

[注意]：頁眉只可以包含一到倆個(gè)按鈕，頁腳無限制

【頁腳】

頁腳和頁眉不同，他省去了一些內(nèi)聯(lián)樣式且不會居中
如果需要居中，則可以在footer上添加

class="ui-btn" (并且只能在footer上添加)

當(dāng)然也可以選擇水平或垂直的組合方式

<div data-role="footer" class="ui-btn" >
  <div data-role="controlgroup" data-type="horizontal">
   <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到新浪微博</a>
   <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到騰訊微博</a>
   <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到QQ空間</a>
  </div>
</div>

【頁眉和頁腳的定位】

[inline] 默認(rèn)

頁眉頁腳與頁面內(nèi)容平行即內(nèi)容多高頁眉和頁腳隨內(nèi)容的高度增加

data-position="inline"

[fixed]

根據(jù)滾動(dòng)條的位置分別顯示或隱藏頁眉或頁腳

data-position="fixed"

[fullscreen]

需要同時(shí)定義倆個(gè)屬性會同時(shí)顯示隱藏頁眉或頁腳

data-position="fixed"
data-fullscreen="true"

七、導(dǎo)航欄的使用

【導(dǎo)航欄】

使用 navbar 定義導(dǎo)航欄

data-role="navbar"

注意：navbar下面的a標(biāo)簽可以免去
data-role="button" 自動(dòng)會添加類似屬性

<div data-role="header">
  <h1>標(biāo)題 可不要</h1>
  <div data-role="navbar">
    <ul>
    <li><a href="#a">首頁</a></li>
    <li><a href="#a">導(dǎo)航</a></li>
    <li><a href="#a">搜索</a></li>
  </ul>
  </div>
</div>

【選中按鈕】

在不點(diǎn)擊的情況下激活選中

class="ui-btn-active"

點(diǎn)擊后激活選中（這個(gè)預(yù)先放入按鈕屬性中點(diǎn)擊時(shí)會被激活）

class="ui-state-persist"

[注意]：

導(dǎo)航按鈕可以放在 footer content header中

需要使用的時(shí)候：

必須按照

div:data-role="footer">div:data-role="navbar">ul>li>a 的層級來展示

八、可折疊的使用

【單個(gè)可折疊】

data-role="collapsible"

格式：

<div data-role="collapsible">
  <h1>標(biāo)題</h1>
  <p>內(nèi)容</p>
</div>

折疊默認(rèn)是關(guān)閉的，需要默認(rèn)打開可添加屬性

data-collapsed="false"

【嵌套的可折疊】

此格式可以去掉內(nèi)容保留標(biāo)題，制作無限極菜單

<div data-role="collapsible">
 <h1>點(diǎn)擊我 - 我可以折疊！</h1>
 <p>我是被展開的內(nèi)容。</p>
 <div data-role="collapsible">
  <h1>點(diǎn)擊我 - 我是嵌套的可折疊塊！</h1>
  <p>我是嵌套的可折疊塊中被展開的內(nèi)容。</p>
 </div>
</div>

【集合可折疊】

父：data-role="collapsible-set"
子：data-role="collapsible"

<div data-role="collapsible-set">
   <div data-role="collapsible">
    <h3>點(diǎn)擊我 - 我可以折疊！</h3>
    <p>我是可折疊的內(nèi)容。</p>
   </div>
   <div data-role="collapsible">
    <h3>點(diǎn)擊我 - 我可以折疊！</h3>
    <p>我是可折疊的內(nèi)容。</p>
   </div>
   <div data-role="collapsible">
    <h3>點(diǎn)擊我 - 我可以折疊！</h3>
    <p>我是可折疊的內(nèi)容。</p>
   </div>
   <div data-role="collapsible">
    <h3>點(diǎn)擊我 - 我可以折疊！</h3>
    <p>我是可折疊的內(nèi)容。</p>
   </div>
</div>

【去掉標(biāo)題圓角】

data-inset="false"

【小化按鈕】

data-mini="true"

【改變圖標(biāo)】

data-expanded-icon

九、網(wǎng)格布局

【四種網(wǎng)格布局】

網(wǎng)格類列列寬度
對應(yīng) 實(shí)例
ui-grid-a 2 50% / 50% ui-block-a|b

ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c

ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d

ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e

父類行row
ui-grid-a 倆列
ui-block-a
ui-block-b

注意子類每一個(gè)新的類 ui-block-a 都會另起一行

十、列表視圖

在ul或ol上增加屬性

data-role="listview"

【特定列分割】

li列表中增加分隔符手動(dòng)分割

data-role="list-divider"

【按字母自動(dòng)分割】

ul/ol 增加屬性

data-autodividers="true"

【圓角】

data-inset="true"

【搜索與過濾】

data-role="listview"                      列表屬性
data-autodividers="true"                  按字母自動(dòng)分組屬性
data-inset="true"                         圓角屬性
data-filter="true"                        數(shù)據(jù)過濾屬性
data-filter-placeholder="搜索姓名 ..."    過濾文本框默認(rèn)文字屬性

<ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true" data-filter-placeholder="搜索姓名 ...">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Albert</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Cameron</a></li>
  <li><a href="#">Chloe</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Diana</a></li>
  <li><a href="#">Gabriel</a></li>
  <li><a href="#">Glen</a></li>
  <li><a href="#">Ralph</a></li>
  <li><a href="#">Valarie</a></li>
</ul>

【只讀屬性】

去掉 li里的a標(biāo)簽保留文字即可

【列表內(nèi)容】

1. 包含縮略圖的列表

<ul data-role="listview" data-inset="true">
   <li>
    <a href="#">
    <img src="/i/chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
    </a>
   </li>
   <li>
    <a href="#">
    <img src="/i/firefox.png">
    <h2>Mozilla Firefox</h2>
    <p>Firefox is a web browser from Mozilla. Released in 2004.</p>
    </a>
   </li>
</ul>

2. 列表圖標(biāo)

如果是16*16的圖標(biāo) 加上

class="ui-li-icon"

<li>
  <a href="#">
   <img src="us.png" alt="USA" class="ui-li-icon">
   USA
  </a>
</li>

不是就同上。

3. 拆分按鈕

<ul data-role="listview">
 <li>
  <a href="#"><img src="chrome.png"></a>
  <a href="#download" data-rel="dialog">下載瀏覽器</a>
 </li>
</ul>

4. 計(jì)數(shù)泡沫

a標(biāo)簽里的sapn加上類名

class="ui-li-count"

<ul data-role="listview">
 <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
 <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
 <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

5. 更改默認(rèn)圖標(biāo)

li 里添加屬性

data-icon="minus"

6. 日歷事件

列表>分隔列表
>列表內(nèi)容

<ul data-role="listview" data-inset="true">
   <li data-role="list-divider">星期三, 1 月 2 日, 2013 <span class="ui-li-count">2</span></li>
   <li><a href="#">
    <h2>醫(yī)生</h2>
    <p><b>To Peter Griffin</b></p>
    <p>Well, Mr. Griffin, I've looked into physical results.</p>
    <p>Ah, Mr. Griffin, I'm not quite sure how to say this. Kim Bassinger? Bass singer? Bassinger?</p>
    <p>But now, onto the cancer</p>
    <p>You are a Cancer, right? You were born in July? Now onto these test results.</p>
    <p class="ui-li-aside">Re: Appointment</p></a>
   </li>
   <li><a href="#">
    <h2>Glen Quagmire</h2>
    <p>Remember me this weekend!</p>
    <br>
    <p>- giggity giggity goo</p>
    <p class="ui-li-aside">Re: Camping</p></a>
   </li>
</ul>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: