*

ナビゲーションバーを表示

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

ナビゲーションバーは、ヘッダ、フッタ内の複数のリンクをボタンのようにして表示するウィジェットです、よく利用するコンテンツへのリンクをメニューとして常時表示すれば、操作性の向上になります。

ナビゲーションバーに設定できる属性一覧
設定対象 名称=”設定値”(太字はデフォルト) 説明
ウィジェット data-role=”navbar” ナビゲーションバー
項目 data-icon=”アイコン名称” リンクに表示するアイコン
data-iconpos=”top|bottom|left|right|notext” アイコンの位置
ウィジェット、項目 data-theme=”テーマ名称” テーマ(ヘッダ、フッタ、リンクに設定できる)

ナビゲーションバーの構造

ナビゲーションバーは画面の幅いっぱいに表示されて、リンク先はその幅を均等に割った範囲内に納まるように表示されます。リンク先を表す文字列が長いときは末尾が”…”と表示されます。
HTML構造は以下の2点です。

1.ウィジェットの全体をdata-role=”navbar”を追加したタグで囲む。
2.その内部に<ul>、<li>、<a>を表示するリンク先の数だけ追加する。

1行に表示できるのは最多で5つまでです。それ以上の数を設置使用すると1行に2つずつ表示されます。

表示中のページを明示する

ナビゲーションバーには、文字通りユーザーにコンテンツを案内する役目があり、その方法としては、リンク先だけではなく表示中のコンテンツを明示することも重要です。表示中のページのリンクを画面上に表すには、それを表すaタグに「class=”ui-btn-active”」を追加します。

このclass属性は、ウィジェットが表示されるページそれぞれに対応させなくてはなりません。下記のサンプルコードのように、page1,page2のそれぞれのページで、ウィジェット内の同じページへのリンクにclass属性を設定する必要があります。この値はリンクをクリック・タップにより削除されて、ほかのリンクと同じ色に変わります。

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

アイコンを表示する

ウィジェット内のリンクにはアイコンを表示することができます。設定時に利用するのは、data-icon,data-iconpos属性です。属性に設定できる値はボタンと同じです。これらは追加するタグが異なるので注意が必要です。

・<a>に追加する。それぞれのリンクに表示するアイコンを設定するのがdata-icon属性
・<nav>(<div>)に追加する。ウィジェット内の全てのリンクにおけるアイコンの表示位置を統一

data-iconpos属性が追加されない時は、アイコンが文字列の上に表示される。

テーマを設定する

ウィジェットのテーマは、それが作成されるヘッダ、フッタに設定する。ウィジェット内のリンクには、また別のテーマを設定できて、デフォルトでは、ウィジェットが配置されている場所(ヘッダ、フッタ、コンテンツ)のテーマと同じ設定となります。

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

スポンサードリンク

関連記事

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

ボタン内にアイコンを表示したり、デザインを変更する

ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpo

記事を読む

no image

折りたたみを設定する

おりたたみ(collapse)は、予め概要を示す文字列が表示されている領域をクリックかタップすると、

記事を読む

no image

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

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

記事を読む

no image

ポップアップを表示する

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

記事を読む

no image

data-属性により、ヘッダとフッタを常時表示する

前回の記事の続きです。 ヘッダとフッタを常時表示 ページのヘッダとフッタにdata-posi

記事を読む

スポンサードリンク

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 ↑