皓軒的jquery mobile之路（二）

時間 2019-11-07

原文原文鏈接

jQuery Mobile 使用 HTML5 & CSS3 最小的腳原本佈局網頁。

編寫代碼要注意最外層div須要添加data-role="page" ，標題須要添加data-role="header"，內容須要添加data-role="content"，底部須要添加data-role="footer"。

代碼：ide

----------------------------------------------------------工具

<div data-role="page" >
<div data-role="header">
    <h1>頁面標題</h1>
</div>

<div data-role="content">
    <p>頁面內容</p>
</div>

<div data-role="footer">
    <h1>頁面底部內容</h1>
</div>
</div> 佈局

----------------------------------------------------------ui

jQuery Mobile 頁面切換效果

1. 頁面切換效果可被應用於任何使用 data-transition 屬性的連接或表單提交spa

代碼：ip

<a href="#div2" data-transition="slide">切換到div2</a>get

<a href="#div1" data-transition="slide">切換到div1</a>input

data-transition的參數：it

fade：默認淡入到下一頁；flip：從後向前翻轉到下一頁；flow：前一頁縮小向左拋出到下一頁；pop：彈出進入下一頁； slide：從右到左滑動到下一頁io

slidefade：從右到左滑動並淡入到下一頁；slideup：從下到上滑動到下一頁；slidedown：從上到下滑動到下一頁；turn：翻到下一頁；none：去除效果。

2. data-transition的全部效果都支持退後功能需添加data-direction="reverse"

代碼：

<a href="#div2" data-transition="flow">切換到div2</a>

<a href="#div1" data-transition="flow" data-direction="reverse">切換到div1</a>

jQuery Mobile 按鈕

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

使用 <button> 元素
使用<input type="button" value="按鈕"> 元素
使用帶有 <a href="#" data-role="button">按鈕</a> 的 <a> 元素

在什麼場景用那種按鈕：

data-role="button" 用於頁面之間的連接 input 和button用於表單提交

代碼：

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

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

<div data-role="page" id="div1">
<div data-role="header">
    <h1>頁面標題</h1>
</div>

<div data-role="content">
    <p><a href="#div2" data-role="button">訪問第二個頁面</a></p>
</div>

<div data-role="footer">
    <h1>頁面底部內容</h1>
</div>
</div>

<div data-role="page" id="div2">
<div data-role="header">
    <h1>頁面標題</h1>
</div>

<div data-role="content">
    <p><a href="#div1" data-role="button">訪問第二個頁面</a></p>
</div>

<div data-role="footer">
    <h1>頁面底部內容</h1>
</div>
</div>

2. 按鈕默認狀況下都是佔滿屏幕寬度，因此提供了data-inline="true"讓按鈕的寬度和字同樣寬

<a href="#pagetwo" data-role="button" data-inline="true">按鈕寬度和我同樣</a>

3. jqmobile組合按鈕，組合顧名思義是幾個按鈕拼接在一塊兒，那麼就有兩種狀況，一種是一個按鈕佔一行（默認），一種是幾個按鈕佔一行；因此提供data-role="controlgroup" 屬性和 data-type="horizontal|vertical"對按鈕佈局。

代碼：

<div data-role="page" id="pageone">
<div data-role="header">
<h1>組合按鈕</h1>
</div>

<div data-role="content">
    <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><br>

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

<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>