*

同じHTML文書に複数ページを作成してみる

公開日: : 最終更新日:2016/04/20 jQueryMobile

jQueryMobileでは、同じHTML文書内に複数ページを作成することができます。手順は以下の通りです。

1.data-role=”page”を付したHTMLタグを<body>内に必要なページの分だけ追加する。
2.1で追加したタグに、書くページを判別するためのid属性を付す
3.それぞれのページで遷移(表示)するためのリンクを作成する。

data-role=”page”を付したHTMLタグを<body>内に必要なページの分だけ追加する。

ページを作成するには、data-role=”page”を追加したタグでコンテンツを囲みます。この囲んだものをbodyタグの中に複数書けば、それだけで複数ページを作成することができます。

追加したタグに、書くページを判別するためのid属性を付す

data-role=”page”を付したタグで複数ページを作成しても、1ページ目しか表示されません。他のページを表示するには、それぞれページへ遷移するリンクを設定します。その遷移先のリンクを示すのがid属性です。id属性は、HTML文書内のどのタグにも設定できますが、同じ文書内で重複した値を設定できません。

それぞれのページで遷移(表示)するためのリンクを作成する。

ページを囲むタグにid属性を設定したら、それぞれのページに遷移するリンクを作成します。今回のサンプルコードではaタグを使っています。

サンプルコードの実行結果はこちら

各ページのタイトル

同じHTML文書内に複数ページを作成したとき、data-role=”page”が追加された最初のタグが1ページとして扱われます。このページのデフォルトのタイトルはtitleタグに囲まれた文字列です。
2ページ以降のデフォルトのタイトルは、ヘッダ(data-role=”header”を追加したタグ)内の<h1>~<h6>で囲まれた文字列です。これは、それぞれのページが画面に表示されるときにtitleタグ内の文字列を変更することで表現しています。これを変更するとブラウザ画面に表示されるHTML文書のタイトルも変更されます。

別のHTML文書へのリンク

別のHTML文書に遷移するリンクを作成するときは、リンク先にその文書を示すURLを設定します。リンク先のHTML文書の読み込みはajax(ページの部分的な書き換え)により実行されます。

スポンサードリンク

関連記事

no image

jQueryMobileとフォームを組み合わせてみる

フォーム(user-submittable form)は、HTMLタグでは<form>タ

記事を読む

no image

ポップアップを表示する

ポップアップ(popup)とは、pageの上に付加情報や画像などのコンテンツを重ねて表示するウィジェ

記事を読む

no image

バルーンを表示、項目を分割、折り畳みやポップ内にlistviewを作成する。

バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実

記事を読む

no image

値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだけを選択するウィジェット ラジ

記事を読む

no image

アイコンとサムネイルを表示する

各項目のレイアウトを設定する <li>の中には、色々なレイアウトを設定できます。いずれ

記事を読む

no image

jQueryMobileカテゴリーで出てくる用語集

jQueryMobileの記事で登場する用語を下記の表にまとめました。学習するときの助けになるかも。

記事を読む

no image

トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして2つの値のうちどち

記事を読む

no image

class属性によりレイアウトとテーマを設定する

ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCS

記事を読む

no image

data-属性によるウィジェットの設定

テーマの他にもウィジェットにdata-属性を追加して、色々な事ができます。 ウィジェ

記事を読む

no image

ヘッダ内、フッタ内にボタンを表示する

ヘッダ内にボタンを表示してみる ヘッダ内にリンクであるaタグを作成すると、それがボタンとして表示さ

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑