firstAudience

treasurebox.js - JavaScriptによる開閉ボックスなインターフェース

» Ver.1.1 Download

特長

  • フォルダのような開閉ボックス（トグルスイッチ）を作成できます。
  • デザインの異なる開閉ボックスを、同一ページ内に複数設置可能。
  • onClick();イベントハンドラが不用です、Validなhtmlを目指すあなたへ。
  • JavaScript オフ時、ボックスは開いた状態です。アクセシブルなhtmlを目指すあなたへ。
  • IE5.5〜IE7, Firefox, Opera, Safari（OSX10.3以上）に対応。
  • 利用許諾：クリエイティブ・コモンズ - シェアアライク 2.1

Demo

開けるか？

500ガバスGet!!

開けるか？

箱はひと喰い箱だった!!

開けるか？

2ガバスGet!!


利用方法

必要なファイル

  1. treasurebox.js » Download
  2. オン／オフ 各画像
  3. 適用対象のhtml

htmlの編集

treasurebox.jsとの関連づけを行います。htmlの<head>〜<head>領域内などに以下の行を追加してください。
尚、$設置先のパス$はtreasurebox.jsの置き場所に合わせて適宜編集してください。
機能を適用する部分へは、次のようにclassづけ／idづけをします。
  • <div class="A_sec">
    • <a href="#" id="A_1">スイッチ</a>
      <div id="A_1_block">〜内容〜</div>
    • <a href="#" id="A_2">スイッチ</a>
      <div id="A_2_block">〜内容〜</div>
    • <a href="#" id="A_3">スイッチ</a>
      <div id="A_3_block">〜内容〜</div>
    • •••スイッチと内容のセットは必要分繰り返す•••
    </div>
解説

  1. まず共通の識別子を決めてください。アルファベットからなる文字列ならなんでも構いませんが、ここでは仮に"A"としています。

  2. セクションを囲むdivへ、次のクラスを記述します
    共通の識別子_sec
    例）class="A_sec"

  3. スイッチと開閉部分は、対になるようにidを記述します。

    スイッチ部分へは：共通の識別子_通し番号
    例）id="A_1", id="A_2"•••

    開閉内容へは：共通の識別子_通し番号_block
    例）id="A_1_block", id="A_2_block"•••

以上でhtmlへの記述は完了です。
尚、htmlのブロック構造は若干融通が利きます、次の構造でも動きます。

  • <div class="B_sec">
    • <a href="#" id="B_1">スイッチ</a>
      <div id="B_1_block">〜内容〜</div>
  • </div>
    <div class="B_sec">
    • <a href="#" id="B_2">スイッチ</a>
      <div id="B_2_block">〜内容〜</div>
  • </div>
    <div class="B_sec">
    • <a href="#" id="B_3">スイッチ</a>
      <div id="B_3_block">〜内容〜</div>
    </div>

treasurebox.js の編集

７行目からはじまるuser setting部分をカスタマイズします。
基本 ["指定","指定",・・・] となっているカンマで区切られた " " 内を編集していきます。記述順で縦に組となっているので、設定の数と順番が一致するよう注意してください。

  1. var section_label = ["Aの設定","Bの設定",•••];
  2. var section_style = ["Aの設定","Bの設定",•••];
  3. var target_label = ["Aの設定","Bの設定",•••];
  4. var target_style = ["Aの設定","Bの設定",•••];
  5. var target_bg_hide = ["Aの設定","Bの設定",•••];
  6. var target_bg_show = ["Aの設定","Bの設定",•••];
解説

A, B ２つのデザインを定義した場合の例です。

  1. var section_label = [".A_sec",".B_sec"];
    セクション全体につけたclass名を記述します。ドットつきで記述してください。

  2. var section_style = ["border: solid 1px #cccccc;","border: solid 1px #cccccc;"];
    上記セクションのデザインをCSSで記述します。

  3. var target_label = ["A_","B_"];
    スイッチに付けたidの共通の文字列を記述します。アンダースコアを付けてください。

  4. var target_style = ["background: no-repeat left center; padding-left: 20px;","background: no-repeat left center; padding-left: 20px;"];
    上記スイッチのデザインを決めるCSSを記述します。

  5. var target_bg_hide = ["http://firstaudience.com/labo/images/listimage-h.gif","http://firstaudience.com/labo/images/treasurebox-h.gif"];
    スイッチの背景画像（閉じているとき）

  6. var target_bg_show = ["http://firstaudience.com/labo/images/listimage-s.gif","http://firstaudience.com/labo/images/treasurebox-s.gif"];
    スイッチの背景画像（開いているとき）

最後の行は、対応外のブラウザへのエラーメッセージです。必要があれば " " 内を書き換えてください。

  1. var browser_disable = "Your Browser is Not Supported.";

以上

お気づきの点はこちらまで
Eメール: info@firstaudience.com