スマホウェブの本命 jQueryMobile

スマホウェブの本命
jQueryMobile
2012/04/08
mauekusa

jQueryMobile
スマートフォン
タブレット向けの
プラットフォーム

簡単にタッチパネル向け
インターフェイスが
作れる
http://jquerymobile.com/

ドキュメント
サンプル付きの
分かりやすい
ドキュメントも
公式ページに掲載

http://jquerymobile.com/demos/1.1.0-rc.2/

プラットフォーム
幅広く様々な
プラットフォームに
グレードを分けて
サポートしている

http://jquerymobile.com/original-graded-browser-matrix/

ページの基本
<!DOCTYPE html>
<html>

<head>

<title>My Page</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" /
>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script>
</head>
<body>

<div data-role="page">

<div data-role="header">

<h1>My Title</h1>
</div> ヘッダ

<div data-role="content">

<p>Hello world</p>

<br><br><br><br>

コンテンツ

<br><br><br><br>

<br><br><br><br>

<br><br><br><br>

<br><br><br><br>

</div>

<div data-role="footer">

<h1>footer</h1>
</div> フッタ
</div>

</body>
</html>

Theme 標準で5種類を提供

<h1>Default Theme</h1>
</div>

Default <div class="ui-body ui-body-c">

</div>
<h3>Default Theme Content Header</h3>
<p>This is the default content color swatch and a preview of a <a href="#" class="ui-link">link</a>.</p>
<a href="#" data-role="button" data-inline="true">Button</a>

<div data-role="header" data-theme="a">

<h1>Header A</h1>
</div>

Swatch A <div class="ui-body ui-body-a">

</div>
<h3>Header</h3>
<p>This is content color swatch "A" and a preview of a <a href="#" class="ui-link">link</a>.</p>

<div data-role="header" data-theme="b">

<h1>Header B</h1>
</div>

Swatch B
<div class="ui-body ui-body-b">

<h3>Header</h3>

<p>This is content color swatch "B" and a preview of a <a href="#" class="ui-link">link</a>.</p>

</div>

<div data-role="header" data-theme="c">

<h1>Header C</h1>
</div>

Swatch C
<div class="ui-body ui-body-c">

<h3>Header</h3>

<p>This is content color swatch "C" and a preview of a <a href="#" class="ui-link">link</a>.</p>

</div>

<div data-role="header" data-theme="d">

<h1>Header D</h1>
</div>

Swatch D <div class="ui-body ui-body-d">

</div>
<h3>Header</h3>
<p>This is content color swatch "D" and a preview of a <a href="#" class="ui-link">link</a>.</p>

<div data-role="header" data-theme="e">

<h1>Header E</h1>
</div>

Swatch E <div class="ui-body ui-body-e">

</div>
<h3>Header</h3>
<p>This is content color swatch "E" and a preview of a <a href="#" class="ui-link">link</a>.</p>

タップしやすいボタン
標準ボタン <a href="index.html" data-role="button">Link button</a>

ミニボタン <a href="index.html" data-role="button" data-mini="true">Link button</a>

インライン <a href="index.html" data-role="button" data-inline="true">Button</a>

ボタン
テーマ指定
<a href="index.html" data-role="button" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-inline="true" data-
theme="b">Save</a>

アイコン指定 <a href="index.html" data-role="button" data-icon="delete">Delete</a>

data-icon

基本リスト
<ul data-role="listview" data-inset="true">

シンプル

<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
<li><a href="index.html">BMW</a></li>

リスト

</ul>
<li><a href="index.html">Cadillac</a></li>
<li><a href="index.html">Ferrari</a></li>


カウント <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>

バブル <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>

<ol data-role="listview" data-inset="true">

ナンバー

<li><a href="index.html">The Godfather</a></li>
<li><a href="index.html">Inception</a></li>
<li><a href="index.html">The Good, the Bad and the Ugly </a></li>

リスト

</ol>
<li><a href="index.html">Pulp Fiction</a></li>
<li><a href="index.html">Schindler's List</a></li>

画像付きリスト

<li><a href="index.html">

<h3>Stephen Weber</h3>

フォーマット

<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>

<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>

<p class="ui-li-aside"><strong>6:24</strong>PM</p>

</a></li>


リスト

<h3>jQuery Team</h3>

<p><strong>Boston Conference Planning</strong></p>

<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>

<p class="ui-li-aside"><strong>9:18</strong>AM</p>

</a></li>
</ul>


アイコン

<li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon ui-corner-none">France <span class="ui-li-count">4</
span></a></li>

<li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>

<li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></
a></li>

<li><a href="index.html"><img src="images/ﬁ.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>

リスト

<li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>

<li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon ui-corner-none">United States <span class="ui-li-
count">62</span></a></li>
</ul>



<img src="images/album-bb.jpg" />

<h3>Broken Bells</h3>

<p>Broken Bells</p>

サムネイル

</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>

<img src="images/album-hc.jpg" />

<h3>Warning</h3>

<p>Hot Chip</p>

リスト </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>

<img src="images/album-p.jpg" />

<h3>Wolfgang Amadeus Phoenix</h3>

<p>Phoenix</p>

</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>
</ul>

分割・検索リスト
<ul data-role="listview">
<li data-role="list-divider">A</li>
分割 <li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
リスト <li data-role="list-divider">B</li>
<li><a href="index.html">Bob Cabot</a></li>
</ul>

<ul data-role="listview" data-ﬁlter="true">

検索付き

<li><a href="index.html">Acura</a></li>

<li><a href="index.html">Audi</a></li>

<li><a href="index.html">BMW</a></li>

<li><a href="index.html">Cadillac</a></li>
リスト

<li><a href="index.html">Dodge</a></li>
<li><a href="index.html">Ford</a></li>
</ul>

フォーム要素
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">

<legend>Font styling:</legend>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />

<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
</div>

<label for="checkbox-6">b</label>


<label for="checkbox-7"><em>i</em></label>

<label for="textarea">Textarea:</label>

<label for="checkbox-8">u</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> </fieldset>
</div>
</div>

<div data-role="fieldcontain"> <fieldset data-role="controlgroup">

<legend>Choose a pet:</legend>
<label for="search">Search Input:</label>

<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1"
<input type="search" name="password" id="search" value="" /> checked="checked" />
</div>

<label for="radio-choice-1">Cat</label>

<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />

<label for="radio-choice-2">Dog</label>


<label for="slider2">Flip switch:</label>

<label for="radio-choice-3">Hamster</label>


<select name="slider2" id="slider2" data-role="slider">

<label for="radio-choice-4">Lizard</label>

<option value="off">Off</option> </fieldset>
</div>

<option value="on">On</option>

</select>
</div> <fieldset data-role="controlgroup" data-type="horizontal">

<legend>Layout view:</legend>

<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on"
checked="checked" />

<label for="radio-choice-c">List</label>

<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />

<label for="slider">Slider:</label>

<label for="radio-choice-d">Grid</label>

<input type="range" name="slider" id="slider"

<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
value="50" min="0" max="100" data-highlight="true" />

<label for="radio-choice-e">Gallery</label>
</fieldset>
</div> </div>


<label for="select-choice-1" class="select">Choose shipping method:</label>
<fieldset data-role="controlgroup">

<select name="select-choice-1" id="select-choice-1">

<legend>Choose as many snacks as you'd like:</legend>

<option value="standard">Standard: 7 day</option>

<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />

<option value="rush">Rush: 3 days</option>

<label for="checkbox-1a">Cheetos</label>

<option value="express">Express: next day</option>


<option value="overnight">Overnight</option>

<label for="checkbox-2a">Doritos</label>

</select>

<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" /> </div>

<label for="checkbox-3a">Fritos</label>


<label for="checkbox-4a">Sun Chips</label> <div class="ui-body ui-body-b">
</fieldset> <fieldset class="ui-grid-a">
</div>

<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>

<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</div>

レイアウトグリッド
2段ボタン
<fieldset class="ui-grid-a">
! <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
! <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</fieldset>

2段レイアウト
<div class="ui-grid-a">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
</div>

<div class="ui-grid-b">

3段レイアウト
! <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
! <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
! <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">Block C</div></div>
</div>

<div class="ui-grid-c">

4段レイアウト
! <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
! <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
! <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
! <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
</div>

<div class="ui-grid-d">
! <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>

5段レイアウト
! <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
! <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
! <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
! <div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:120px">E</div></div>
</div>

フォームをうまくレイアウトする
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1"> <div data-role="page">

<title>My Page</title>

<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.

<h1>My Title</h1>
2.min.css" />

</div>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script>

<div data-role="content">

<h2>サンプル</h2>

<style type="text/css">
input[type="text"] { <h3>均等割り付けボタン</h3>

font-size: 16px; <div class="ui-grid-b">

line-height: 1.4;

<div class="ui-block-a"><a href="#" data-role="button" data-theme="a">Button A</a></div>

padding: .4em;

<div class="ui-block-b"><a href="#" data-role="button" data-theme="b">Button B</a></div>

height: 26px;

<div class="ui-block-c"><a href="#" data-role="button" data-theme="c">Button C</a></div>

margin-top: 1px; </div>

margin-bottom: 1px;

border-radius: .6em; <h3>横幅指定で横並びボタン</h3>
-webkit-border-radius: .6em;
-moz-border-radius: .6em; <div style="width:400px; overflow:hidden; ">
background: #f0f0f0;

<a href="#" data-role="button" data-theme="a" data-inline="true" data-icon="back" >戻る</a>
border: 1px solid #b3b3b3;

<a href="#" data-role="button" data-theme="b" data-inline="true" data-icon="check">実行</a>
color: #333;

<a href="#" data-role="button" data-theme="c" data-inline="true" data-icon="delete">キャンセル</a>

-moz-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);

-webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,.2); </div>

box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
} <h3>Input fieldの長さ指定</h3>
<div data-role="fieldcontain" style="width:100%; overflow:hidden;">
</style> <label>ラベル: </label><input data-role="none" type="text" name="name" id="name" value="" size=12>

</head> <label>円</label>
<body> </div>

<br><br>

</div>

<div data-role="footer">

<h1>footer</h1>

</div>

</div>

</body>
</html>

オススメ書籍
AndroidのためのHTML5本格アプリ開発 jQuery Mobileでかんたん
スマートフォン向けWeb
http://amzn.to/HMl5kH ―jQuery Mobile1.0Final対応

http://amzn.to/HMm3NE

jQuery Mobile jQuery Mobile スマートフォンサイト
制作入門コース
http://amzn.to/HMlrrx
http://amzn.to/IeuohI

jQuery Mobile スマートフォンサイト
デザイン入門 (WEB PROFESSIONAL)

http://amzn.to/IetVw2

スマホウェブの本命 jQueryMobile

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (20)

More from Manabu Uekusa

More from Manabu Uekusa (16)

スマホウェブの本命 jQueryMobile