*

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

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

ヘッダ内にボタンを表示してみる

ヘッダ内にリンクであるaタグを作成すると、それがボタンとして表示されます。リンクは2つまで設定でき、ヘッダ内の1つ目のリンクが左側、2つ目が右側に表示されます。リンクの位置は<h1>~<h6>の前後とすることもでき、aタグを2つ続けて作成しても表示は同様です。

ちなみに、ヘッダ内にリンクが1つだけ存在するときは、左側にボタンが表示されますが、右側に表示したいときはaタグにclass=”ui-btn-right”を付します。

フッタ内にボタンを表示してみる

フッタ内にボタンを表示させるには、ボタンとなるリンクを作成します。このとき、フッタの上下幅がボタンと大差が無くなって、ボタンの上下に残るフッタ余白がほとんどなくなります。ですが、フッタとなるタグにclass=”ui-bar”を付すことで、ボタン上の上下に余白ができて、フッタが高さが大きくなります。

ヘッダ内、フッタ内にボタンを付したサンプルコードの実行結果はこちら

class=”ui-btn-right”を付すと

ヘッダ内のボタンと同じように、aタグにclass=”ui-btn-right”を付すとボタンは右側に表示されます。

スポンサードリンク

関連記事

no image

テーマを設定する

テーマとは、統一化された各ウィジェットの外観などのデザインの事で、それぞれに名前がついています。同じ

記事を読む

no image

項目リストを設定する

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

記事を読む

no image

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

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

記事を読む

no image

折りたたみを設定する

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

記事を読む

no image

コンテンツを表示する

コンテンツはそのページのメインとなる情報を表示する部分です。コンテンツはヘッダとフッタの間に配置しま

記事を読む

no image

ボタンを設定する

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

記事を読む

no image

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

ナビゲーションバーは、ヘッダ、フッタ内の複数のリンクをボタンのようにして表示するウィジェットです、よ

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

スポンサードリンク

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 ↑