本篇紀錄網格排版測試, 本系列之前的文章參考 :
# jQuery Mobile 學習筆記 (三) : 工具列
# jQuery Mobile 學習筆記 (四) : 對話框
# jQuery Mobile 學習筆記 (四) : 對話框
參考書籍 :
- jQuery Mobile 智慧型手機程式開發 (博碩, 岡本隆史)
- HTML5+CSS3+jQuery Mobile 輕鬆打造 App 與行動網站 (博碩, 陳婉凌)
- PhoneGap 跨平台手機程式開發實戰 (上奇, 張亞飛)
- 徹底研究 jQuery Mobile + PHP 手機程式及網站開發 (上奇, 張亞飛)
- jQuery Mobile 跨平台開發寶典 (上奇, 陶國榮)
- PHP+MySQL+jQuery Mobile 跨行動裝置網站開發 (碁峰, 陳會安)
- Visual Studio 2015 X Cordova跨平台App實戰特訓班 (碁峰, 文淵閣工作室)
- Javascript + jQuery Mobile + Node.js 跨平台網頁設計範例教本 (碁峰, 陳會安)
- 錢沾計畫啟動：jQuery Mobile 跨平台賺錢 App 錢途無量 (佳魁, 李科泉)
- 第一次開發跨平台網頁與 App 就上手 (碁峰, 蔡文龍)
jQuery Mobile 提供四種網格樣式類別以支援 CSS3 多欄版面配置 :
- ui-grid-a : 兩欄版面
- ui-grid-b : 三欄版面
- ui-grid-c : 四欄版面
- ui-grid-d : 五欄版面
因為最多支援五欄版面, 因此 jQuery Mobile 提供了 ui-block-a/b/c/d/e 五個樣式類別給每一個欄位的容器使用, 結構如下圖所示 :
兩欄網格之網頁結構 (1*2) :
<div class="ui-grid-a">
<div class="ui-block-a">第1列第1欄</div>
<div class="ui-block-b">第1列第2欄</div>
</div>
三欄網格之網頁結構 (1*3) :
<div class="ui-grid-b">
<div class="ui-block-a">第1列第1欄</div>
<div class="ui-block-b">第1列第2欄</div>
<div class="ui-block-c">第1列第3欄</div>
</div>
四欄網格之網頁結構 (1*4) :
<div class="ui-grid-c">
<div class="ui-block-a">第1列第1欄</div>
<div class="ui-block-b">第1列第2欄</div>
<div class="ui-block-c">第1列第3欄</div>
<div class="ui-block-d">第1列第4欄</div>
</div>
五欄網格之網頁結構 (1*5) :
<div class="ui-grid-c">
<div class="ui-block-a">第1列第1欄</div>
<div class="ui-block-b">第1列第2欄</div>
<div class="ui-block-c">第1列第3欄</div>
<div class="ui-block-d">第1列第4欄</div>
<div class="ui-block-e">第1列第5欄</div>
</div>
以上結構都是 1*n (1 列 n 欄), 多列排版只要重複 ui-block 樣式即可, 例如 2 列 2 欄為 :
<div class="ui-grid-a">
<div class="ui-block-a">第1列第1欄</div>
<div class="ui-block-b">第1列第2欄</div>
<div class="ui-block-a">第2列第1欄</div>
<div class="ui-block-b">第2列第2欄</div>
</div>
第二次出現的 ui-block-a/b 為第二列, 第三次為第三列, 其餘依此類推.
例如 :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>網格排版測試</h1>
</header>
<article data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" data-role="button" data-icon="action">動作</a>
<a href="#" data-role="button" data-icon="alert">注意</a>
<a href="#" data-role="button" data-icon="arrow-l">左箭頭</a>
<a href="#" data-role="button" data-icon="arrow-u">上箭頭</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-icon="arrow-d">下箭頭</a>
<a href="#" data-role="button" data-icon="arrow-d-l">下左箭頭</a>
<a href="#" data-role="button" data-icon="arrow-d-r">下右箭頭</a>
<a href="#" data-role="button" data-icon="arrow-r">右箭頭</a>
</div>
</div>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例在兩個欄位中各放置 4 個按鈕, 結果如下 :
此例網址 QR code 如下 :
下面是三欄的網格版面範例 :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>網格排版測試</h1>
</header>
<article data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="#" data-role="button" data-icon="action">動作</a>
<a href="#" data-role="button" data-icon="alert">注意</a>
<a href="#" data-role="button" data-icon="arrow-l">左箭頭</a>
<a href="#" data-role="button" data-icon="arrow-u">上箭頭</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-icon="arrow-d">下箭頭</a>
<a href="#" data-role="button" data-icon="arrow-d-l">下左箭頭</a>
<a href="#" data-role="button" data-icon="arrow-d-r">下右箭頭</a>
<a href="#" data-role="button" data-icon="arrow-r">右箭頭</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" data-icon="arrow-u-l">上左箭頭</a>
<a href="#" data-role="button" data-icon="arrow-u-r">上右箭頭</a>
<a href="#" data-role="button" data-icon="audio">音訊</a>
<a href="#" data-role="button" data-icon="back">返回</a>
</div>
</div>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
結果如下 :
此例網址 QR code 如下 :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>網格排版測試</h1>
</header>
<article data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="#" data-role="button" data-icon="action">動作</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-icon="arrow-d">下箭頭</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" data-icon="arrow-u-l">上左箭頭</a>
</div>
<div class="ui-block-a">
<a href="#" data-role="button" data-icon="alert">注意</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-icon="arrow-d-r">下右箭頭</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" data-icon="arrow-u-r">上右箭頭</a>
</div>
<div class="ui-block-a">
<a href="#" data-role="button" data-icon="arrow-l">左箭頭</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-icon="arrow-d-l">下左箭頭</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" data-icon="audio">音訊</a>
</div>
<div class="ui-block-a">
<a href="#" data-role="button" data-icon="arrow-u">上箭頭</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-icon="arrow-r">右箭頭</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" data-icon="back">返回</a>
</div>
</div>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例 ui-block-a/b/c 重複四次, 因此為 4 列 3 行版面, 結果如下 :
雖然結果與上面測試 2 一樣, 但實際上兩者版面結構不同, 上例是 1*3 網格, 此例為 4*3 網格. 此例網址 QR code 如下 :
沒有留言:
張貼留言