More Related Content
Similar to JQuery Mobile 框架介紹與使用 20140713
Similar to JQuery Mobile 框架介紹與使用 20140713(20)
JQuery Mobile 框架介紹與使用 20140713
- 12. <head>
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>header</h1>
</div>
<div class="ui-content">
<p>content</p>
</div>
<div data-role="footer">
<h4>footer</h4>
</div>
</div>
</body>
起
手
式
- 13. <div id="page1" data-role="page">
<div role="main" class="ui-content"></div>
</div>
<div id="page2" data-role="page">
<div role="main" class="ui-content"></div>
</div>
<div id="page3" data-role="page">
<div role="main" class="ui-content"></div>
</div>
一個 jQuery Mobile 通常會有多個 page
不過，只會顯示其中一頁
page 必須使用 id 進行區隔
page
- 15. ★ 使用 href ，直接切換到指定的 Page Id
★ 使用 data-transition 設定切換效果
★ 設定 data-rel=”back” 用同樣效果返回
page
切換效果
<a href="#pageID" data-transition="效果"></a>
★ 也可以使用 javascript 來做切換
★ $.mobile.changePage('#PageID');
★ $.mobile.changePage('#PageB' , {'transition':'效果'} );
- 16. ● default：預設值 ( fade )
● fade：淡入淡出 ( 預設值 )
● flip：翻轉
● flow ：流動切換效果
● pop：彈出窗口顯示
● slide：左右滑動切換
● slidefade：左右滑動 + 淡入淡出切換
● slideup：由上而下滑動切換
● slidedown：由下而上滑動切換
● turn：轉向下一頁
● none：直接切換
page
切換效果
<a href="#pageID" data-transition="效果"></a>
範例：
http://goo.gl/xwIR0F
- 17. Button <a href="#" class="ui-btn">Anchor</a>
<button class="ui-btn">Button</button>
使用 class 產生按鈕樣式
<a href="#" class="ui-btn ui-btn-inline">Anchor</a>
<button class="ui-btn ui-btn-inline">Button</button>
- 18. Button
ICON
使用 class 產生按鈕 icon
<button class="ui-btn ui-btn-icon-left ui-icon-action">action</button>
<button class="ui-btn ui-btn-icon-left ui-icon-alert">alert</button>
<button class="ui-btn ui-btn-icon-up ui-icon-arrow-d">arrow-d</button>
<button class="ui-btn ui-btn-icon-right ui-icon-arrow-d-l">arrow-d-l</button>
<button class="ui-btn ui-btn-icon-bottom ui-icon-arrow-d-r">arrow-d-r</button>
<button class="ui-btn ui-btn-icon-left ui-icon-arrow-l">arrow-l</button>
範例：
http://goo.gl/TQxnvm
- 19. Grid <div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div>
使用 class 產生 Grid，Grid 裡頭還可以放 Grid
ui-grid-a : 兩格，ui-grid-b：三格
ui-grid-c：四格，ui-grid-d：五格 ( 最多五格 )
http://goo.gl/AizA2f
- 21. theme 使用 class 產生不同的主題
按鈕：
<a href="#" class="ui-btn ui-btn-a">Theme A</a>
<a href="#" class="ui-btn ui-btn-b">Theme B</a>
navbar：
<div data-role="navbar">
<ul>
<li><a data-theme="a">Theme A</a></li>
<li><a data-theme="b">Theme B</a></li>
</ul>
</div>
http://goo.gl/E8QcW9
- 26. HTML 5 當中，使用 "data" 屬性來自定義屬性
使用者可以使用 Javascript 或 CSS 來控制
比較嚴謹的格式為 "data-*"
完整的 jQuery Mobile data attribute
http://api.jquerymobile.com/data-attribute/
- 32. Listview <ul data-role="listview" data-inset="true"
data-divider-theme="a">
<li data-role="list-divider">Mail</li>
<li><a href="#">Inbox</a></li>
<li><a href="#">Outbox</a></li>
<li data-role="list-
divider">Contacts</li>
<li><a href="#">Friends</a></li>
<li><a href="#">Work</a></li>
</ul>
使用 data-role 輕鬆製作 listview ( filter )
http://goo.gl/XjmWug
- 37. 事件
頁面事件
(function (){
$(document).on( "pageinit" , "#pageID" , function(){
//頁面第一次載入會執行
});
})()
(function (){
$(document).on( "pageshow" , "#pageID" , function(){
//頁面顯示後會執行
});
})()
(function (){
$(document).on( "gkComponentReady" , function(){
//GK 元件初始化完成會執行
});
})()
http://goo.gl/0Zwgnd
- 38. $('#id').on('tap', function () {});
$('#id').on('taphold', function () {});
$('#id').on('swipe', function () {});
$('#id').on('swipeleft', function () {});
$('#id').on('swiperight', function () {});
五種頁面觸控事件 ( 手勢與滑鼠均適用 )
http://goo.gl/S5bJNq
事件
觸控事件
![[译]Efficient, maintainable CSS](https://cdn.slidesharecdn.com/ss_thumbnails/efficient-091215042328-phpapp01-thumbnail.jpg?width=768&fit=bounds)
