タブ制御Javasciptライブラリ

Topページ > 汎用JavaScriptライブラリ >

タブ構築・制御Javasciptライブラリ

こちらはWebページで、次のようなタブの構築と制御をおこなう、Javascriptファイルのダウンロードページです。
本スクリプトは、JQueryが必要ありません。

タブタイプ：

タブ1
タブ2
タブ3

タブ1 内容
タブ2 内容
タブ3 内容

リストタイプ：

マルチ

シングル

使用規約：本ライブラリを使用する場合、次の事項に同意されたものとみなします。

1) 本ライブラリは無償で提供されるものであり、完全な動作を保証するものではありません。
2) 本ライブラリ使用によるいかなる損害について、本プログラムの作成者は一切の責任を負いません。
3) 本ライブラリはJavascriptがオフになっているブラウザでは、設置したhtmlタグがタブとして表示されません。
3) 本ライブラリはAMP(Accelerated Mobile Pages)では使用できません。

ダウンロード：affi-static-tabs.zip (v1.0)

このページの目次

使用方法
- タブタイプのhtmlタグ構成
- リストタイプのhtmlタグ構成
外観のカスタマイズ
- タブタイプのカスタマイズ
- リストタイプのカスタマイズ

使用方法

1) 本ツールをダウンロード後解凍をし、jsとcssファイルをサーバーにアップロードしてください。

2) htmlファイルに、jsとcssファイルを適用します。

例：

タブタイプのhtmlタグ構成

タブタイプはdivタグとul・liタグで構成します。

上のタグをコピーして使用してください。

affi-tab-titleクラスを持つulタグ内のliタグに、タブのタイトルを一つずつ指定します。

affi-tab-contentクラスを持つulタグ内のliタグに、表示されるコンテンツを一つずつ指定します。

タイトルとコンテンツは一対一に対応するように作成してください。

一つのWebページ内に複数のaffi-tabクラスを設置できます。
また、affi-tab-contentクラスのliタグ内に、affi-tabクラスを入れ子にできます。

リストタイプのhtmlタグ構成

リストタイプもタブタイプと同様に、はdivタグとul・liタグで構成します。

リストタイプ（シングル）のhtmlタグ

リストタイプは、affi-tab-listクラス内のliタグを、タイトル部とコンテンツ部をペアにして指定します。

シングルタイプとマルチタイプの切り替え

affi-tab-listクラスを持つulタグに data-multi="true"を指定することで、マルチタイプに切り替えることができます。

マルチタイプのhtmlタグ

外観のカスタマイズ

外観のカスタマイズは、ダウンロードファイルに含まれるaffi-static-tabs.cssを直接変更するか、別途スタイル定義をおこない上書きしてください。

例としてデフォルトの設定を挙げておきます。
必要なものを適宜変更または追加してください。

タブタイプのカスタマイズ

タブ1
タブ2
タブ3

タブ1 内容
タブ2 内容
タブ3 内容

タブの外観（共通）

タブ部分（クリックしてコンテンツを切り替える部分）の共通設定です。
上部の角が丸い枠を作成しています。

.affi-tab > .affi-tab-title > li{
border-radius: 5px 5px 0 0; <= 枠角丸
text-align: center; <= 文字中央
padding: 0 1em; <= 内側余白
}

選択タブの外観

選択状態のタブに関するスタイル設定です。

.affi-tab > .affi-tab-title > li.affi-tab-selected{
  color: inherit; <= 文字色
  background-color: #FFFFFF; <= 背景色
  border: 1px solid #666666; <= 枠線
  border-bottom: 0; <= 下枠線を非表示
}

下側の枠を消去して、タブとコンテンツが一枚につながっているような表現にしてあります。

非選択タブの外観

非選択状態のタブに関するスタイル設定です。

.affi-tab > .affi-tab-title > li:not(.affi-tab-selected){
  color: inherit; <= 文字色
  background-color: #e0e0e0; <= 背景色
  border-bottom: 1px solid #666666; <= 枠線（下側のみ）
  box-shadow: 2px 2px 2px rgba(0,0,0,.1) inset; <= 影（内側）
}

下側のみに、選択状態の枠と同じ色の枠線を表示しています。
また枠の内側に影を作成することで、奥行を表現しています。

タブコンテンツの外観（外側）

タブに表示するコンテンツの外枠に関するスタイル設定です。

.affi-tab > .affi-tab-content{
  border: 1px solid #666666; <= 枠線
  border-top: 0; <= 上枠線を非表示
  border-radius: 0 0 5px 5px; <= 下枠線の角を丸く
  margin:0; <= 外側の余白
  padding:1em; <= 内側の余白
}

上側の枠線を非表示しています。

タブコンテンツの外観（内側）

タブに表示するコンテンツの実体部分に関するスタイル設定です。

.affi-tab > .affi-tab-content > li{
background-color: #FFFFFF; <= 背景色
padding:0; <= 内側の余白
}

リストタイプのカスタマイズ

リストタイプのスタイル属性は、シングル・マルチ共通です。

マルチ

シングル

タイトルタブの外観（共通）

クリックによりコンテンツを開閉するタイトル部分に関する共通スタイル設定です。

.affi-tab > .affi-tab-list > li:nth-child(2n+1){
  margin: 0; <= 外側の余白
  padding: 5px 1em; <= 内側の余白
  position: relative; <= ポジション設定（開閉ボタン設置に必須）
  overflow: hidden; <= はみ出し部分を非表示
}

選択タイトルタブの外観

選択（開いている）状態のタイトル部分に関する共通スタイル設定です。

.affi-tab > .affi-tab-list > li:nth-child(2n+1).affi-tab-selected {
border: 1px solid #666666; <= 枠線
background-color: #ffffff; <= 背景色
}

開閉ボタン：

.affi-tab > .affi-tab-list > li:nth-child(2n+1).affi-tab-selected:after{
  position: absolute;
  right:20px;
  content: '▲';
}

非選択タイトルタブの外観

非選択（閉じている）状態のタイトル部分に関する共通スタイル設定です。

.affi-tab > .affi-tab-list > li:nth-child(2n+1):not(.affi-tab-selected) {
border: 1px solid #666666; <= 枠線
background-color: #e0e0e0; <= 背景色
}

開閉ボタン：

.affi-tab > .affi-tab-list > li:nth-child(2n+1):not(.affi-tab-selected):after{
  position: absolute;
  right:20px;
  content: '▼';
}

コンテンツの外観（外側）

コンテンツ部の外枠に関するスタイル設定です。

.affi-tab > .affi-tab-list > li:nth-child(2n){
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}

コンテンツの外観（内側）

コンテンツ部の内枠に関するスタイル設定です。
スクリプト実行時に、li内の要素が自動的にdivタグで囲まれます。

.affi-tab > .affi-tab-list > li:nth-child(2n) > div {
  border: 1px solid #666666;
  border-top:0;
  border-bottom:0;
  background-color: #ffffff;
  padding: 2em 2em;
  overflow: hidden;
  position: relative;
}

補足：

コンテンツ部は左右のみに枠線を設定したいます。
そのため、最下部のコンテンツ部の下部が開いた状態になってしまいます。

次のスタイルを適用することで、最下部のコンテンツのみに、下枠線を設定しています。

.affi-tab > .affi-tab-list > li:last-child > div {
border: 1px solid #666666;
border-top:0;
}