Php 如何在HTML/Javascript中实现Windows帮助中的树结构_Php_Javascript_Html

Php 如何在HTML/Javascript中实现Windows帮助中的树结构

php javascript html

Php 如何在HTML/Javascript中实现Windows帮助中的树结构,php,javascript,html,Php,Javascript,Html,我目前正在从事一个项目，我想创建一个HTML帮助页面，为我的用户提供有关如何使用该应用程序的帮助和建议我想要实现的是一个树形布局，所以在左手边，所有标题旁边都有一个加号。然后，当用户单击加号按钮或文本时，它将展开与该部分相关的内容。如果用户再次单击它，则显示的所有项目现在都被重新隐藏我还没有找到任何关于如何做到这一点的像样的教程感谢您提供的帮助。您可以使用jquery、mootools或其他js库来完成但如果你想自己做，试试这个：让我们想象一下，您有如下列表： <div&

我目前正在从事一个项目，我想创建一个HTML帮助页面，为我的用户提供有关如何使用该应用程序的帮助和建议

我想要实现的是一个树形布局，所以在左手边，所有标题旁边都有一个加号。然后，当用户单击加号按钮或文本时，它将展开与该部分相关的内容。如果用户再次单击它，则显示的所有项目现在都被重新隐藏

我还没有找到任何关于如何做到这一点的像样的教程

感谢您提供的帮助。

您可以使用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>

这是一个非常简单的代码，如果您尝试，您可以做得更好。

我花了一些时间构建了一个如您所述的快速树系统。有趣的小运动。复制并粘贴，在浏览器中打开（我使用的是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>


div#tree ul{margin:0 20px；padding:0；列表样式类型：none；}
div#tree ul{显示：无；}
div#tree li>div{display:inline；右边距：5px；cursor:pointer；}
div#树标签：悬停{文本装饰：下划线；光标：指针；}
div#tree>ul{display:block；}
$（文档）.ready（函数（）{
//为所有子菜单设置加号
$（'li:has（“ul”）>div'）.html（'&plus；'）；
//句柄加减树展开
$（'li>div'）。在（'click'，函数（e）{
if（$（this）.parent（'li'）.hasClass（'selected'））{
$（this.sillides（'ul'）.slideUp（）；
$（this）.parent（'li'）.removeClass（'selected'）；
$（this.html（“&plus；”）；
}否则{
$（this.sibbines（'ul'）.slideDown（）；
$（this）.parent（'li'）.addClass（'selected'）；
$（this.html（“&减号；”）
}
})
//句柄树项链接存储为LI数据属性
$（'li>label'）。在（'click'，函数（e）上{
//这是您的URL、URI、链接、位置等
警报（$（this）.parent（'li'）.attr（'data-location'））
})
});

&lfloor；一级项目1
&lfloor；一级项目2
&lfloor；一级项目3
&lfloor；一级项目4
&lfloor；一级项目5

&lfloor；二级项目1
&lfloor；二级项目2
&lfloor；二级项目3
&lfloor；二级项目4
&lfloor；二级项目5

&lfloor；第三级项目1
&lfloor；第三级项目2
&lfloor；三级项目3
&lfloor；三级项目4
&lfloor；三级项目5
&lfloor；三级项目6
&lfloor；三级项目7


&lfloor；二级项目6


&lfloor；一级项目6
&lfloor；一级项目7
&lfloor；一级项目8
&lfloor；一级项目9
&lfloor；一级项目10
&lfloor；一级项目11

很多框架都内置了这些组件。签出ExtJS、Dojo或任何其他RIA框架，看看它是否可以在您的项目中工作。有一点学习曲线，但一旦您学习，您的代码库将更易于管理

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

像这样吗？看看dojo treeview，它使用起来非常简单。你所要做的就是：复制标签并更改ID号。

<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>