*

タブを利用してコンテンツを表示させる。

公開日: : 最終更新日:2015/08/03 jQuery ,

ページを遷移させず複数のコンテンツを
表示させたい場合使用します。

必要な手順

1.jQueryUIというものを入手する。

公式サイトは以下です。
http://jqueryui.com/download

tabだけをダウンロードしたい場合、
「deselect ALL components」をクリックしてから
「Tabs」をクリックします。

テーマはなんでも大丈夫です。

2.jQueryUIを使う。

ダウンロードしたjQueryUIを利用するには
サンプルコードのように記述します。

7行目にはjQueryの読み込み

13行目 jQueryUIのCSSの読み込み
14行目 jQueryUI本体読み込み

3.tabsメソッドを書く

メソッドというのは命令の事です。
サンプルコードの45行目の
「$(“#tabs”).tabs();」は

id=”tabs”にtabs()という命令を行います。

これで、タブが作成されています。

実行結果はこちらです。

スポンサードリンク

関連記事

catejQuery

親要素を取り除いたり、要素を削除する。

前回は要素を包む命令を取り上げました。 今回はその逆、親要素を取り除いたり、 要素を置き換えたり

記事を読む

catejQuery

フォーカスが外れたことを感知する。

前の記事のfocus()とは逆に、フォーム部品から フォーカスが外れた(選択されていない状態になっ

記事を読む

catejQuery

非表示の要素を表示する show()

show()は、CSSのdisplayプロパティの値が「none」、 非表示のHTML要素を、アニ

記事を読む

catejQuery

他の要素を包む

指定した要素を追加するのではなく、 指定した要素を包むこと(ラップ)ができます。 各要素を指

記事を読む

catejQuery

対象の要素を絞ってイベントを登録する

今回紹介するon()は、 これまでの記事で紹介したイベントを別の書き方で 設定できるメソッドです

記事を読む

catejQuery

jQueryのセレクター1 odd/even/first/lastセレクター

CSSの箇所でselectorを取り上げましたが、 jQuery独自のセレクターがあるので 何回

記事を読む

catejQuery

独自のアニメーションを指定する animate()

animate()命令は、任意のCSSプロパティの 値を徐々に変更して、独自のアニメーションを作成

記事を読む

catejQuery

マウスオーバー、マウスアウトを感知する mouseover()・mouseout()

マウスオーバー、マウスアウトを感知する mouseover()・mouseout() これら

記事を読む

catejQuery

マウスの動きに合わせて処理を行うmousemove()

この命令は、特定の要素上でマウスカーソルが 動いたときに処理を行います。 mousemove

記事を読む

catejQuery

複数の命令をまとめて書く メソッドチェーン

HTML,CSSの命令を書いてきました。 今回紹介するのが「メソッドチェーン」と呼ばれるものです。

記事を読む

スポンサードリンク

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 ↑