jQuery Mobile 基礎

時間 2019-11-16

原文原文鏈接

第一章瀏覽器

一、頁面：ide

<body>
<div data-role="page">

  <div data-role="header">
    <h1>歡迎來到個人主頁</h1>
  </div>

  <div data-role="content">
    <p>我如今是一個移動端開發者!!</p>
    <a href="#anylink" data-transition="slide">切換到第二個頁面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
　　<a href="#pagetwo" data-rel="dialog">Go to Page Two</a>

  </div>

</div>
</body>

data-role="page" 是在瀏覽器中顯示的頁面。
data-role="header" 是在頁面頂部建立的工具條 (一般用於標題或者搜索按鈕)
data-role="content" 定義了頁面的內容，好比文本，圖片，表單，按鈕等。
data-role="footer" 用於建立頁面底部工具條。
data-rel="dialog" 內定標識以對話框形式出現這個頁面。
data-transition 連接切換方式。
在這些容器中你能夠添加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。

fade 默認。淡入到下一頁 
flip    從後向前翻轉到下一頁    
flow    拋出當前頁，進入下一頁    
pop    像彈出窗口同樣進入下一頁    
slide    從右到左滑動到下一頁    
slidefade    從右到左滑動並淡入到下一頁    
slideup    從下到上滑動到下一頁    嘗試一下
slidedown    從上到下滑動到下一頁    
turn    翻到下一頁    
none    沒有切換效果

二、按鈕：工具

在 jQuery Mobile 中，按鈕可經過三種方式建立：ui

使用 <button> 元素
使用 <input> 元素
使用帶有 data-role="button" 的 <a> 元素

<a href="#pagetwo" data-role="button" data-inline="true">訪問第二個頁面</a>

備註：默認狀況下，按鈕佔滿整個屏幕寬度。若是你想要一個僅是與內容同樣寬的按鈕，或者若是您想要並排顯示兩個或多個按鈕，請添加 data-inline="true"：spa

<div data-role="controlgroup" data-type="horizontal">
<a href="#anylink" data-role="button">按鈕 1</a>
<a href="#anylink" data-role="button">按鈕 2</a>
<a href="#anylink" data-role="button">按鈕 3</a>
</div>

備註：請把 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 一塊兒使用來規定是否水平或垂直組合按鈕code

<a href="#" data-role="button" data-rel="back">返回</a>

如需建立後退按鈕，請使用 data-rel="back" 屬性（這會忽略錨的 href 值）視頻

按鈕的 data-* 屬性
data-corners    true | false    規定按鈕是否圓角
data-mini       true | false    規定按鈕是否更小
data-shadow     true | false    規定按鈕是否有陰影

按鈕圖標：blog

<a href="#anylink" data-role="button" data-icon="search"  class="ui-btn-right">Search</a>

備註：圖片

1>、如需添加圖標到您的按鈕，請使用 data-icon 屬性；ip

2>、若是隻想顯示圖標，請設置 data-iconpos 爲 "notext"；

3>、要添加一個按鈕到頭部標題的右側，請指定 class 爲 "ui-btn-right"：

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"    網格

三、工具欄：

<div data-role="footer" class="ui-btn">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="plus">在Facebook上關注我</a>
<a href="#" data-role="button" data-icon="plus">在Twitter上關注我</a>
<a href="#" data-role="button" data-icon="plus">在Instagram上關注我</a>
</div>
</div>

備註：尾部的樣式與頭部不一樣（沒有內邊距和空間，且按鈕不居中）。爲了解決這個問題，請把 "ui-btn" 放置在尾部的 class 上；

頭部和尾部能夠經過三種方式進行定位：

Inline - 默認。頭部欄和尾部欄與頁面內容內聯。
Fixed - 頭部欄和尾部欄固定在頁面的頂部和底部。
Fullscreen - 與 Fixed 定位模式基本相同，頭部欄和尾部欄固定在頁面的頂部和底部。可是當他工具欄滾動出屏幕以外時，不會自動從新顯示，除非點擊屏幕，這對於圖片或視頻類有提高代入感的應用是很是有用的。注意這種模式下工具欄會遮住頁面內容，因此最好用在比較特殊的場合下。

<div data-role="footer" data-position="inline"></div>
<div data-role="footer" data-position="fixed"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

頁面導航

<li><a href="#" class="ui-btn-active ui-state-persist" data-icon="home">首頁</a></li>
<li><a href="#pagetwo" data-icon="arrow-r">頁面二</a></li>
<li><a href="#anylink" class="ui-btn-active ui-state-persist">首頁</a></li>