Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

スマホウェブの本命 jQueryMobile

14,602 views

Published on

スマートフォンでウェブサイトを作る際に、使いやすい・見やすいインターフェイスが作成出来るjQueryMobileのまとめ

Published in: Technology, Design
  • Be the first to comment

スマホウェブの本命 jQueryMobile

  1. 1. スマホウェブの本命 jQueryMobile 2012/04/08 mauekusa
  2. 2. jQueryMobile スマートフォン タブレット向けの プラットフォーム簡単にタッチパネル向け インターフェイスが 作れる http://jquerymobile.com/
  3. 3. ドキュメント サンプル付きの 分かりやすい ドキュメントも 公式ページに掲載http://jquerymobile.com/demos/1.1.0-rc.2/
  4. 4. プラットフォーム 幅広く様々な プラットフォームに グレードを分けて サポートしているhttp://jquerymobile.com/original-graded-browser-matrix/
  5. 5. ページの基本 <!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><!-- /header --> ヘッダ <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><!-- /content --> <div data-role="footer"> <h1>footer</h1> </div><!-- /footer --> フッタ </div><!-- /page --> </body> </html>
  6. 6. Theme 標準で5種類を提供 <div data-role="header"> <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> <a href="#" data-role="button" data-inline="true">Button</a> <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> <a href="#" data-role="button" data-inline="true">Button</a> </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> <a href="#" data-role="button" data-inline="true">Button</a> </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> <a href="#" data-role="button" data-inline="true">Button</a> <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="#" data-role="button" data-inline="true">Button</a>
  7. 7. タップしやすいボタン標準ボタン <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
  8. 8. 基本リスト <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> <ul data-role="listview" data-inset="true">カウント <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">Schindlers List</a></li>
  9. 9. 画像付きリスト <ul data-role="listview" data-inset="true"> <li><a href="index.html"> <h3>Stephen Weber</h3>フォーマット <p><strong>Youve been invited to a meeting at Filament Group in Boston, MA</strong></p> <p>Hey Stephen, if youre available at 10am tomorrow, weve got a meeting with the jQuery team.</p> <p class="ui-li-aside"><strong>6:24</strong>PM</p> </a></li> <li><a href="index.html"> リスト <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> <ul data-role="listview" data-inset="true">アイコン <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/fi.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> <ul data-role="listview" data-inset="true"> <li><a href="index.html"> <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> <li><a href="index.html"> <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> <li><a href="index.html"> <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>
  10. 10. 分割・検索リスト <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-filter="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>
  11. 11. フォーム要素 <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <div data-role="fieldcontain"> <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> <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" /> <label for="checkbox-7"><em>i</em></label> <div data-role="fieldcontain"> <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" /> <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"> <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> <div data-role="fieldcontain"> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" /> <label for="slider2">Flip switch:</label> <label for="radio-choice-3">Hamster</label> <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" /> <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 data-role="fieldcontain"> </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" /> <div data-role="fieldcontain"> <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> <div data-role="fieldcontain"><div data-role="fieldcontain"> <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 youd 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> <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" /> <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> <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" /> <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>
  12. 12. レイアウトグリッド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><!-- /grid-a --> <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><!-- /grid-b --> <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><!-- /grid-c --> <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><!-- /grid-d -->
  13. 13. フォームをうまくレイアウトする <!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"> <div data-role="header"> <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><!-- /header --> <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><!-- /grid-b --> 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><!-- /content --> <div data-role="footer"> <h1>footer</h1> </div><!-- /footer --> </div><!-- /page --> </body> </html>
  14. 14. オススメ書籍AndroidのためのHTML5本格アプリ開発 jQuery Mobileでかんたん スマートフォン向けWeb http://amzn.to/HMl5kH ―jQuery Mobile1.0Final対応 http://amzn.to/HMm3NEjQuery Mobile jQuery Mobile スマートフォンサイト 制作入門コース http://amzn.to/HMlrrx http://amzn.to/IeuohIjQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL) http://amzn.to/IetVw2

×