【问题标题】:Design Tree Structure With CSS使用 CSS 设计树形结构
【发布时间】:2013-05-23 19:43:11
【问题描述】:

如何使用 HTML/CSS 设计以下类型的结构?

如果有,请提供任何参考网站链接

编辑: 抱歉,如果您没有收到我的问题,那只是我对设计不太了解 我正在尝试构建的是树结构,但我不知道我应该使用哪些 HTML 标签以及如何绘制这些线条,所以只需要你的帮助。如果您知道如何完成此操作,请分享。

谢谢。

【问题讨论】:

  • 我不知道你想要完成什么。您是在尝试用 HTML 来“绘制”实际的树图吗?
  • 节点是指页面?
  • @harsha 这没什么用,你基本上是在说“你如何编写代码来做到这一点”。 (好吧,这在技术上是必须要做的事情,但仍然如此。)
  • @millimoose 是的,我正在尝试画一棵树。而“节点”只是静态文本。
  • @millimoose :我碰巧知道一些与 OP 想要的完全一样的东西,但它是一个 jQuery 插件。因此问题:-)

标签: javascript css html


【解决方案1】:

https://github.com/wesnolte/jOrgChart

这是一个漂亮的 jQuery 插件,完全可以满足您的需求。

代码示例:

假设这是你的unordered list

<ul id="org">
<li>
    Food
    <ul>
        <li id="beer">Beer</li>
        <li>Vegetables
            <ul>
                <li>Pumpkin</li>
            </ul>
        </li>
        <li>Bread</li>
        <li class="collapsed">Chocolate
            <ul>
                <li>Topdeck</li>
                <li>Reese's Cups</li>
            </ul>
        </li>
    </ul>
</li>

像这样添加一个虚拟div

<div id="chart" class="orgChart"></div>

现在,你可以简单地使用

jQuery(document).ready(function() {
        $("#org").jOrgChart({
            chartElement : '#chart',
            dragAndDrop  : true
        });
    });

将您的unordered list 呈现为目录树/组织结构图结构。

【讨论】:

  • @Hardik : 该插件使用unordered list 绘制渲染树结构。
  • 请不要仅提供链接的答案。也许您可以提供代码示例或将您的“答案”作为评论发布?
  • @JanDvorak : 抱歉只提供链接答案。已添加代码并保留答案。这么多代码是否足够
猜你喜欢
  • 2018-07-01
  • 1970-01-01
  • 2021-04-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-02
  • 2021-05-20
  • 1970-01-01
相关资源
最近更新 更多