コンテンツ
- 1つのHTMLファイルに複数のページをコーディングする方法
- 説明
- ダイアログボックスとトランジションの使用方法
- 使用できるトランジション
- 説明
- ボタンの作り方
- 説明
- ナビゲーションバーの作成方法
- ナビゲーションバーのHTMLをコーディングする方法：
- jQueryMobileでコンテンツをフォーマットする方法
- jQueryMobileが使用するデフォルトのスタイル
- 説明
- HTML要素にテーマを適用する方法
- テーマを適用する2つの方法：
- 説明
- 展望
これは、の第15章からの編集された抜粋です。 MurachのHTML5とCSS3 ザック・ルヴァルカバとアン・ベームによる。
jQuery Mobileは、モバイルWebサイトの開発に使用できる無料のオープンソースのクロスプラットフォームJavaScriptライブラリです。このライブラリを使用すると、ネイティブモバイルアプリケーションのページのように見えるページを作成できます。
jQuery Mobileは現在ベータテストバージョンとして利用可能ですが、このバージョンは、優れたモバイルWebサイトを開発するために必要なすべての機能をすでに提供しています。その結果、すぐに使い始めることができます。このバージョンは継続的に拡張されることも期待できるため、jQueryMobileはさらに改善されるだけです。
この記事では、モバイルWebサイトのページを作成するための基本的なテクニックを学びます。これには、ダイアログボックス、ボタン、およびナビゲーションバーの使用が含まれます。
1つのHTMLファイルに複数のページをコーディングする方法
画面WebサイトのWebページを開発する方法とは対照的に、jQueryMobileでは単一のHTMLファイルに複数のページを作成できます。これを図15-7に示します。ここでは、サイトの2つのページと、これらのページのHTMLを確認できます。驚くべきことに、両方のページが1つのHTMLファイル内にコーディングされています。
ページごとに、data-role属性の値として「page」を使用して1つのdiv要素をコーディングします。次に、これらの各div要素内で、各ページのヘッダー、コンテンツ、およびフッターのdiv要素をコーディングします。後でHTMLファイルがロードされると、ファイルの本文の最初のページが表示されます。
HTMLファイルのページ間をリンクするには、第7章の図7-11に示すように、プレースホルダーを使用します。たとえば、この例の最初のページのa>要素は、ユーザーがをタップすると「#toobin」に移動します。このリンクのコンテンツとしてコード化されているh2またはimg要素。これは、id属性として「toobin」を持つdiv要素を参照します。これは、リンクをタップすると、リーダーがファイルの2番目のページに移動することを意味します。
この例では2ページしか表示されていませんが、1つのHTMLファイル内に多くのページをコーディングできます。ただし、すべてのページとその画像、JavaScript、およびCSSファイルは単一のHTMLファイルで読み込まれることに注意してください。その結果、1つのファイルに保存するページが多すぎると、読み込み時間が長くなります。その場合、ページを複数のHTMLファイルに分割できます。
1つのHTMLファイルの本文にある2つのページのHTML：
div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> 2011-2012スピーカー/ h3> a href = "＃toobin"> h4> Jeffrey Toobinbr> 2011年10月19日/ h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>！-残りのスピーカーの要素- -> / section>フッターデータ-role = "footer"> h4>©2011 / h4> / footer> / div> div data-role = "page" id = "toobin">ヘッダーデータ-role = "header"> h1> SJVタウンホール/ h1> / header>セクションdata-role = "content"> h3> The Supreme Nine：br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p>絶賛されたベストセラーの作者、i> The Nine：！-コピーの続き-> / section> footer data-role =" footer "> h4>©2011 / h4> / footer> / div>
説明
- jQuery Mobileを使用する場合、ページごとに個別のHTMLファイルを開発する必要はありません。代わりに、単一のHTMLファイルのbody要素内で、data-role属性を「page」に設定してページごとに1つのdiv要素をコーディングします。
- div要素ごとに、id属性を、他のページのa>要素のhref属性からアクセスできるプレースホルダー値に設定します。
ダイアログボックスとトランジションの使用方法
図15-8は、リンクがタップされたときに開くダイアログボックスを作成する方法を示しています。これを行うには、他のページと同じようにダイアログボックスをコーディングします。ただし、そのページに移動するa>要素では、値として「dialog」を使用してdata-rel属性をコーディングします。
この図の例が示すように、jQuery Mobile CSSファイルは、通常のWebページとは異なる方法でダイアログボックスをフォーマットします。デフォルトでは、ダイアログボックスの背景は暗く、前景のテキストは白で、ヘッダーとフッターはページの幅にまたがっていません。ダイアログボックスのヘッダーにも「X」があり、ユーザーは前のページに戻るためにタップする必要があります。
別のページまたはダイアログボックスに移動するa>要素をコーディングする場合、data-transition属性を使用して、この図の表に要約されている6つの遷移の1つを指定することもできます。これらの各遷移は、iPhoneなどのモバイルデバイスが使用する効果を模倣することを目的としています。
使用できるトランジション
| 滑り台 | 次のページは右から左にスライドします。 |
| 上にスライドします | 次のページは下から上にスライドします。 |
| スライドダウン | 次のページは上から下にスライドします。 |
| ポップ | 次のページは画面の中央からフェードインします。 |
| フェード | 次のページがフェードインします。 |
| フリップ | 次のページは、トランプが裏返されるのと同じように、後ろから前にめくります。この移行は、一部のデバイスではサポートされていません。 |
「ポップ」トランジションのダイアログボックスとしてページを開くHTML：
a href = "＃toobin" data-rel = "dialog" data-transition = "pop">
「フェード」遷移でページを開くHTML：
a href = "＃toobin" data-transition = "fade">
説明
- のHTML ダイアログボックス 任意のページがコーディングされる方法でコーディングされます。ただし、ページにリンクするa>要素には、値として「dialog」を含むdata-rel属性が含まれています。ダイアログボックスを閉じるには、ユーザーはボックスのヘッダーにあるXをタップします。
- ページまたはダイアログボックスを開く方法を指定するには、上記の表の値の1つでdata-transition属性を使用できます。指定した遷移をデバイスがサポートしていない場合、属性は無視されます。
- ダイアログボックスのスタイル設定は、jQuery MobileCSSファイルによって行われます。
ボタンの作り方
図15-9は、ボタンを使用して1つのページから別のページに移動する方法を示しています。これを行うには、a>要素のdata-role属性を「button」に設定するだけで、残りはjQueryMobileが行います。
ただし、ボタンに他の属性を設定することもできます。たとえば、この図の最初の2つのボタンのように、2つ以上のボタンを並べて表示する場合は、data-inline属性を「true」に設定できます。
jQuery Mobileによって提供される18個のアイコンの1つをボタンに追加する場合は、data-icon属性もコーディングします。たとえば、この例の3番目のボタンは「削除」アイコンを使用し、4番目のボタンは「ホーム」アイコンを使用します。これらのアイコンはすべて、ネイティブモバイルアプリケーション内に表示される可能性のあるアイコンのように見えます。ちなみに、これらのアイコンは、ページがアクセスする必要のある個別のファイルではありません。代わりに、jQueryMobileライブラリによって提供されます。
この図の[はい]、[いいえ]、[多分]ボタンのように、2つ以上のボタンを水平方向にグループ化する場合は、data-role属性として「controlgroup」を持つdiv要素内のボタンのa>要素をコーディングできます。データ型属性として「水平」。または、ボタンを垂直方向にグループ化するには、データ型属性を「垂直」に変更します。
ボタンのdata-rel属性を「戻る」に設定し、href属性をポンド記号（＃）に設定すると、ボタンはそれを呼び出したページに戻ります。つまり、ボタンは[戻る]ボタンのように機能します。これは、ページのコンテンツの最後のボタンで示されています。
最後の2つのボタンは、ページのフッターにボタンがどのように表示されるかを示しています。ここでは、アイコンとテキストは黒の背景に対して白です。この場合、フッターのクラス属性は「ui-bar」に設定されます。これは、フッターのコンテンツの周囲にもう少しスペースを配置する必要があることをjQueryMobileに通知します。これについては、図15-12で詳しく説明します。
セクション内のボタンのHTML：
！-インラインボタンの場合、data-line属性をtrueに設定します-> a href = "＃" data-role = "button" data-inline = "true">キャンセル/ a> a href = "＃" data -role = "button" data-inline = "true"> OK / a>！-ボタンにアイコンを追加するには、data-icon属性を使用します-> a href = "＃" data-role = "button "data-icon =" delete "> Delete / a> a href ="＃ "data-role =" button "data-icon =" home "> Home / a>！-ボタンをグループ化するには、div要素を次のように使用します。次の属性-> div data-role = "controlgroup" data-type = "horizontal"> a href = "＃" data-role = "button" data-icon = "check">はい/ a> a href = "＃" data-role = "button" data-icon = "arrow-d">いいえ/ a> a href = "＃" data-role = "button">たぶん/ a> / div>！-宛先[戻る]ボタンをコーディングし、data-rel属性を[戻る]に設定します-> a href = "＃" data-role = "button" dat-rel = "back" data-icon = "back">前のページに戻る/ a >>
フッターのボタンのHTML：
footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Facebookに追加/ a> a href = "http： //www.twitter.com "data-role =" button "data-icon =" plus ">このページをツイート/ a> / footer>
説明
- Webページにボタンを追加するには、data-role属性を「button」に設定してa>要素をコーディングします。
ナビゲーションバーの作成方法
図15-10は、Webページにナビゲーションバーを追加する方法を示しています。これを行うには、data-roleを「navbar」に設定してdiv要素をコーディングします。この要素内で、ナビゲーションバーの項目のa>要素を含むli要素を含むul要素をコーディングします。ただし、a>要素のdata-role属性はコーディングしないことに注意してください。
ナビゲーションバーのアイテムの色を変更するために、この例のコードには、各アイテムのdata-theme-b属性が含まれています。その結果、jQuery Mobileは、各アイテムの背景色をデフォルトの黒から魅力的な青に変更します。さらに、このコードはアクティブなボタンのクラス属性を「ui-btn-active」に設定するため、jQueryMobileはアクティブなボタンの色を明るい青に変更します。これは、jQuery Mobileで使用されるフォーマットを変更する方法を示しています。次に、その詳細について学習します。
ナビゲーションバーのHTML：
ヘッダーデータ-role = "header"> h1> SJVタウンホール/ h1> div data-role = "navbar"> ul> li> a href = "＃home" data-icon = "home" data-theme = "b ">ホーム/ a> / li> li> a href ="＃speakers "data-icon =" star "data-theme =" b ">スピーカー/ a> / li> li> a href ="＃contactus data- icon = "grid" data-theme = "b">お問い合わせ/ a> / li> / ul> / div> / header>
ナビゲーションバーのHTMLをコーディングする方法：
- ヘッダー要素内にdiv要素をコーディングします。次に、div要素のdata-role属性を「navbar」に設定します。
- div要素内で、リンクごとに1つのli要素を含むul要素をコーディングします。
- 各li要素内で、リンク先のページのプレースホルダーを使用するhref属性を使用してa>要素をコーディングします。次に、data-icon属性を選択したアイコンに設定します。
- ナビゲーションバーのアクティブなアイテムについては、class属性を「ui-btn-active」に設定します。そうすると、このアイテムの色はナビゲーションバーの他のアイテムよりも明るくなります。
- また、data-theme属性を使用して、ナビゲーションバーの各アイテムにjQueryMobileテーマを適用する必要があります。それ以外の場合、バーのボタンはヘッダーの残りの部分と同じ色になります。テーマの適用の詳細については、図15-12を参照してください。
jQueryMobileでコンテンツをフォーマットする方法
すでに見てきたように、jQuery Mobileは、独自のスタイルシートに基づいてWebページのコンポーネントを自動的にフォーマットします。ここでは、その詳細と、jQueryMobileが使用するデフォルトのスタイルを調整する方法について学習します。
jQueryMobileが使用するデフォルトのスタイル
図15-13は、jQueryMobileが一般的なHTML要素に使用するデフォルトのスタイルを示しています。 jQuery Mobileは、そのすべてのスタイルについて、ブラウザーのレンダリングエンジンに依存しているため、独自のスタイル設定は最小限に抑えられています。これにより、読み込み時間が短縮され、過剰なCSSがページに課すオーバーヘッドが最小限に抑えられます。
ご覧のとおり、jQuery Mobileのスタイリングは非常に効果的であるため、独自のCSSスタイルシートを提供してスタイリングを変更する必要はありません。たとえば、順序付けされていないリスト内のアイテム間の間隔とテーブルのフォーマットは、どちらもそのままで許容されます。また、灰色の背景の黒いタイプは、ネイティブモバイルアプリケーションのフォーマットと一致しています。
説明
- デフォルトでは、jQueryMobileはページのHTML要素にスタイルを自動的に適用します。これらのスタイルは魅力的であるだけでなく、ブラウザのネイティブスタイルを模倣しています。
- デフォルトでは、jQuery Mobileは各モバイルページの左、右、上、下に少量のパディングを適用します。
- デフォルトでは、リンクは通常のテキストよりわずかに大きくなります。これにより、ユーザーはリンクを簡単にタップできます。
- デフォルトでは、リンクにはフォントの色として青で下線が引かれています。
HTML要素にテーマを適用する方法
場合によっては、jQueryMobileが使用するデフォルトのスタイルを変更したいことがあります。図15-10のナビゲーションバーでそれをすでに見ました。デフォルトのスタイルを変更するには、jQueryMobileが提供する5つのテーマを使用できます。これらは図15-12に要約されています。ここでも、これらのテーマは、ネイティブモバイルアプリケーションの外観を模倣することを目的としています。
テーマを適用する1つの方法は、テーマ文字を値として使用してデータテーマ属性をコーディングすることです。これは、図15-10のナビゲーションバーで確認できます。これは、この図の2番目のナビゲーションバーのコードで確認できます。ここで、data-theme属性は、テーマ「e」をヘッダーに適用し、テーマ「d」をナビゲーションバーの項目に適用します。
テーマを適用するもう1つの方法は、要素のクラス属性をテーマを示すクラス名に設定することです。これは、表の後の最初の例で示されています。ここで、class属性は、「ui-bar」クラスと「ui-bar-b」クラスの両方をdiv要素に適用するために使用されます。その結果、jQuery Mobileは最初にバーのデフォルトのスタイルを要素に適用し、次にbテーマをそのスタイルに適用します。次のページでは、このタイプのスタイリングの他の例を見ることができます。
この図の表は、テーマeを慎重に使用するように指示していることに注意してください。これは、オレンジ色を使用しているため、アイテムのアクセントには問題ありませんが、大量に使用すると魅力的ではありません。これは、この図の2番目のヘッダーとナビゲーションバーで示されています。これらは、カラーで見ると耳障りになる傾向があります。
一般に、デフォルトのスタイルと最初の3つのテーマを使用するのが最善です。これらは、通常、一緒にうまく機能します。次に、もっと何かが必要だと思うときに、テーマdとeを試すことができます。
2番目のヘッダーとナビゲーションバーのHTML：
ヘッダーdata-role = "header" data-theme = "e"> h1> SJVタウンホール/ h1> div data-role = "navbar"> ul> li> a href = "＃home" data-icon = "home "data-theme =" d "> Home / a> / li> li> a href =" #speakers "data-icon =" star "data-theme =" d "> Speakers / a> / li> li> a href = "＃news" id = "news" data-icon = "grid" data-theme = "d"> News / a> / li> / ul> / div> / header>
5つのjQueryMobileテーマ：
| a | 前景が白の黒の背景。これがデフォルトです。 |
| b | 前景が白の青い背景。 |
| c | 前景が黒の明るい灰色の背景。テキストは太字で表示されます。 |
| d | 前景が黒の濃い灰色の背景。テキストは太字で表示されません。 |
| e | 前景が黒のオレンジ色の背景。アクセントに使用し、控えめに使用してください。 |
テーマを適用する2つの方法：
データテーマ属性を使用する場合：
li> a href = "＃home" data-icon = "home" data-theme = "b"> Home / a> / li>
テーマを示すクラス属性を使用するには、次のようにします。
説明
- jQuery Mobileに含まれている5つのテーマを使用することで、HTML要素のデフォルトスタイルを適切に調整できます。
- jQuery Mobileアプリケーションで独自のCSSスタイルシートを使用することはできますが、可能な限りそれを行わないようにする必要があります。
展望
モバイルデバイスの使用は、過去数年間で劇的に増加しています。そのため、これらのデバイスから使いやすいWebサイトを設計することがますます重要になっています。これは通常、別のWebサイトを開発することを意味しますが、これはインターネット上での存在感を維持するための重要な側面になる可能性があります。
幸い、jQuery Mobileの登場により、モバイルWebサイトの構築作業がはるかに簡単になりました。モバイルWebページは、見出し、段落、リンク、およびサムネイル画像を含む静的ページに制限されなくなりました。 jQuery Mobileを使用すると、Web開発者は、ネイティブモバイルアプリケーションのように見える機能豊富なWebサイトを構築できるようになります。
