[MooTools] DataTree Plugin

左から右への水平方向にツリー形式で並べるクラスです。
初期は定義リストだけど使う要素は何でもいい。

DataTree ScreenShot

View Demo

xHTML Source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<dl id="tree">
<dt id="root-item" class="item"><a href="#" class="name">ROOT</a></dt>
<dd id="data">
    <dl class="child-1 list">
        <dt class="item weaver"><a href="#" class="name">Child 1</a></dt>
        <dd>
            <div class="item child-2"><a href="#" class="name">Child 2</a></div>
            <dl class="child-2 list">
                <dt class="item"><a href="#" class="name">Child 2</a></dt>
                <dd>
                    <div class="child-3 item"><a href="#" class="name">Child 3</a></div>
                </dd>
            </dl>
            <div class="item child-2"><a href="#" class="name">Child 2</a></div>
            <dl class="list child-2">
                <dt class="item"><a href="#" class="name">Child 2</a></dt>
                <dd>
                    <dl class="child-3 list">
                        <dt class="item"><a href="#" class="name">Child 3</a></dt>
                        <dd>
                            <div class="child-4 item"><a href="#" class="name">Child 4</a></div>
                        </dd>
                    </dl>
                </dd>
            </dl>
        </dd>
    </dl>
</dl>

ソースコードのルール

  • ルート要素にID root-item を付与する
  • データの親にID root-data を付与する
  • 各データにClass item を付与する
  • データの名前にClass name を付与する
  • リスト要素にClass list を付与する
  • 左へのインデントはClass child-(Number) で

プラグインがやること

  • 子データを1つしか持たないリストにClass single を追加する
  • 各リストの一番最後の要素にClass last を追加する
  • リストの[+]または[-]アイコンをクリックした時にClass close を追加/削除する
  • データをクリックした時にClass active を追加/削除する

プラグイン自体は大したことやってないので、
.single と .last を手動付与するならJavaScriptは不要である。
ただしその場合は#root-itemのテキストを中央に配置させるrootTextCenteringオプションの効果と、
1文字ずつ改行させるためのspan要素作成機能がなくなるので、CSSでスタイリングする必要があります。

Option

1
2
3
4
5
6
7
8
9
10
11
options: {
    target: 'tree', //ID
    root:'root-item', //ID
    data:'root-data', //ID
    activeItemClass:'active', //Class
    rootTextCentering:true, //auto centering(vertical)
    onOpen:$empty, //Event
    onClose:$empty, //Event
    onActive:$empty, //Event
    onInactive:$empty //Event
}

Download

動作には別途MooTools Coreが必要なので公式サイトから落としてください。

“DataTree Plugin” をダウンロード datatree.zip – 1749 回のダウンロード – 13.23 KB

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.