Latest web development tutorials

jQueryのモバイルページ

学習のjQuery Mobileを起動します

ランプ jQueryのモバイルは、すべてのモバイルデバイスと互換性がありますが、(これは限られたCSS3のサポートに)PCとの完全な互換性はありませんが。

よりよいこのチュートリアルを読むためには、我々はあなたがGoogle Chromeブラウザを使用することをお勧めします。

<body>
<div data-role="page" >

  <div data-role="header" >
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content" >
    <p>我现在是一个移动端开发者!!</p>
  </div>

  <div data-role="footer" >
    <h1>底部文本</h1>
  </div>

</div>
</body>

»をお試しください

分析の例:

  • データ-役割= "ページ"を表示するには、ブラウザでページです。
  • データ-役割= "ヘッダが"(通常はタイトルや検索ボタンに使用)が作成されたページの上部にあるツールバーです
  • データ-役割は= "メイン"などというように、テキスト、画像、フォーム、ボタンとして、ページの内容を定義します。
  • このページのパディングとマージンのための「UI-コンテンツ」クラス。
  • ページ・ツールバーの下部を作成するために使用されるデータ・役割= "フッター"。
  • 段落、写真、見出し、リストなど - これらのコンテナでは、任意のHTML要素を追加することができます
ランプ jQueryのモバイルは、HTML5のデーターに依存している*さまざまなUI要素、移行、およびページ構造をサポートするための属性。 ブラウザは、彼らは黙って破棄され、それらをサポートしていません。


ページ内のjQuery Mobileを追加

jQueryのモバイルを使用して、あなたはその後、別のページ数での単一のHTMLファイルを作成することができます。

あなたはページの同じ一意のIDを使用して区別するために別のhref属性を使用することができます。

<divのデータ役割= "ページ" ID = "pageone">
<DIVデータ-役割= "メイン"クラス= "UI-コンテンツ」>
第二ページ</a>にジャンプするの<a href="#pagetwo">
</ DIV>
</ DIV>

<divのデータ役割= "ページ" ID = "pagetwo">
<DIVデータ-役割= "メイン"クラス= "UI-コンテンツ」>
最初のページ</a>にジャンプするの<a href="#pageone">
</ DIV>
</ DIV>

»をお試しください

注意:Webアプリケーションは、コンテンツ(テキスト、画像、スクリプトなど)の多くを持っているときに真剣にロード時間に影響を与えます。 あなたは、ページ内のリンクを使用したくない場合は、外部ファイルを使用することができます。

<a href="externalfile.html">访问外部文件</a>

ダイアログの用途としてページ

ダイアログボックスは、ページ情報の表示や入力フォーム情報を表示するために使用されます。

データのrel = "ダイアログ"ポップアップダイアログボックスは、ユーザーがリンクをクリックすることを可能にするリンクに追加します。

<DIVデータ-役割= "ページ" ID = "pageone">
<DIVデータ-役割= "メイン"クラス= "UI-コンテンツ」>
第二ページ</a>に<a href="#pagetwo">ジャンプ
</ DIV>
</ DIV>

<divのデータ役割= "ページ"データダイアログ= "true"をID = "pagetwo">
<DIVデータ-役割= "メイン"クラス= "UI-コンテンツ」>
最初のページ</a>に<a href="#pageone">ジャンプ
</ DIV>
</ DIV>

»をお試しください