Iroha.Togglable

概要

開いたり閉じたりします。

動作確認ブラウザ

(fixme)

実装ファイル配置

(fixme)

HTML への組み込み

<head>
    :
    <script src="path/to/jquery.js"></script>
    <script src="path/to/iroha.js"></script>
    <script src="path/to/iroha.togglable.js"></script>
    :
</head>

実際の案件で使えるレベルにするには、その案件でのビジュアルデザインに沿ってスタイルを作り込む必要があります。（例：sample.css）

動作例

基本的な使い方

<div id="example">
    <button>開閉ボタン</button>
    <div>開閉される部分</div>
</div>

// Iroha ライブラリの標準的な方法
var $button   = $('#example button');
var $target   = $('#example div'   );
var togglable = Iroha.Togglable.create($target, $button);

// または jQuery っぽさ優先で
$('#example div').Iroha_Togglable('#example button');

参考：sample.js

初期状態で開いているパターン

初期状態で閉じているパターン

単に <div style="display:none"> と書いただけ。外部 CSS を使ってこの div が display:none となるようにしてあるのでも良い。

ページ内リンクによる自動的紐づけ

Iroha.Togglable.autoSetup() を実行すると、以下の構造の HTML が自動的に探され、開閉機能が自動設定されます。

この自動探索と自動設定は、該当のリンク部分をクリックしたときに初めて実行されます。

:
<p><a href="#target-id">開閉ボタン</a></p>
:
<div id="target-id" class="iroha-togglable">開閉される部分</div>
:

Iroha.Togglable.autoSetup();

参考：sample.js

初期状態で開いているパターン

開く 閉じる

初期状態で閉じているパターン

開く 閉じる

多対多連携の例

<div id="example">
    <p><a href="#">開閉ボタン</a><p>
    :
    <div>開閉される部分</div>
    :
    <div>無関係</div>
    :
    <div>開閉される部分</div>
    :
    <p><a href="#">開閉ボタン</a><p>
</div>

var $buttons  = $('#example3 > p > a');
var $targets  = $('#example3 > div:nth-of-type(odd)');
var togglable = Iroha.Togglable.create($targets, $buttons);

参考：sample.js

開く 閉じる

この段落は開閉されるブロックに挟まれているが、無関係。

開く 閉じる

チェックボックス連携の例

参考：sample.js

ラジオボタン連携の例

参考：sample.js

コンストラクタ・メソッド解説

(fixme)

written by Koji Kasugai (kojika@necomesi.jp) 2013-03-14