HTML5およびCSS3プログラミング用のマルチページモバイルドキュメントの作成方法 - ダミー

HTML5とCSS3のWebページをモバイルデバイスには適していますが、ページが小さくなると明らかにそのページが必要になります。モバイル・アプリケーションでは、ページ・フリップ・メタファを使用して、小さな画面の不動産に多くのデータを格納することがよくあります.jQueryモバイル・ライブラリには、これを簡単にするための素晴らしいツールがあります。

<！ - 1 - >

これまでのところ、このアプリケーションはこれまで見た他のjQueryモバイルアプリケーションと同じように見えます。一つは違って、それはヘッダーのボタンです。モバイルアプリでは、ヘッダーにナビゲーションボタンが表示されるのが一般的です。 [次へ]ボタンを押します。

素晴らしいフェード遷移の後、次のページが表示されます。これはヘッダーに2つのボタンがあります。次へをもう一度押すと、ユーザーは3ページ目に移動します。

<！ - 2 - >

3番目のページはもう一度よく分かりますが、今回はヘッダーの左側に1つのボタンがあり、メインコンテンツエリアにもう1つのボタンがあります。

これらの3つのページに関する興味深いのは、3ページではないということです！ 3つの異なるページのように動作するように設計された単なる1ページです。この配置にはいくつかの利点があります。

<！ - 9 - >

• CSSとJavaScriptリソースは一度だけロードすればよい： これにより、システムの一貫性が保たれ、ロード時間がわずかに改善される。

• 遅延時間はありません： ドキュメントがロードされると、一度に1つのパーツだけが表示されていても、すべてがメモリに格納されます。これにより、サーバーへのアクセスを待つことなくページ間を素早く移動できます。

大規模なページをいくつかの小さなページとして扱い、ユーザーがスクロールする必要がない場合、このタイプのメカニズムを通常実装します。

ここにmultiPageのコードがあります。 htmlの全体を参照してください。

multiPage。 html #foot {font-size：75％;フォントスタイル：イタリック; text-align：center;} pre {margin-left：auto; margin-right：auto;背景色：白;

Page One
next
これは、インデックス

ページ1
ページ2
ページ3
HTMLからオールインワンダミー

Page Two
next
2番目のページは最初のページに似ていますが、最初のページではなく、ボタンではなくテキストがあります。それは2番目のページです。あなたが最初のものが好きなら、私はあなたが戻って行くことができると思いますが、本当にいいと聞いて、次のページに行くべきです。
HTMLからオールインワンダミーのために prev

Page Three
3333333 3 3 3 33333 3 3 3 3333333

この例のコードは長いですが、それは多くの新しい地面を破るものではありません。
jQueryモバイルコンテンツを読み込みます。

必要なCSSおよびJavaScriptファイルをjQueryから取得します。 comサイト。

1. 独自のCSSを適用します。

   jQueryからCSSコードを「借用」している場合でも、自分自身を追加することはできます。 CSSを追加して、フッターとプレ要素を必要に応じて動作させることができます。

2. ページを構築します。

   必要なだけ多くのページを作成できますが、すべて同じjQueryモバイルパターンに従います。ヘッダ、コンテンツ、およびフッターのdivでページdivを作成します。 data-role属性を使用して、各divの役割を示します。

3. それぞれのページレベルのdivにid属性を付けます。

   ユーザーはページをめくるので、各ページには何らかの種類の識別子が必要です。各ページに一意のid属性を与えます。

4. ヘッダー内にボタンを作成します。

   この例の唯一真に新しい部分（ページフリップ自体は別として）は、ヘッダーのボタンです。

5. prev

   Page Two

   next
   
   ヘッダーのdata-roleを持つ要素の中にリンクを定義すると、そのリンク自動的にボタンになります。さらに、定義された最初のリンクは自動的にヘッダーの左側に配置され、2番目のリンクは右側に配置されます。
   右に1つのボタンを押します。
   

   ボタンを右にしたい場合は、ボタンにクラスを追加します：

6. Page One

   next

   
   内部アンカーを使用してページ間をスキップします。
   すべてのボタンのURLを見てください。それらは、文書内の内部リンクを示すハッシュで始まります。これはユーザーに3つの異なるページのように感じるが、本当にすべての1つの大きなWebページだということを忘れないでください。
   

7. トランジションの実験。

   3ページ目のボタンを注意深く見てください。

8. インデックスへ移動

   このボタンには特別なデータ移行属性があります。デフォルトでは、モバイルページはフェードでスワップします。スライド、スライドアップ、スライドダウン、ポップ、フェード、またはフリップに遷移を設定できます。また、別の属性data-direction = "reverse"を追加して、トランジションを逆にすることもできます。