*

移動しないヘッダ、フッタにIDを設定する

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

MozillaやWebkitベースのブラウザでは、リンクにdata-transition=”slide”などのアニメーションが設定されていると、ページ遷移時に、サンプルコードの実行結果のようにヘッダ、フッタも同じアニメーションで切り替わります。ヘッダ、フッタにdata-id属性で同じIDを指定すると、ページ遷移時どちらにも移動せず、画面にそのまま残り続けます。内容は遷移後のページのものに切り替わります。

ですが、条件があり、遷移前後のページのヘッダ、フッタにはそれぞれdata-position=”fixed”も設定されていなければなりません。これらの属性はヘッダ、フッタのいずれかを設定するだけでも動きます。

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

スポンサードリンク

関連記事

no image

項目リストを設定する

項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

ページ遷移時にアニメーションを付けてたり、Ajaxによるアクセスを禁止する

リンクを操作し、あるページから別のページに飛ぶときに、MozillaやWebkitベースのブラウザで

記事を読む

no image

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

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

記事を読む

no image

リンク先を設定したり、アイコンを利用する。

リンク(link)とは、次の画面に表示するコンテンツを表すもので、HTMLではaタグで表します。jQ

記事を読む

no image

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

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

記事を読む

no image

ボタンを設定する

前回の記事では<a data-role="button">によるボタンを取り上げましたが

記事を読む

no image

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

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

記事を読む

スポンサードリンク

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 ↑