SlideShare a Scribd company logo
框架介紹
www.ezoui.com
jQuery Mobile 是什麼?
2
jQuery + Mobile
jQuery Mobile
=
這麼簡單,大家都知道呀!
但是 jQuery Mobile 到底是什麼?能吃嗎?
jQuery Mobile 的特色
支援響應式網頁
使用 jQuery 建構
具備完整的 UI 畫面
支援 HTML5
支援各種平台裝置
多樣的效果和變化
更簡捷的語法與輕量化的大小
精簡觸控和滑鼠事件
可是我聽說 jQuery Mobile 很 肥
jQuery Mobile 現在的版本是 Version 1.4.3
效能比以往大幅提升
感受一下 jQuery Mobile
http://demos.jquerymobile.com/1.4.2/
5
認識了 jQuery Mobile 之後就讓我們開始吧!
<link rel="stylesheet" href="jquery.mobile.min.css" />
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
jQuery Mobile 預載的程式
<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>
起
手
式
<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
page 使用 EZoApp 來體驗一下 page
http://goo.gl/EmXUY9
★ 使用 href ,直接切換到指定的 Page Id
★ 使用 data-transition 設定切換效果
★ 設定 data-rel=”back” 用同樣效果返回
page
切換效果
<a href="#pageID" data-transition="效果"></a>
★ 也可以使用 javascript 來做切換
★ $.mobile.changePage('#PageID');
★ $.mobile.changePage('#PageB' , {'transition':'效果'} );
● default:預設值 ( fade )
● fade:淡入淡出 ( 預設值 )
● flip:翻轉
● flow :流動切換效果
● pop:彈出窗口顯示
● slide:左右滑動切換
● slidefade:左右滑動 + 淡入淡出切換
● slideup:由上而下滑動切換
● slidedown:由下而上滑動切換
● turn:轉向下一頁
● none:直接切換
page
切換效果
<a href="#pageID" data-transition="效果"></a>
範例:
http://goo.gl/xwIR0F
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>
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
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
Input
<div class="ui-field-contain">
<label for="#text_id">Title</label>
<input type="text" name="" id="#text_id">
</div>
<div class="ui-field-contain">
<label for="#textarea_id">Title</label>
<textarea name="" id="#textarea_id"></textarea>
</div>
<div class="ui-field-contain">
<label for="#search_id">Title</label>
<input type="search" name="" id="#search_id">
</div>
http://goo.gl/XOXJPH
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
由上面幾個例子就可以看出
jQuery Mobile 裡頭
class 扮演舉足輕重的地位
你一定會認為
當然不是呀!
第二個也非常重要的就是:data attribute
2
什麼是 data attribute 呀?
HTML 5 當中,使用 "data" 屬性來自定義屬性
使用者可以使用 Javascript 或 CSS 來控制
比較嚴謹的格式為 "data-*"
完整的 jQuery Mobile data attribute
http://api.jquerymobile.com/data-attribute/
Header
&
Footer
<div data-role="header" data-position="fixed">
<h1>header</h1>
</div>
<div data-role="footer" data-position="fixed">
<h4>footer</h4>
</div>
http://goo.gl/YpuDEY
Navbar <div data-role="navbar">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
</ul>
</div>
http://goo.gl/3nwwe1
Radio
button
<form>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Horizontal:</legend>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a"
value="on" checked="checked">
<label for="radio-choice-h-2a">One</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b"
value="off">
<label for="radio-choice-h-2b">Two</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c"
value="other">
<label for="radio-choice-h-2c">Three</label>
</fieldset>
</form>
http://goo.gl/Vh67Vf
Check
box
<form>
<fieldset data-role="controlgroup">
<legend>Vertical:</legend>
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
<label for="checkbox-v-2a">One</label>
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
<label for="checkbox-v-2b">Two</label>
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
<label for="checkbox-v-2c">Three</label>
</fieldset>
</form>
http://goo.gl/x7vfGr
Flip
switch
<form>
<label for="flip-2">Flip toggle switch:</label>
<select name="flip-2" id="flip-2" data-
role="flipswitch" data-theme="b">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
http://goo.gl/83Mn0z
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
Popup
<a href="#popupID" data-rel="popup" class="ui-btn" data-
transition="pop">Popup</a>
<div data-role="popup" id="popupID">
<p>popup 內容</p>
</div>
製作彈出式視窗
http://goo.gl/V2Zhxj
Table
<table data-role="table" id="table-column-toggle" data-
mode="columntoggle" class="ui-responsive table-stroke">
<thead>
內容省略
</thead>
<tbody>
內容省略
</tbody>
</table>
http://goo.gl/pMJlkP
建立表格 (columntoggle / Reflow)
Slide
Panel
<div id="left-menu" data-role="panel" data-position="left">
從左側展開的內容
</div>
<div id="right-menu" data-role="panel" data-
position="right">
從左側展開的內容
</div>
跟 App 一樣的選單表現方式
參考文章:
http://goo.gl/QajnSU
範例:
http://goo.gl/8KlhuF
該如何讓 jQuery Mobile 運作呢?
事件
頁面事件
(function (){
$(document).on( "pageinit" , "#pageID" , function(){
//頁面第一次載入會執行
});
})()
(function (){
$(document).on( "pageshow" , "#pageID" , function(){
//頁面顯示後會執行
});
})()
(function (){
$(document).on( "gkComponentReady" , function(){
//GK 元件初始化完成會執行
});
})()
http://goo.gl/0Zwgnd
$('#id').on('tap', function () {});
$('#id').on('taphold', function () {});
$('#id').on('swipe', function () {});
$('#id').on('swipeleft', function () {});
$('#id').on('swiperight', function () {});
五種頁面觸控事件 ( 手勢與滑鼠均適用 )
http://goo.gl/S5bJNq
事件
觸控事件
$(window).on('orientationchange', function (event) {});
偵測行動裝置的旋轉事件
http://goo.gl/HnE1Fe
事件
旋轉事件
經過了剛剛一系列的的介紹
大家應該稍微明白了 jQuery Mobile 了吧
看一些 jQuery Mobile 的範例
範例 1 :
利用滑動桿,改變文字大小
http://goo.gl/4bVDt4
http://goo.gl/DjPh9q
範例 2 :
調色盤
http://goo.gl/wiJ2BX
範例 3 :
訂飲料系統
範例 4 :
EZoApp 地圖應用
http://goo.gl/qaIYp8
範例 5 :
高雄市好吃好玩
http://goo.gl/4w2iAl
測試時瀏覽器須跨域:--args --disable-web-security
以上就是 jQuery Mobile 的基本介紹
如有興趣,可以上 jQuery Mobile 官網了解更多
http://jquerymobile.com/
更多精彩的應用,等待你我去發掘
或直接使用 EZoApp 體驗
http://jqmdesigner.appspot.com/
謝謝聆聽
敬請指教

More Related Content

What's hot

Vue.js
Vue.jsVue.js
Vue.js
ZongYing Lyu
 
JavaScript Code Quality
JavaScript Code QualityJavaScript Code Quality
JavaScript Code Quality
Joseph Chiang
 
面向未来的重构
面向未来的重构面向未来的重构
面向未来的重构Kejun Zhang
 
更好的文件组织
更好的文件组织更好的文件组织
更好的文件组织Kejun Zhang
 
只需要懂Jquery也能學react js
只需要懂Jquery也能學react js只需要懂Jquery也能學react js
只需要懂Jquery也能學react js
Justin Wu
 
How tovuejs
How tovuejsHow tovuejs
How tovuejs
Daniel Chou
 
前端MVC之backbone
前端MVC之backbone前端MVC之backbone
前端MVC之backbone
Jerry Xie
 
高雄前端社群 #6 絕對教會你jQuery動畫效果
高雄前端社群 #6 絕對教會你jQuery動畫效果高雄前端社群 #6 絕對教會你jQuery動畫效果
高雄前端社群 #6 絕對教會你jQuery動畫效果洧杰 廖
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践jay li
 
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)ziggear
 
一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)
Kejun Zhang
 
深入剖析浏览器
深入剖析浏览器深入剖析浏览器
深入剖析浏览器
jay li
 
jQuery 把玩 SVG 初體驗
jQuery 把玩 SVG 初體驗jQuery 把玩 SVG 初體驗
jQuery 把玩 SVG 初體驗
Adam Hung
 
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
 
2014南部創新應用工具研討會 快速開發行動 app
2014南部創新應用工具研討會 快速開發行動 app2014南部創新應用工具研討會 快速開發行動 app
2014南部創新應用工具研討會 快速開發行動 app益祥 許
 
HTML5概览
HTML5概览HTML5概览
HTML5概览Adam Lu
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Design
jay li
 
Backbone.js and MVW 101
Backbone.js and MVW 101Backbone.js and MVW 101
Backbone.js and MVW 101
Jollen Chen
 
用Vue改dom
用Vue改dom用Vue改dom
用Vue改dom
Chris Wang
 

What's hot (20)

Vue.js
Vue.jsVue.js
Vue.js
 
JavaScript Code Quality
JavaScript Code QualityJavaScript Code Quality
JavaScript Code Quality
 
面向未来的重构
面向未来的重构面向未来的重构
面向未来的重构
 
更好的文件组织
更好的文件组织更好的文件组织
更好的文件组织
 
只需要懂Jquery也能學react js
只需要懂Jquery也能學react js只需要懂Jquery也能學react js
只需要懂Jquery也能學react js
 
How tovuejs
How tovuejsHow tovuejs
How tovuejs
 
前端MVC之backbone
前端MVC之backbone前端MVC之backbone
前端MVC之backbone
 
高雄前端社群 #6 絕對教會你jQuery動畫效果
高雄前端社群 #6 絕對教會你jQuery動畫效果高雄前端社群 #6 絕對教會你jQuery動畫效果
高雄前端社群 #6 絕對教會你jQuery動畫效果
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
 
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)
 
一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)
 
深入剖析浏览器
深入剖析浏览器深入剖析浏览器
深入剖析浏览器
 
jQuery 把玩 SVG 初體驗
jQuery 把玩 SVG 初體驗jQuery 把玩 SVG 初體驗
jQuery 把玩 SVG 初體驗
 
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
 
2014南部創新應用工具研討會 快速開發行動 app
2014南部創新應用工具研討會 快速開發行動 app2014南部創新應用工具研討會 快速開發行動 app
2014南部創新應用工具研討會 快速開發行動 app
 
HTML5概览
HTML5概览HTML5概览
HTML5概览
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Design
 
Backbone.js and MVW 101
Backbone.js and MVW 101Backbone.js and MVW 101
Backbone.js and MVW 101
 
用Vue改dom
用Vue改dom用Vue改dom
用Vue改dom
 

Viewers also liked

Cold war
Cold warCold war
Yanci
YanciYanci
Катастрофи
КатастрофиКатастрофи
Катастрофи
Sam Um Ray
 
Laporan hp pemikiran kritikal
Laporan hp pemikiran kritikalLaporan hp pemikiran kritikal
Laporan hp pemikiran kritikal
Syahirah Banu Mohd Akram
 
5ο γυμνασιο Αμαρουσιου - Δημιουργία ανθόκηπου
5ο γυμνασιο Αμαρουσιου - Δημιουργία ανθόκηπου5ο γυμνασιο Αμαρουσιου - Δημιουργία ανθόκηπου
5ο γυμνασιο Αμαρουσιου - Δημιουργία ανθόκηπου
gper2014
 
Power point ρέμα σαπφους 4
Power point ρέμα σαπφους 4Power point ρέμα σαπφους 4
Power point ρέμα σαπφους 4
gper2014
 
Φωτογραφίζοντας το περιβάλλον της περιοχής μου
Φωτογραφίζοντας το περιβάλλον της περιοχής μουΦωτογραφίζοντας το περιβάλλον της περιοχής μου
Φωτογραφίζοντας το περιβάλλον της περιοχής μου
gper2014
 
περιβαλλοντικο προγραμμα
περιβαλλοντικο προγραμμαπεριβαλλοντικο προγραμμα
περιβαλλοντικο προγραμμα
gper2014
 
Waterfall Creations form a Tropical Paradise in NYC
Waterfall Creations form a Tropical Paradise in NYCWaterfall Creations form a Tropical Paradise in NYC
Waterfall Creations form a Tropical Paradise in NYC
greeningstone
 
Digital Experimental Phylogenetics - Evolution2014
Digital Experimental Phylogenetics - Evolution2014Digital Experimental Phylogenetics - Evolution2014
Digital Experimental Phylogenetics - Evolution2014
Cory Kohn
 
ΘΕΜΑΤΟΛΟΓΙΑ & ΣΧΕΔΙΑΣΜΟΣ Βιωματικών δράσεων για την Εκπαίδευση για το Περιβάλ...
ΘΕΜΑΤΟΛΟΓΙΑ & ΣΧΕΔΙΑΣΜΟΣΒιωματικών δράσεων για την Εκπαίδευση για το Περιβάλ...ΘΕΜΑΤΟΛΟΓΙΑ & ΣΧΕΔΙΑΣΜΟΣΒιωματικών δράσεων για την Εκπαίδευση για το Περιβάλ...
ΘΕΜΑΤΟΛΟΓΙΑ & ΣΧΕΔΙΑΣΜΟΣ Βιωματικών δράσεων για την Εκπαίδευση για το Περιβάλ...
gper2014
 
παρουσίαση προγράμματος
παρουσίαση προγράμματοςπαρουσίαση προγράμματος
παρουσίαση προγράμματος
gper2014
 
Tο φυσικό περιβάλλον της περιοχής μου το φθινόπωρο
Tο φυσικό περιβάλλον της περιοχής μου το φθινόπωροTο φυσικό περιβάλλον της περιοχής μου το φθινόπωρο
Tο φυσικό περιβάλλον της περιοχής μου το φθινόπωρο
gper2014
 
Maintenance of the mind presentation
Maintenance of the mind presentationMaintenance of the mind presentation
Maintenance of the mind presentation
Dervilia Cullotty
 
Presentación1
Presentación1Presentación1
Presentación1
zerimar27
 
Prezentacja katarzyna gołdyn
Prezentacja katarzyna gołdynPrezentacja katarzyna gołdyn
Prezentacja katarzyna gołdynKatarzyna Gołdyn
 
ギー横 流しそうめん
ギー横 流しそうめんギー横 流しそうめん
ギー横 流しそうめんTomomi Nagao
 
Tο φυσικό περιβάλλον της περιοχής μου το φθινόπωρο
Tο φυσικό περιβάλλον της περιοχής μου το φθινόπωροTο φυσικό περιβάλλον της περιοχής μου το φθινόπωρο
Tο φυσικό περιβάλλον της περιοχής μου το φθινόπωρο
gper2014
 
Сахара
СахараСахара
Сахара
Sam Um Ray
 
Οι τέσσερις εποχές του δάσους Συγγρού
Οι τέσσερις εποχές του δάσους ΣυγγρούΟι τέσσερις εποχές του δάσους Συγγρού
Οι τέσσερις εποχές του δάσους Συγγρού
gper2014
 

Viewers also liked (20)

Cold war
Cold warCold war
Cold war
 
Yanci
YanciYanci
Yanci
 
Катастрофи
КатастрофиКатастрофи
Катастрофи
 
Laporan hp pemikiran kritikal
Laporan hp pemikiran kritikalLaporan hp pemikiran kritikal
Laporan hp pemikiran kritikal
 
5ο γυμνασιο Αμαρουσιου - Δημιουργία ανθόκηπου
5ο γυμνασιο Αμαρουσιου - Δημιουργία ανθόκηπου5ο γυμνασιο Αμαρουσιου - Δημιουργία ανθόκηπου
5ο γυμνασιο Αμαρουσιου - Δημιουργία ανθόκηπου
 
Power point ρέμα σαπφους 4
Power point ρέμα σαπφους 4Power point ρέμα σαπφους 4
Power point ρέμα σαπφους 4
 
Φωτογραφίζοντας το περιβάλλον της περιοχής μου
Φωτογραφίζοντας το περιβάλλον της περιοχής μουΦωτογραφίζοντας το περιβάλλον της περιοχής μου
Φωτογραφίζοντας το περιβάλλον της περιοχής μου
 
περιβαλλοντικο προγραμμα
περιβαλλοντικο προγραμμαπεριβαλλοντικο προγραμμα
περιβαλλοντικο προγραμμα
 
Waterfall Creations form a Tropical Paradise in NYC
Waterfall Creations form a Tropical Paradise in NYCWaterfall Creations form a Tropical Paradise in NYC
Waterfall Creations form a Tropical Paradise in NYC
 
Digital Experimental Phylogenetics - Evolution2014
Digital Experimental Phylogenetics - Evolution2014Digital Experimental Phylogenetics - Evolution2014
Digital Experimental Phylogenetics - Evolution2014
 
ΘΕΜΑΤΟΛΟΓΙΑ & ΣΧΕΔΙΑΣΜΟΣ Βιωματικών δράσεων για την Εκπαίδευση για το Περιβάλ...
ΘΕΜΑΤΟΛΟΓΙΑ & ΣΧΕΔΙΑΣΜΟΣΒιωματικών δράσεων για την Εκπαίδευση για το Περιβάλ...ΘΕΜΑΤΟΛΟΓΙΑ & ΣΧΕΔΙΑΣΜΟΣΒιωματικών δράσεων για την Εκπαίδευση για το Περιβάλ...
ΘΕΜΑΤΟΛΟΓΙΑ & ΣΧΕΔΙΑΣΜΟΣ Βιωματικών δράσεων για την Εκπαίδευση για το Περιβάλ...
 
παρουσίαση προγράμματος
παρουσίαση προγράμματοςπαρουσίαση προγράμματος
παρουσίαση προγράμματος
 
Tο φυσικό περιβάλλον της περιοχής μου το φθινόπωρο
Tο φυσικό περιβάλλον της περιοχής μου το φθινόπωροTο φυσικό περιβάλλον της περιοχής μου το φθινόπωρο
Tο φυσικό περιβάλλον της περιοχής μου το φθινόπωρο
 
Maintenance of the mind presentation
Maintenance of the mind presentationMaintenance of the mind presentation
Maintenance of the mind presentation
 
Presentación1
Presentación1Presentación1
Presentación1
 
Prezentacja katarzyna gołdyn
Prezentacja katarzyna gołdynPrezentacja katarzyna gołdyn
Prezentacja katarzyna gołdyn
 
ギー横 流しそうめん
ギー横 流しそうめんギー横 流しそうめん
ギー横 流しそうめん
 
Tο φυσικό περιβάλλον της περιοχής μου το φθινόπωρο
Tο φυσικό περιβάλλον της περιοχής μου το φθινόπωροTο φυσικό περιβάλλον της περιοχής μου το φθινόπωρο
Tο φυσικό περιβάλλον της περιοχής μου το φθινόπωρο
 
Сахара
СахараСахара
Сахара
 
Οι τέσσερις εποχές του δάσους Συγγρού
Οι τέσσερις εποχές του δάσους ΣυγγρούΟι τέσσερις εποχές του δάσους Συγγρού
Οι τέσσερις εποχές του δάσους Συγγρού
 

Similar to JQuery Mobile 框架介紹與使用 20140713

咩星征服計劃 用 Js 征服地球 Part II
咩星征服計劃 用 Js 征服地球 Part II咩星征服計劃 用 Js 征服地球 Part II
咩星征服計劃 用 Js 征服地球 Part II
羊 小咩 (lamb-mei)
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程yiditushe
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程appollo0312
 
AngularJS training in Luster
AngularJS training in LusterAngularJS training in Luster
AngularJS training in Luster
Jason Chung
 
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號
鍾誠 陳鍾誠
 
Jquery插件easy ui属性汇总
Jquery插件easy ui属性汇总Jquery插件easy ui属性汇总
Jquery插件easy ui属性汇总1100122566
 
J Query简介及入门指南
J Query简介及入门指南J Query简介及入门指南
J Query简介及入门指南AppZ
 
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)Jia Mi
 
Koubei banquet 27
Koubei banquet 27Koubei banquet 27
Koubei banquet 27Koubei UED
 
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練42015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
Duran Hsieh
 
常用Js框架比较
常用Js框架比较常用Js框架比较
常用Js框架比较
Adam Lu
 
Yui rocks
Yui rocksYui rocks
Yui rocks
Adam Lu
 
twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)
twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)
twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)
twMVC
 
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
twMVC
 
Hello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web appHello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web app
hungjie19
 
20131004 - Backbone js 介紹 by Bryan
20131004 - Backbone js  介紹 by Bryan20131004 - Backbone js  介紹 by Bryan
20131004 - Backbone js 介紹 by Bryan
LearningTech
 
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps一步一步开发Html5 mobile apps
一步一步开发Html5 mobile appsAdam Lu
 
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)ziggear
 
JQuery 学习
JQuery 学习JQuery 学习
JQuery 学习
cssrain
 

Similar to JQuery Mobile 框架介紹與使用 20140713 (20)

咩星征服計劃 用 Js 征服地球 Part II
咩星征服計劃 用 Js 征服地球 Part II咩星征服計劃 用 Js 征服地球 Part II
咩星征服計劃 用 Js 征服地球 Part II
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
 
AngularJS training in Luster
AngularJS training in LusterAngularJS training in Luster
AngularJS training in Luster
 
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號
 
Jquery插件easy ui属性汇总
Jquery插件easy ui属性汇总Jquery插件easy ui属性汇总
Jquery插件easy ui属性汇总
 
J Query简介及入门指南
J Query简介及入门指南J Query简介及入门指南
J Query简介及入门指南
 
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
 
Koubei banquet 27
Koubei banquet 27Koubei banquet 27
Koubei banquet 27
 
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練42015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
 
常用Js框架比较
常用Js框架比较常用Js框架比较
常用Js框架比较
 
Yui rocks
Yui rocksYui rocks
Yui rocks
 
twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)
twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)
twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)
 
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
 
Hello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web appHello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web app
 
20131004 - Backbone js 介紹 by Bryan
20131004 - Backbone js  介紹 by Bryan20131004 - Backbone js  介紹 by Bryan
20131004 - Backbone js 介紹 by Bryan
 
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
 
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
 
JQuery 学习
JQuery 学习JQuery 学习
JQuery 学习
 
J query
J queryJ query
J query
 

JQuery Mobile 框架介紹與使用 20140713