obi 隱藏 ... ole his pan sin download 它的

寫在前面

本文是依據w3c 學習軌跡，自己研習過程中記錄下的筆記，僅僅供自己學習軌跡記錄之用，不喜勿噴。

0 引入庫

引入相應的文件：
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<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>

一、頁面結構說明

頁面的三要素：


頁面 data-role="page" //註意這個屬性必須有 且為最外層div 否則事件註冊的時候 會自己主動註冊倆次
頁頭 data-role="header" //頁面頭部標題 或菜單區
內容 data-role="content" //頁面內容
頁尾 data-role="footer" //頁尾標題 或菜單區

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>在此處寫入標題</h1>
  </div>

  <div data-role="content">
    <p>在此處寫入正文</p>
  </div>

  <div data-role="footer">
    <h1>在此處寫入頁腳文本</h1>
  </div>
</div> 

【1.頁面全屏】

須要當前頁面的頭部和尾部留在最上和最下的時候 能夠
在 header 和 footer 的div 中 加上屬性


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

註意倆個必須同一時候加。否則將無不論什麽效果

【2.頁面標題居中】

必須在 header 或 footer的 div的下一級
加上 h1 標簽 其它標簽無效

 <div data-role="footer">
     <h1>標題文字</h1>
 </div>

二、在HTML中創建多個頁面

【頁面內之間切換】

默認顯示第一個頁面
其它頁面隱藏

<div data-role="page" id="pageone">
    <div data-role="content">
       <a href="#pagetwo">轉到頁面二</a>
    </div>
</div>

<div data-role="page" id="pagetwo">
    <div data-role="content">
        <a href="#pageone">轉到頁面一</a>
    </div>
</div>

【對話框】

假設頁面中僅僅用倆個page 默認第一個page 為主體頁面
不會由於第二個標簽a的data-rel 屬性改變第一個頁面成為對話框


當然假設有多個page。其它的也是能夠更改的，可是第一個page 不會更改

<div data-role="page" id="pageone">
    <div data-role="content">
        <a href="#pagetwo" data-rel="dialog">轉到對話框二</a>
    </div>
</div>

<div data-role="page" id="pagetwo">
    <div data-role="header">
    <h1>我是一個對話框！</h1>
  </div>

  <div data-role="content">
    <p>對話框與普通頁面不同，它顯示在當前頁面的頂端。它不會橫跨整個頁面寬度。對話框頁眉中的圖標 “X” 可關閉對話框。
</p>
    <a href="#pageone">轉到頁面一</a>
  </div>

  <div data-role="footer">
  <h1>頁腳文本</h1>
  </div>
</div>

三、多個頁面之間的過渡效果

在a標簽中加入屬性 data-transition="slide"
當然能夠加入滑動的反方向動作 data-direction="reverse"


fade 默認。

淡入淡出到下一頁。

flip 從後向前翻動到下一頁。
flow 拋出當前頁面，引入下一頁。
pop 像彈出窗體那樣轉到下一頁。
slide 從右向左滑動到下一頁。
slidefade 從右向左滑動並淡入到下一頁。
slideup 從下到上滑動到下一頁。
slidedown 從上到下滑動到下一頁。
turn 轉向下一頁。
none 無過渡效果。

四、button的使用

生成button的三種方式

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

【導航button】

data-role="button"

【行內button】

默認一個button占領一行，假設不想占領一行能夠使用內聯屬性
data-inline="true"

【組合button】

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>垂直分組（默認）：</p>
    <a href="#" data-role="button">按鈕 1</a>
    <a href="#" data-role="button">按鈕 2</a>
    <a href="#" data-role="button">按鈕 3</a>
</div>

【後退button】（會自己主動忽略 href屬性）

data-rel="back"


data-corners true | false 規定button是否有圓角。默認true
data-mini true | false 規定是否是小型button。默認false
data-shadow true | false 規定button是否有陰影。

默認true

五、圖標的使用

為button加入圖標
僅僅要加上例如以下屬性 就可以
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" 網格


圖標定位
data-iconpos="top/left/right/bottom" 默認left
僅僅要圖標的話：
將上述屬性設置為 notext
data-iconpos="notext"

六、工具欄的使用

【頁眉】

向文字的左右倆測各加一個button

<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>

[單個button居右]（默認居左）
假設僅僅加一個button，無論是加在h1的前面還是後面
都會默認放在左側。假設想放在右側，需在button上加入
例如以下屬性
class="ui-btn-right"


[註意]：頁眉僅僅能夠包括一到倆個button，頁腳無限制

【頁腳】

頁腳和頁眉不同，他省去了一些內聯樣式 且不會居中
假設須要居中。則能夠在footer上加入
class="ui-btn" (而且僅僅能在footer上加入)


當然也能夠選擇水平或垂直的組合方式

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

【頁眉和頁腳的定位】

[inline] 默認
頁眉頁腳與頁面內容平行 即內容多高 頁眉和頁腳隨內容的高度添加
data-position="inline"


[fixed]
依據滾動欄的位置 分別顯示 或 隱藏頁眉或頁腳
data-position="fixed"


[fullscreen]
須要同一時候定義倆個屬性 會同一時候顯示隱藏 頁眉或頁腳
data-position="fixed"
data-fullscreen="true"

七、導航欄的使用

【導航欄】

使用 navbar 定義導航欄
data-role="navbar"


註意：navbar以下的a標簽 能夠免去
data-role="button" 自己主動會加入類似屬性

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

【選中button】

在不點擊的情況下 激活選中
class="ui-btn-active"


點擊後激活選中（這個預先放入button 屬性中 點擊時會被激活）
class="ui-state-persist"


[註意]：
導航button能夠放在 footer content header中
須要使用的時候：
必須依照
div:data-role="footer">div:data-role="navbar">ul>li>a 的層級來展示

八、可折疊的使用

【單個可折疊】

data-role="collapsible"


格式：

<div data-role="collapsible">
   <h1>標題</h1>
   <p>內容</p>
</div>

折疊默認是關閉的。須要默認打開 可加入屬性
data-collapsed="false"

【嵌套的可折疊】

此格式 能夠去掉內容 保留標題，
制作無限極菜單

<div data-role="collapsible">
  <h1>點擊我 - 我能夠折疊。</h1>
  <p>我是被展開的內容。</p>
  <div data-role="collapsible">
    <h1>點擊我 - 我是嵌套的可折疊塊！</h1>
    <p>我是嵌套的可折疊塊中被展開的內容。
</p>
  </div>
</div>

【集合可折疊】

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

<div data-role="collapsible-set">
      <div data-role="collapsible">
        <h3>點擊我 - 我能夠折疊！
</h3>
  	    <p>我是可折疊的內容。
</p>
      </div>
      <div data-role="collapsible">
        <h3>點擊我 - 我能夠折疊。</h3>
        <p>我是可折疊的內容。</p>
      </div>
      <div data-role="collapsible">
        <h3>點擊我 - 我能夠折疊！</h3>
        <p>我是可折疊的內容。
</p>
      </div>
      <div data-role="collapsible">
        <h3>點擊我 - 我能夠折疊！</h3>
        <p>我是可折疊的內容。
</p>
      </div>
    </div>

【去掉標題圓角】

data-inset="false"

【小化button】

data-mini="true"

【改變圖標】

data-expanded-icon

九、網格布局

【四種網格布局】

網格類 列 列寬度 相應 實例
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


註意子類每個新的類 ui-block-a 都會另起一行

十、列表視圖

在ul或ol上添加 屬性
data-role="listview"

【特定列切割】

li列表中添加分隔符 手動切割
data-role="list-divider"

【按字母自己主動切割】

ul/ol 添加屬性
data-autodividers="true"

【圓角】

data-inset="true"

【搜索與過濾】

data-role="listview" 列表屬性
data-autodividers="true" 按字母自己主動分組屬性
data-inset="true" 圓角屬性
data-filter="true" 數據過濾屬性
data-filter-placeholder="搜索姓名 ..." 過濾文本框默認文字屬性

<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標簽 保留文字就可以

【列表內容】

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. 列表圖標

假設是16*16的 圖標 加上
class="ui-li-icon"

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

不是 就同上。

3. 拆分button

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

4. 計數泡沫

a標簽 裏的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. 更改默認圖標

li 裏加入屬性
data-icon="minus"

6. 日歷事件

列表>分隔列表
>列表內容

<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>醫生</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>

jquery-mobile 學習筆記之中的一個（基礎屬性）