1. jQuery Mobile
2011/12/13 at
#ragtech1213
Toru Yoshikawa ( @yoshikawa_t )
8. Cross-platform
Apple iOS 3.2 5.0 A
Android 2.1 2.3 Honeycomb A
Windows Phone 7.0 7.5 A
6.0 7.0 Playbook A
Blackberry
5.0 B
Palm WebOS 1.4 2.0 3.0 A
Firefox Mobile Beta A
Opera Mobile 11.0 A
Opera Mini 5.0 6.0 B
MeeGo 1.2 A
Kindle 3 Fire A
Nokia Symbian Symbian^3 B
Chrome 11 15 A
Firefox 4 8 A
Internet Explorer 7 9 A
Opera 10 11 A
http://jquerymobile.com/gbs/
9. Markup-driven
JavaScript
<!-- -->
<a href="#" data-role="button">Button</a>
15. jQuery Mobile
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title> </title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<!-- -->
<div data-role="page" id="main">
<!-- -->
<div data-role="header">
<h1> </h1>
</div>
<!-- -->
<div data-role="content">
</div>
<!-- -->
<div data-role="footer">
<h4> </h4>
</div>
</div>
</body>
</html>
16. jQuery Mobile
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-
scale=1, maximum-scale=1">
<title> </title>
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile-1.0.min.js"></script>
</head>
http://jquerymobile.com/download/
18. <!-- -->
<div data-role="page">
<!-- -->
<div data-role="header">
<h1> </h1>
</div>
<!-- -->
<div data-role="content">
</div>
<!-- -->
<div data-role="footer">
<h1> </h1>
</div>
</div>
19. • ajax
‣
• slide
• slideup
• slidedown
• pop
• fade
• flip
20. <!-- slide -->
<a href="#next">slide</a>
<!-- -->
<a href="#next" data-transition="slideup">slide</
a>
sample/page_transition.html
22. <!-- data-rel dialog -->
<a href="#confirm" data-rel="dialog"> </a>
<!-- --->
<div data-role="page" id="confirm">
<div data-role="header">
<h1> </h1>
</div>
<div data-role="content">
...
</div>
</div>
sample/dialog.html
24. • <a data-role="button">
• <button>
‣ <input type="">
- button
- submit
- reset
- image
• : data-role="inline"
• : class="ui-bar"
25. ‣ : data-icon
• arrow-l
• etc...
‣ : data-iconpos
• left
• right
• notext
• etc...
28. <!-- data-role="fieldcontain" label -->
<div data-role="fieldcontain">
<label for="text-search"> :</label>
<input type="search" id="text-search"
placeholder=" ...">
</div>
30. • : data-role="controlgroup"
- button
- checkbox
- radio
- select
• : data-type
- vertical
- horizontal
31. • : <select
data-role="slider"><option>
×2
‣ : <select>
-
- : data-native-
menu="false"
33. 1
• : <ul data-role="listview">
-
-
- : <li><a>
-
-
•
- : <li>
divider="true"
data-list-
-
-
- : <li><img>
-
- : <li><span class="ui-li-
aside">
-
34. 2
• : <ul data-role="listview">
-
-
-
-
-
•
-
-
-
-
- : <li><img class="ui-li-
icon">
-
- : <ul data-inset="true"
35. 3
• : <ol data-role="listview">
-
- <ol>
-
- : <li><ul>
-
•
-
- : <li><span
class="ui-li-count">
-
-
-
-
-
36. 4
• : <ul data-role="listview">
-
-
-
-
- : <li>2 <a>
•
-
-
- : data-filster="true"
-
-
-
-
37. • :
data-fullscreen="true"
• :
data-
position="fixed"
• :
<div data-
role="navbar"><ul><li><
a>
40. • data-theme
• "a" "e" 4
• "f" "z"
49. jQuery Mobile
<link rel="stylesheet" href="http://code.jquery.com/mobile/
1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="custom.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></
script>
<script src="http://code.jquery.com/mobile/1.0/
jquery.mobile-1.0.min.js"></script>
59. <h1>
.ui-header .ui-title, .ui-footer .ui-title {
min-height: 1.1em;
text-align: center;
font-size: 16px;
display: block;
margin: .6em 90px .8em;
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
outline: 0!important;
}
63. ID
<a href="#" data-role="button" id="btn1" > 1</a>
<link rel="stylesheet" href="http://code.jquery.com/mobile/
1.0/jquery.mobile-1.0.min.css" />
<style>
#btn1.ui-btn-corner-all {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
</style>
64. DOM
ex) <input>
<input type="button" value=" 2" id="btn2">
<div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow
ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all" aria-
hidden="true">
<span class="ui-btn-text"> 2</span>
</span>
<input type="button" value=" 2" id="btn2" class="ui-btn-
hidden" aria-disabled="false">
</div>
66. "ui-btn-active"
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">Menu1</a></li>
<li><a href="#page2" data-transition="fade">Menu2</a></li>
<li><a href="#page3" data-transition="fade">Menu3</a></li>
</ul>
</div>
69. jQuery Mobile
anything!
<input type="button" value=" 1" data-role="none" >
72. jQuery Mobile
jQuery jQuery Mobile
<link rel="stylesheet" href="jquery.mobile.css" />
<script src="jquery.js"></script>
<!-- jQuery jQuery Mobile -->
<script>
$(document).bind("mobileinit", function(){
$.mobile.foo = bar;
});
</script>
<script src="jquery.mobile.js"></script>
76. UI
<link rel="stylesheet" href="jquery.mobile.css" />
<script src="jquery.js"></script>
<!-- jQuery jQuery Mobile -->
<script>
$(document).bind("mobileinit", function(){
//data-role="page"
$.mobile.page.prototype.options.foo = bar;
});
</script>
<script src="jquery.mobile.js"></script>
78. //
$(document).bind('mobileinit', function(){
//
$.mobile.loadingMessage = ' ';
$.mobile.pageLoadErrorMessage = ' ';
$.mobile.dialog.prototype.options.closeBtnText = ' ';
$.mobile.selectmenu.prototype.options.closeText= ' ';
$.mobile.listview.prototype.options.filterPlaceholder = '
';
$.mobile.page.prototype.options.backBtnText = ' ';
});
86. UI API1
page()
button(method)
• method :
- refresh
β1
- enable
- disable
88. UI API2
dialog(method)
• method :
- close
listveiw(method)
• method :
- refresh
90. • - pageinit
- - pagebeforeshow
-
tap
- pagebeforehide
-
taphold
- pageshow
-
swipe
swipeleft
- pagehide
- swiperight •
• - pagebeforechange
- - pagechange
-
scrollstart
scrollstop
- pagechangefailed
• •
- - mobileinit
-
pagebeforecreate
- orientationchange
pagecreate
- throttledresize
91. 1
mobileinit
jQuery Mobile jQuery Mobile
//jQuery Moible
$(document).bind('mobileinit', function(){
//
$.mobile.loadingMessage = ' ';
});
92. 2
pagebeforecreate pagecreate
1
//
$('#pageId').bind("pagebeforecreate", function(evt){
//
//Home
$('#target').append('<a href="#home" data-role="button"
data-icon="home" data-iconpos="notext">Home</a>');
//false
//return false;
});
99. PhoneGap
• Web HTML/CSS/
JavaScript
• One source Android iPhone
•
• Dreamweaver CS5.5
106. jQuery Mobile
Publickey
http://www.publickey1.jp/m/ http://kokucheese.com/s/
