WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:ツリー表示

0:[投稿] あり [2002/04/09 12:41 ][環境:WIN+IE UNIX系+OTHER]

Javascript初心者です。
画面にエクスプローラの様な階層的なツリーを表示させて項目を表示させ、選択させたいのですが、よくわかりません。
displayの"none"と"block"を使えばできそうなのは、例があったのでわかるのですが、例では、表示項目が固定で書かれているのですが、そこを動的に変化させるようにしたいと思っています。(動的のデータはデータベースからもってくる)
ご存じの方がいらしたら教えて下さい。


1:[回答] ヨシミ [2002/04/10 13:06 ]

過去ログにあります(^▽^)


2:[回答] DOM ってべんりね。 [2002/04/10 20:56 ]

HTML の順不同リスト(UL,LI要素)を自動的に
展開式リストにするスクリプトを作ってみました。
このスクリプトの利点は、
HTML の記述にまったく手を入れる必要がないとこです。

但し、IE5以上, Netscape 6/Mozilla でしか動作しません。

参考になりますでしょうか?

<head>
<style type="text/css">
ul { list-style-type: none; }
ul ul { margin: 0 2.5em; padding: 0; }
li.treeRoot { margin-left: -12px; }
input { cursor: pointer; }
</style>
<script type="text/javascript">
<!--
window.onload = expTreeInitialize;

function UA(UAStr) {
    UA.Opera = UAStr.match(/Opera/);
    UA.ovIE5 = UAStr.match(/MSIE [56]/) && !UA.Opera;
    UA.Gecko = UAStr.match(/Gecko/);
} new UA(navigator.userAgent);

function expTreeInitialize() {
    if (!UA.ovIE5 && !UA.Gecko) return false;
    for (var i=0,obj,btn; i<document.getElementsByTagName("LI").length; i++) {
        obj = document.getElementsByTagName("LI")[i];
        if (obj.getElementsByTagName("UL").length) {
            obj.className = "treeRoot";
            btn = document.createElement('INPUT');
                btn.alt = ""; btn.type = "image";
                btn.src = "show.png"; btn.className = "show";
                btn.onclick    = new Function('expTreeChg(this)');
                btn.onkeypress = new Function('expTreeChg(this)');
            obj.insertBefore(btn,obj.firstChild); expTreeChg(btn);
        }
    }
}

function expTreeChg(btn) {
    var show = (btn.className == "hide") ? true : false;
    if (show)  { btn.className = "show"; btn.src = "show.png"; }
    if (!show) { btn.className = "hide"; btn.src = "hide.png"; }
    for (var i=0,obj; i<btn.parentNode.getElementsByTagName("LI").length; i++) {
        obj = btn.parentNode.getElementsByTagName("LI")[i];
        if (obj.parentNode == btn.parentNode.getElementsByTagName("UL")[0])
            obj.parentNode.style.display = show ? "block" : "none";
    }
}
//-->
</script>
</head>

<body>

<ul>
    <li>File1
        <ul>
            <li>File 1-1</li>
            <li>File 1-2
                <ul>
                    <li>File 2-1</li>
                    <li>File 2-2
                </ul>
            </li>
            <li>File 1-3</li>
        </ul>
    </li>
    <li>File2
        <ul>
            <li>File 2-1</li>
            <li>File 2-2</li>
            <li>File 2-3</li>
        </ul>
    </li>
</ul>

</body>

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World