hamutab.js Demo1

1. 使い方 準備

hamutab.js は DOM 3 XPath を利用しています。

一部のブラウザ(IE,Safari2.x)は対応していないので javascript-XPath を利用します。

ページのヘッダに下記のソースを (この順序で) 書き込んで下さい。

<script type="text/javascript" src="js/javascript-xpath.js"></script>
<script type="text/javascript" src="js/hamutab.js"></script>

設定を変更したい場合は、下記の様に書き込みます。

<script type="text/javascript" src="js/javascript-xpath.js"></script>
<script type="text/javascript" src="js/hamutab.js"></script>
<script type="text/javascript">
hamutab.setting = {
    tabClassName : "hamu-tab",
    pageClassName : "hamu-page",
    speed : 50,
    initAlpha : 0,
    addClassPresent : true,
    addClassName : "present"
}
</script>

詳しい設定は、3.使い方 設定 (menu3) にて説明します。

2. 使い方 実行

表示部分を切り替えるスイッチとなる要素に class属性に " hamu-tab " を付け加える。

例：

<a class="hamu-tab">menu 1</a>
<a class="hamu-tab">menu 2</a>

表示させる要素に class属性に " hamu-page " を付け加える。

例：

<div class="hamu-page">content 1</div>
<div class="hamu-page">content 2</div>

また、スイッチタブ要素と表示させる要素はそれぞれの順番に対応しています。

(※各 class属性の値は変更可能です。)

3.使い方 設定

(１．使い方 準備) で行ったhamutab.jsへのリンクの後に続いて

以下の様にヘッダ内に書き込む事で設定を変更できます。

(以下が初期値になります。)

<script>
hamutab.setting = {
    tabClassName : "hamu-tab",
    pageClassName : "hamu-page",
    speed : 50,
    initAlpha : 0,
    addClassPresent : true,
    addClassName : "present"
}
</script>

書き方はプロパティ名の後にコロン[ : ]を挟んで値を書きます。

各プロパティはカンマ[ , ]で繋ぎ、最後には書き込みません。

    プロパティ名 : 値,
    プロパティ名 : 値

スイッチタブ要素の class属性の値を変えられます。

初期設定では "hamu-tab" が付きます。

(値 : "文字列")

    tabClassName : "クラス名"

表示させる要素の class属性の値を変えられます。

初期設定では "hamu-page" が付きます。

(値 : "文字列")

    pageClassName : "クラス名"

フェードがかかる速度を変えられます。

プロパティ speed に数値を入れます。

(値 : 10[ 速い ]、50[ 初期値 ]、130[ ゆっくり] )

    speed : 50

透明度の初期値を変えられます。

プロパティ initAlpha に数値を入れます。

値を 10 に設定した場合 フェードなし になります。

(値 : 0 ～ 10 )

    initAlpha : 0

現在表示中のタブ要素に class属性を付加するかしないかを設定できます。

初期設定では、有効になっているスイッチタブ要素に class属性が追加されます。

(※CSS設定はhamutab.js側では行っていません。)

もし class属性を付けたくない場合はプロパティ値を false にして下さい。

(値 : true or false )

    addClassPresent : false

現在表示中のタブ要素に class属性に付ける名前を変更できます。

初期設定では "present" が付きます。

(値 : "文字列")

    addClassName : "クラス名"

4. ライセンス

hamutab.js はMITライセンスにて配布します。