*

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

公開日: : 最終更新日: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

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

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化され

記事を読む

no image

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

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

記事を読む

no image

コンテンツをフルスクリーンで表示する

ヘッダ、フッタにdata-position="fixed"とdata-fullscreen="tru

記事を読む

no image

ポップアップを表示する

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

ダイアログ

ダイアログは、ユーザーに対して警告や注意をひくために、伝えたいことを表示します。ダイアログが表示され

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

スポンサードリンク

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 ↑