3

私は現在プロジェクトに取り組んでおり、HTML ヘルプ ページを作成して、ユーザーにアプリの使用方法に関するヘルプとアドバイスを提供したいと考えています。

私が達成したいのはツリー レイアウトで、左側にすべてのタイトルの横にプラス記号が表示されます。次に、ユーザーがプラス ボタンまたはテキストをクリックすると、そのセクションに関連するコンテンツが展開されます。ユーザーがもう一度クリックすると、表示されていたすべてのアイテムが再び非表示になります。

これを行う方法についてのまともなチュートリアルを見つけることができませんでした。

ご協力いただきありがとうございます。

4

3 に答える 3

2

jquery、mootools、またはその他の js ライブラリを使用して実行できます。

しかし、自分でやりたい場合は、これを試してください：

次のようなリストがあるとします。

    <div><a id="cat1" onclick="toggle(this.id)">first cat</a>
    <ul id="content1">
        <li>text1</li><li>text2</li>
    </ul></div>

    <div><a id="cat2" onclick="toggle(this.id)">second cat</a>
    <ul id="content2">
        <li>text1</li><li>text2</li>
    </ul></div>

ここにjsがあります：

function toggle(obj)
{
    var con = document.getElementById("content"+obj.substr(3));
    if (con.style.display=="none") con.style.display="block"; else con.style.display="none";
}

これは非常に単純なコードです。

于 2012-12-11T20:39:18.877 に答える
2

あなたが説明したように、私は簡単なツリーシステムを構築するのに少し時間がかかりました. 楽しい小さなエクササイズ。コピーして貼り付け、ブラウザで開きます (私は FireFox を使用しています)。必要に応じて、DIV タグの +/- 記号を画像に変更します。CSS のマージンとパディングを調整して、すべてがシームレスに収まるようにします。お役に立てれば。

幸運を。

<html>
<head>
  <style type="text/css">

    div#tree ul { margin:0 0 0 20px; padding:0; list-style-type:none; }
    div#tree ul { display:none; }
    div#tree li>div { display:inline; margin-right:5px; cursor:pointer; }
    div#tree label:hover { text-decoration:underline; cursor:pointer; }
    div#tree>ul { display:block; }

  </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
    $(document).ready(function () {
        //Set plus sign for all sub menus
        $('li:has("ul")>div').html('&plus;');

        //Handle plus/minus tree expansion
        $('li>div').on('click', function (e) {
            if($(this).parent('li').hasClass('selected')) {
                $(this).siblings('ul').slideUp();
                $(this).parent('li').removeClass('selected');
                $(this).html('&plus;');
            } else {
                $(this).siblings('ul').slideDown();
                $(this).parent('li').addClass('selected');
                $(this).html('&minus;')
            }
        })

        //Handle tree item link stored as LI data attribute
        $('li>label').on('click', function (e) {
            //This is your URL, URI, Link, Location, etc
            alert($(this).parent('li').attr('data-location'))
        })

    });
  </script>

</head>
<body>

    <div id="tree">
        <ul>
            <li data-location=""><div>&lfloor;</div><label>First Level Item1</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item2</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item3</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item4</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item5</label>
                <ul>
                    <li data-location=""><div>&lfloor;</div><label>Second Level Item1</label></li>
                    <li data-location=""><div>&lfloor;</div><label>Second Level Item2</label></li>
                    <li data-location=""><div>&lfloor;</div><label>Second Level Item3</label></li>
                    <li data-location=""><div>&lfloor;</div><label>Second Level Item4</label></li>
                    <li data-location=""><div>&lfloor;</div><label>Second Level Item5</label>
                        <ul>
                            <li data-location=""><div>&lfloor;</div><label>Third Level Item1</label></li>
                            <li data-location=""><div>&lfloor;</div><label>Third Level Item2</label></li>
                            <li data-location=""><div>&lfloor;</div><label>Third Level Item3</label></li>
                            <li data-location=""><div>&lfloor;</div><label>Third Level Item4</label></li>
                            <li data-location=""><div>&lfloor;</div><label>Third Level Item5</label></li>
                            <li data-location=""><div>&lfloor;</div><label>Third Level Item6</label></li>
                            <li data-location=""><div>&lfloor;</div><label>Third Level Item7</label></li>
                        </ul>
                    </li>
                    <li data-location=""><div>&lfloor;</div><label>Second Level Item6</label></li>
                </ul>
            </li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item6</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item7</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item8</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item9</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item10</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item11</label></li>
        </ul>
    </div>

</body>
</html>
于 2012-12-11T20:59:25.143 に答える
0

これらのコンポーネントが組み込まれているフレームワークはたくさんあります。ExtJS、Dojo、またはその他の RIA フレームワークを調べて、プロジェクトで機能するかどうかを確認してください。少し学習曲線がありますが、一度学習すると、コード ベースはより管理しやすくなります。

http://www.sencha.com/products/extjs/examples/ http://cdn.sencha.com/ext-4.1.1a-gpl/examples/tree/treegrid.html

于 2012-12-11T21:14:18.993 に答える