jQMまとめ - テーマシステム

JQM

Dreamweaverでのテーマ適用 jQuery Mobile スウォッチ Audio <div data-role="content"> <p>musicA</p> <audio src="microscape.mp3" controls></audio> <p>musicB</p> <audio src="az_snd10.wav" controls></audio> </div>

2013-03-27

jQMまとめ - フッター

JQM

フッターの基本ヘッダーと同様に設定します data-role属性「footer」を記述しますテキストはh4である必要はありません（初期設定のスタイルが殆ど無いため自由度が高いエリアです） <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile Sample</title> </meta></meta></head></html>

2013-03-26

jQMまとめ - ヘッダー

JQM

ヘッダーの基本ページのコンテナ要素の直下にヘッダー用のコンテナを用意し、data-role属性「header」を記述します <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile Sample</title> </meta></meta></head></html>

2013-03-25

Google Mapsの設置

JQM

GoogleMap 「アクセス」のページ（#access）では、Googleマップを利用して地図を表示しますただし、Googleマップから取得したタグを貼り付けても、一部のスマートフォンでは地図が表示されません <div data-role="content"> <h2 class="h1">アクセス</h2> <iframe width="425" ...中略... 大きな地図で見る</a></small> </div> そこで、iframeは使わずに、Goog</iframe></div>…

2013-03-24

CSSカスタマイズ

JQM

HTMLの作成作例を引用して解説します。 meta要素のviewportには「width=device-width, initial-scale=1」を指定し、横幅を端末の画面幅に、初期の拡大率を100％に設定します <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Mobile Sample33</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </meta></meta></head></html>

2013-03-23

Theme Rollerによるカスタマイズ

JQM

Theme Roller Theme Roller：http://jquerymobile.com/themeroller/ 「Adobe Kuler」をクリック標準のテーマを維持したまま新しいテーマを作る新しくテーマを作成していくと、はじめから用意されていた「a〜e」が書き換えられてしまいます維持したまま「f…

2013-03-22

ページ遷移のアニメーションエフェクト

JQM

ページ遷移のアニメーションエフェクトトップページ（#index）から各ページへのリンクをタップすると、ページが左右にスライドしながら遷移します jQuery Mobileではさまざまなページ遷移のアニメーションエフェクトが用意されており、a要素に対してカスタ…

2013-03-21

カスタマイズ

JQM

見出しのテーマの変更 jQuery Mobileのリスト表示は、ul/ol要素にdata-theme属性でテーマを指定できます <ul data-role="listview" data-theme="e"> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> </ul> sample17 data-…

2013-03-20

グリッドレイアウト

JQM

見出しのテーマの変更 jQuery Mobileでは要素を均等に分割して並べる「グリッドレイアウト」の機能が用意されています 2カラム 2カラムにしたい場合は、class属性「ui-grid-a」を付けた要素の内側に、class属性「ui-block-a」とclass属性「ui-block-b」を付…

2013-03-19

問い合わせフォームの作成

JQM

フォームUIの課題とjQuery Mobileによる解決スマートフォンのブラウザーに標準で用意されているフォーム部品はどれもサイズが小さく、そのままでは指による操作に適しませんスマートフォンサイトの制作ではフォームをスマートフォンに最適化することが重要…

2013-03-18

リストの表示

JQM

リストの表示スマートフォンサイトで多用されるのが、リスト表示です jQuery Mobileではさまざまなリスト表示のUIが用意されています一般的なリスト data-role属性「listview」 ul、ol/li要素などのリストでマークアップされた項目にdata-role属性「listvi…

2013-03-17

ページ遷移のアニメーションエフェクト

JQM

ページ遷移のアニメーションエフェクトトップページ（#index）から各ページへのリンクをタップすると、ページが左右にスライドしながら遷移します jQuery Mobileではさまざまなページ遷移のアニメーションエフェクトが用意されており、a要素に対してカスタ…

2013-03-16

「Backボタン」のカスタマイズ

JQM

Backボタンヘッダー領域に「戻る」ボタンを追加ページのコンテナ要素に「data-add-back-btn="true"」を設定する <body> <div data-role="page" id="index" data-theme="c"> <div data-role="header" data-theme="b"> <h1>TOPページ</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">メニュー</li> </ul></div></div></body>

2013-03-15

マークアップの基本とCSSの変更

JQM

サイト構造 aboutページの作成 <body> <div data-role="page" id="index" data-theme="c"> <div data-role="header" data-theme="b"> <h1>TOPページ</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">メニュー</li> <li><a href="#about"><h3>このサイトについて</h3></a></li> <li><…</li></ul></div></div></body>

2013-03-14

スマートフォンらしいリスト表示

JQM

リスト表示リストは、コンテンツ領域内（data-role="content"）にul要素を記述し、ul要素に対してカスタムデータ属性「data-role="listview"」を指定することで表示できますブロックリンク XHTMLではa要素の内側にh3要素などのブロックレベル要素を記述で…

2013-03-13

デザインテーマの変更

JQM

デザインテーマデザインは、デフォルトでは黒を基調としたテーマ（スキン）が適用されていますが、ページ要素に対してカスタムデータ属性「data-theme」を指定することでテーマを変更できます「data-theme」の値に「b」を指定すると、iPhoneの標準UIのよう…

2013-03-12

ページ遷移とレイアウトの定義

JQM

ページ内リンク jQuery Mobileでは複数のページを1つのHTMLに記述するので、ページ遷移にはページ内リンクを利用します #（ハッシュ）を利用する <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ページ遷移</title> </meta></meta></head></html>

2013-03-11

jQueryMobile入門

JQM

jQuery Mobileデザイン入門 ASCII.jp jQuery Mobileデザイン入門 HTML5ひな形 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5ひな形</title> </head> <body> </body> </html> jQuery MobileとjQueryの読み込み CDNからファイルを読み込む <head> <meta charset="UTF-8"> <title>jQueryの読み込み：CDN</title> </meta></head>

2013-03-10

戻るボタン

JQM

jQuery Mobile 1.3.0 旧バージョンで次ページ以降に自動生成された「戻る」ボタンが、自動生成されません自動生成するには、以下の２つの方法があります JavaScriptで記述する場合 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script> $(document).bind("mobilein…</link>

2013-03-09

ページの作成

JQM

ページの作成 jQuery Mobileでは、1つのHTMLに複数のページのコンテンツをまとめて記述しますページの区切りやページ内のレイアウトは、カスタムデータ属性のdata-role属性で定義しますページの作成 data-role="page" div要素などにdata-role属性「page」…

2013-03-08

ページ構成

基本設計ページサイズは「横幅320px」を基準に設計 iPhoneの縦幅は、480pxですが上下に「URL表示」「ナビゲーションバー」があるため、ページ内容が表示できる領域は「縦幅356px」になります「URL表示」「ナビゲーションバー」を隠した場合は「縦幅416px」…

2013-03-07

Dreamweaverでの設計

Dreamweaverでの設計基本構造の入力パネルを表示「挿入」メニュー→「jQueryMobile」ページの構造を挿入「ページ」をクリック「ページ」を「body」内に、ドロップ&ドラッグ「ヘッダー」と「フッター」を含める <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>サイトタイトル</title> </meta></meta></head></html>