jQuery UIでTabs（タブ）を実装する方法
Contents
jQuery UIでTabs（タブ）を実装する方法
サンプル
都内在住のフリーランスエンジニアです。
技術情報／投資／英語学習などの情報を発信していきます。
よろしくお願いいたします。
新卒で、プログラムとして就職しました。当初は正社員でした。
複数回の転職後、フリーランスエンジニアとして独立しました。
HTML/JavaScript/CSS、C#.NET、VB.NET、C++などのほかに、Oracleデーターベースなどの経験があります。
英語学習者です。海外留学経験や滞在経験は一切ありません。
TOEICでは920点が最高です。ワタシの学習方法も共有できればと思います。
都内在住のフリーランスエンジニアです。
技術情報／投資／英語学習などの情報を発信していきます。
よろしくお願いいたします。
新卒で、プログラムとして就職しました。当初は正社員でした。
複数回の転職後、フリーランスエンジニアとして独立しました。
HTML/JavaScript/CSS、C#.NET、VB.NET、C++などのほかに、Oracleデーターベースなどの経験があります。
英語学習者です。海外留学経験や滞在経験は一切ありません。
TOEICでは920点が最高です。ワタシの学習方法も共有できればと思います。
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs1" ).tabs();
$( "#tabs2" ).tabs(
{
active:1
,collapsible: true
,show: { effect: "blind", duration: 800 }
,hide: { effect: "explode", duration: 1000 }
,heightStyle: "fill"
}
);
} );
</script>
</head>
<body>
<div id="tabs1">
<ul>
<li><a href="#tabs-1">プロフィール</a></li>
<li><a href="#tabs-2">職歴</a></li>
<li><a href="#tabs-3">英語学習</a></li>
</ul>
<div id="tabs-1">
<p>
都内在住のフリーランスエンジニアです。<br />
技術情報／投資／英語学習などの情報を発信していきます。<br />
<br /><br /><br /><br />
よろしくお願いいたします。
</p>
</div>
<div id="tabs-2">
<p>
新卒で、プログラムとして就職しました。当初は正社員でした。<br />
複数回の転職後、フリーランスエンジニアとして独立しました。<br />
HTML/JavaScript/CSS、C#.NET、VB.NET、C++などのほかに、Oracleデーターベースなどの経験があります。
</p>
</div>
<div id="tabs-3">
<p>
英語学習者です。海外留学経験や滞在経験は一切ありません。<br />
TOEICでは920点が最高です。ワタシの学習方法も共有できればと思います。
</p>
</div>
</div>
<div id="tabs2">
<ul>
<li><a href="#tabs-1">プロフィール</a></li>
<li><a href="#tabs-2">職歴</a></li>
<li><a href="#tabs-3">英語学習</a></li>
</ul>
<div id="tabs-1">
<p>
都内在住のフリーランスエンジニアです。<br />
技術情報／投資／英語学習などの情報を発信していきます。<br />
<br /><br /><br /><br />
よろしくお願いいたします。
</p>
</div>
<div id="tabs-2">
<p>
新卒で、プログラムとして就職しました。当初は正社員でした。<br />
複数回の転職後、フリーランスエンジニアとして独立しました。<br />
HTML/JavaScript/CSS、C#.NET、VB.NET、C++などのほかに、Oracleデーターベースなどの経験があります。
</p>
</div>
<div id="tabs-3">
<p>
英語学習者です。海外留学経験や滞在経験は一切ありません。<br />
TOEICでは920点が最高です。ワタシの学習方法も共有できればと思います。
</p>
</div>
</div>
</body>
</html>デモ
jQuery UI Tabs
オプションなし
画面上部にあるタブが、オプションなしのデフォルトのタブです。これでほぼ事足りるのではないでしょうかね。
実装方法は、まず、HTMLで、タブ対象をDIVで定義します。
<div id="tabs1">
...
</div>次に、タブ内に、タブ領域を定義します。タブ領域は「ul」タグで定義し、各タブは「li」で定義していきます。
<div id="tabs1">
<ul>
<li><a href="#tabs-1">プロフィール</a></li>
<li><a href="#tabs-2">職歴</a></li>
<li><a href="#tabs-3">英語学習</a></li>
</ul>
...各タブの「li」の内部には、リンク（「a」タグ）を設定し、プロパティ『href』には次に定義するタブ内容項目のIDを設定します。
タブ内容領域も、DIVで定義するようにします。
<div id="tabs-1">
<p>
都内在住のフリーランスエンジニアです。<br />
技術情報／投資／英語学習などの情報を発信していきます。<br />
<br /><br /><br /><br />
よろしくお願いいたします。
</p>
</div>
...タブ内容項目はDIV内に記述してください。HTMLタグも利用できます。
最後に、JavaScriptで定義を設定することになります。
$( "#tabs1" ).tabs();
options（オプションあり）
オプションを指定することで、いろいろな効果を設定できます。
$( "#tabs2" ).tabs(
{
active:1
,collapsible: true
,show: { effect: "blind", duration: 800 }
,hide: { effect: "explode", duration: 1000 }
,heightStyle: "fill"
}
);active
| 数値型 | 初期表示時、初期選択されるタブの０から始まるタブの番号。 |
| Boolean型 | オプションが「collapsible」が『true』の場合に限り、『false』を指定できます。 falseの場合、初期表示時、すべてのタブが未選択状態となります。 |
デフォルト「0」
classes
タブのCSSクラスを指定できます。指定できるオプションは以下の通りです。
| ui-tabs | タブ領域全体に適用されるCSSクラス |
| ui-tabs-nav | タブの全ナビゲーション領域に適用されるCSSクラス |
| ui-tabs-tab | タブ領域のうち各タブ一つ一つに適用されるCSSクラス |
| ui-tabs-panel | タブ内容領域一つ一つに適用されるCSSクラス |
デフォルトは、
{
"ui-tabs": "ui-corner-all",
"ui-tabs-nav": "ui-corner-all",
"ui-tabs-tab": "ui-corner-top",
"ui-tabs-panel": "ui-corner-bottom"
}
です。
collapsible
「true」にすると、すべてのタブを選択しない状態にすることができます。
デフォルトは「false」です。
disabled
無効にしたいタブを、配列で定義できます。以下の場合は、一つ目と三つ目のタブを無効にできます。
disabled: [ 0, 2 ]「true」を設定すると、すべてのタブを無効にできます。
デフォルトは「false」です。
event
タブが切り替わる、イベントを定義するオプションです。
デフォルトは「click」になります。
例えば、「mouseover」にすると、マウスを乗せるだけで、タブを切り替えることができます。
heightStyle
タブ高さの定義です。指定できるのは以下の３つです。
| auto | 選択したタブの内容に応じて、高さを調整します。 |
| fill | タブ領域全体に合わせた高さになります。 |
| content | 各タブ内容のうち最も高さのあるタブに合わせたタブの高さになります。 |
hide
選択されていたタブが閉じる際の、効果などを指定するオプションになります。指定する型は四つになります。
| Boolean型 | 「false」を指定すると閉じる際の効果なしとなります。 「true」にすると、デフォルトの時間でタブがフェードアウトします。 |
| Number型 | 指定された時間でフェードアウトします、指定するのはミリ秒 |
| String型 | タブが閉じる際の効果を指定します、指定できるのは以下の文字列 slideUp または、「jQuery UI effect」のEffect文字列 blind bounce clip drop explode fade fold highlight puff pulsate scale shake size slide transfer |
| Object型 | 「effect」「delay」「duration」「easing」の４つのプロパティを配列で指定できます。 effect ：『String型』の指定のように、効果を文字列で指定できます。 delay：効果開始までの時間（ミリ秒） duration：効果の継続時間（ミリ秒） easing：効果のスピードや動き方を定義するプロパティ。詳細はこちらの「Easings」を参照ください。実際には「linear」や「swing」などを指定してください。 |
show
タブを開く際の、効果などを指定するオプションになります。指定する型は四つになります。
| Boolean型 | 「false」を指定すると開く際の効果なしとなります。 「true」にすると、デフォルトの時間でタブがフェードインします。 |
| Number型 | 指定された時間でフェードインします、指定するのはミリ秒 |
| String型 | タブを開く際の効果を指定します、指定できるのは以下の文字列 slideDown または、「jQuery UI effect」のEffect文字列 blind bounce clip drop explode fade fold highlight puff pulsate scale shake size slide transfer |
| Object型 | 「effect」「delay」「duration」「easing」の４つのプロパティを配列で指定できます。 effect ：『String型』の指定のように、効果を文字列で指定できます。 delay：効果開始までの時間（ミリ秒） duration：効果の継続時間（ミリ秒） easing：効果のスピードや動き方を定義するプロパティ。詳細はこちらの「Easings」を参照ください。実際には「linear」や「swing」などを指定してください。 |
