jQuery Mobileではじめるモバイルサイト／アプリ制作

jQuery Mobile

2011/12/13 at
#ragtech1213
Toru Yoshikawa ( @yoshikawa_t )

Toru Yoshikawa
@yoshikawa_t

• Google API Expert Chrome

• html5j.org HTML5

• allWeb jQuery Mobile

• Web

• Blog http://d.hatena.ne.jp/pikotea/

• jQuery Mobile
• jQuery Mobile

•
• Web API

•

http://jquerymobile.com/

jQuery Mobile
•

• jQuery
•

•

jQuery Mobile

• Cross-platform
• Markup-driven
• Progressive Enhancement

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/

Markup-driven
JavaScript


<a href="#" data-role="button">Button</a>

Progressive Enhancement

JavaScript ON JavaScript OFF

jQuery Mobile
•

•
jQuery
Mobile

jQuery Mobile

CMS

jQuery Mobile

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>

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/

<div data-role="page">
  
  <h1> </h1>
  </div>
  

  </div>
  
  <div data-role="footer">
  <h1> </h1>
  </div>
</div>

• ajax

‣
• slide
• slideup
• slidedown
• pop
• fade
• ﬂip

<a href="#next">slide</a>


<a href="#next" data-transition="slideup">slide</
a>

sample/page_transition.html

<a href="#confirm" data-rel="dialog"> </a>


<div data-role="page" id="confirm">
  <h1> </h1>
  </div>
  ...
  </div>
</div>

sample/dialog.html

http://d.hatena.ne.jp/pikotea/20101019/

• <a data-role="button">
• <button>
‣ <input type="">
- button
- submit
- reset
- image
• : data-role="inline"
• : class="ui-bar"

‣ : data-icon

• arrow-l

• etc...

‣ : data-iconpos

• left

• right

• notext

• etc...

• <input type="">
- text
- search
- range
• <textarea>

• data-role="ﬁeldcontain" label

width < 480px width >= 480px

<div data-role="fieldcontain">
<label for="text-search"> :</label>
<input type="search" id="text-search"
placeholder=" ...">
</div>

‣ <input type="">
- checkbox
- radio
• <label>

• : data-role="controlgroup"

- button
- checkbox
- radio
- select

• : data-type
- vertical
- horizontal

• : <select
data-role="slider"><option>
×2

‣ : <select>
-
- : data-native-
menu="false"

• <div data-role="collapsible">
• : data-collapsed

- : false
- : true

• data-collapsible-set :

1
• : <ul data-role="listview">

-
-
- : <li><a>
-
-
•
- : <li>
divider="true"
data-list-

-
-
- : <li><img>
-
- : <li><span class="ui-li-
aside">
-

2

-
-
-
-
-
•
-
-
-
-
- : <li><img class="ui-li-
icon">
-
- : <ul data-inset="true"

3
• : <ol data-role="listview">

-
- <ol>
-
- : <li><ul>
-
•
-
- : <li><span
class="ui-li-count">
-
-
-
-
-

4

-
-
-
-
- : <li>2 <a>

•
-
-
- : data-ﬁlster="true"
-
-
-
-

• :
data-fullscreen="true"

• :
data-
position="ﬁxed"
• :

<div data-
role="navbar"><ul><li><
a>

•
‣ <div class="ui-grid-a">
- <div class="ui-block-a">
- <div class="ui-block-b">

jQuery Mobileではじめるモバイルサイト／アプリ制作

• data-theme

• "a" "e" 4

• "f" "z"

•
★ThemeRoller
★

ThemeRoller
jQuery Mobile

http://jquerymobile.com/themeroller/

ThemeRoller
•
•
• 30

•
• Adobe Kuler http://kuler.adobe.com/

Demo

http://jquerymobile.com/themeroller/index.php?style_id=20111212-57 30

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>

data-theme

<div data-role="page" data-theme="f">
<div data-role="header" data-theme="f">
...
</div>
...
</div>
</div>

ThemeRoller

1.
ThemeRoller

2.

iOS

http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile

• Internet Explorer -
• Chrome -
• Firefox - ﬁrebug
• Opera - Dragonﬂy
• Dreamweaver

<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;
}

.ui-btn-corner-all {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}

ID

<a href="#" data-role="button" id="btn1" > 1</a>

<style>
#btn1.ui-btn-corner-all {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
</style>

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>

"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>

ui-body-a
ui-bar-a
ui-btn-active
ui-btn-up-a
ui-btn-down-a
ui-btn-hover-a
ui-corner-all
ui-corner-top
ui-corner-bottom

• <div>
- ui-body-e
- ui-corner-all

jQuery Mobile

anything!

<input type="button" value=" 1" data-role="none" >

jQuery Mobile Gallery

http://www.jqmgallery.com/

jQuery Mobile
jQuery jQuery Mobile

<link rel="stylesheet" href="jquery.mobile.css" />
<script src="jquery.js"></script>

<script>
$(document).bind("mobileinit", function(){
$.mobile.foo = bar;
});
</script>
<script src="jquery.mobile.js"></script>

1
$.mobile
loadingMessage
ajax
: "loading"

pageLoadErrorMessage
ajax
: "Error Loading Page"

2
$.mobile
touchOverﬂowEnabled
overﬂow-scrolling: touch
iOS5
: true

pushStateEnabled
URL history.pushState
URL
: true

3
$.mobile
ajaxEnabled
ajax
: true

UI
<link rel="stylesheet" href="jquery.mobile.css" />
<script src="jquery.js"></script>

<script>
$(document).bind("mobileinit", function(){

//data-role="page"
$.mobile.page.prototype.options.foo = bar;

});
</script>
<script src="jquery.mobile.js"></script>

//
$.mobile.page.prototype.options.backBtnText = ' ';


<div data-role="page" data-back-btn-text=" ">
...
</div>

※ data

//
$(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 = ' ';
});

API1
$.mobile.changePage(to, options)

• to:
URL
jQuery $(‘#pageid’)

• options :
- type :”get”
get post
- data

- transition :

- reverse : false

- changeHash : true

- reloadPageI : false

$.mobile.changePage(to, options)
// id="next"
$.mobile.changePage('#next');

//
$.mobile.changePage('next.html', {
type: 'get',
data: $('#formId').serialize() //
});

// pop
$.mobile.changePage('#next', {
transition: 'pop',
changeHash: false
});

API2
$.mobile.showPageLoadingMsg()

$.mobile.hidePageLoadingMsg()

$.mobile.showPageLoadingMsg()
$.mobile.hidePageLoadingMsg()
//
$.mobile.showPageLoadingMsg();

// :
var list = $('#listview-id'); //
for ( var i = 0; i < 10; i++ ) {
list.append($('<li> ' + i + '</li>'));
}
list.listview('refresh');

//
$.mobile.hidePageLoadingMsg();

API3
$.mobile.silentScroll(yPos)
y

• yPos :
y :0

$.mobile.silentScroll(yPos)
//
$.mobile.silentScroll();

//
$.mobile.silentScroll($('#target').position().top);

UI API1
page()

button(method)

• method :
- refresh
β1
- enable

- disable

page()
//
$('#target').append($('<input type="button" value=" ">'));
$('#target').page();

button()
//
$('#buttonid').button('disable');

UI API2
dialog(method)

• method :
- close

listveiw(method)

• method :
- refresh

• - pageinit

- - pagebeforeshow

-
tap
- pagebeforehide

-
taphold
- pageshow

-
swipe
swipeleft
- pagehide

- swiperight •
• - pagebeforechange

- - pagechange

-
scrollstart
scrollstop
- pagechangefailed

• •
- - mobileinit

-
pagebeforecreate
- orientationchange
pagecreate
- throttledresize

1
mobileinit
jQuery Mobile jQuery Mobile

//jQuery Moible
$(document).bind('mobileinit', function(){

//
$.mobile.loadingMessage = ' ';
});

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;
});

3
pagebeforechange pagechange

pagebeforecreate pagebeforeshow

pagechangefailed

pagebeforeload
pageload pageloadfailed
pagebeforecreate
pagecreate
pageinit
pagebeforechange
pagebeforeshow
pageshow
pagechange pagechangefailed

//
$(document).ready( function(){

$(':jqmData(role=page)').live("pagebeforecreate", function
(evt){

//
$(this).find(':jqmData(role=header)').append(
$('<a href="#main" data-role="button" data-icon="home"
data-iconpos="notext" class="ui-btn-right">Home</a>')
);
});
});

<div data-role="page" data-dom-cache="true">...</a>

<a href="next.html" data-prefetch>...</a>

> git clone git://github.com/jquery/jquery-mobile.git
build.xml
> cd jquery-mobile
> make

PhoneGap
Web

http://phonegap.com/

PhoneGap
• Web HTML/CSS/
JavaScript

• One source Android iPhone

•

• Dreamweaver CS5.5

PhoneGap Build

PhoneGap Build

https://build.phonegap.com/

PhoneGap
• HTML/CSS/JavaScript

•

• PhoneGap Build

jQuery Mobile
Publickey

http://www.publickey1.jp/m/ http://kokucheese.com/s/

jQuery Mobile
Final fantasy XI Forum

http://forum.square-enix.com/ffxi/
http://www.junkudo.jp/
forum.php

jQuery Mobile
WALLPAPER COLLECTION

http://machiuke.v-colors.com/ http://baito.mynavi.jp/sp/

jQuery Mobile
Design Spice

http://design-spice.com/

jQuery Mobile

• jQuery Mobile

• UI

• Date Picker UI

Thank You!!
Toru Yoshikawa ( @yoshikawa_t )

http://jquerymobile.com/

http://jquerymobile.com/demos/

jQuery Mobile
http://d.hatena.ne.jp/pikotea/20101019/

jQuery Mobile
http://dev.screw-axis.com/doc/jquery_mobile/

jQuery Mobile
http://www.jqmgallery.com/

jQuery Mobile
http://www.adobe.com/jp/joc/devnet/dreamweaver/articles/jq_snippets.html

Github jquery-mobile
https://github.com/jquery/jquery-mobile

jQuery Mobileではじめるモバイルサイト／アプリ制作

More Related Content

What's hot (7)

Viewers also liked (20)

More from yoshikawa_t (20)

jQuery Mobileではじめるモバイルサイト／アプリ制作