0

我正在寻找一个 jQuery 插件/脚本来制作这样的东西：

例子

在此处输入图像描述

从我目前的情况来看：

<select name="">
    <option disabled="disabled" value="1">Category A</option>
       <option value="2">Category A1</option>
       <option value="3">Category A2</option>
       <option value="4">Category A3</option>

    <option disabled="disabled" value="5">Category B</option>
       <option value="6">Category B1</option>
       <option value="7">Category B2</option>
       <option value="8">Category B3</option>
</select>

可能吗？或者我必须以某种方式从 SELECT 更改为 UL 和 OPTIONS 更改为 LI？

4

3 回答 3

1

是的UL，OL和 childIL是创建“树视图”的规范。

您链接到的示例也UL和LI。

使用 Chrome 之类的浏览器并右键单击页面上的元素以查看 HTML，您将学到很多东西！

于 2013-04-06T11:38:21.270 回答
0

我必须以某种方式从 SELECT 更改为 UL 和 OPTIONS 更改为 LI？

如果你想要一些复杂的东西 a select\option构造是不够的，更不用说生成有效的 HTML 了，因为你可以在option.

我认为您将需要研究ul li集合。

Dynatree 是如何做到的？

如果您检查您链接的示例页面的来源，您会看到以下内容，准确地向您展示了用于创建它的元素，使用ul li集合以及子\元素spans的顶级元素。ulli

此外，您还可以在每组课程中span找到更多内容。spans这些类使用 CSS 为文件夹、扩展器以及来自同一个 sprite-sheet 的复选框注入图像。

使用来自 HTML 和 CSS 的以下数据应该可以帮助您开始正确的方向。

这是其中一棵树的 HTML：

<ul class="dynatree-container" style="">
    <li class=""><span class="dynatree-node dynatree-exp-c dynatree-ico-c"><span class="dynatree-connector"></span><span class="dynatree-checkbox"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title" title="Look, a tool tip!">item1 with key and tooltip</a>
        </span>
    </li>
    <li class=""><span class="dynatree-node dynatree-selected dynatree-exp-c dynatree-ico-c"><span class="dynatree-connector"></span><span class="dynatree-checkbox"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title">item2: selected on init</a>
        </span>
    </li>
    <li class=""><span class="dynatree-node dynatree-folder dynatree-has-children dynatree-exp-c dynatree-ico-cf"><span class="dynatree-expander"></span><span class="dynatree-checkbox"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title">Folder</a>
        </span>
    </li>
    <li class="dynatree-lastsib"><span class="dynatree-node dynatree-expanded dynatree-has-children dynatree-lastsib dynatree-exp-el dynatree-ico-e"><span class="dynatree-expander"></span><span class="dynatree-checkbox"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title">Document with some children (expanded on init)</a>
        </span>
        <ul style="">
            <li class=""><span class="dynatree-node dynatree-has-children dynatree-active dynatree-exp-c dynatree-ico-c"><span class="dynatree-expander"></span><span class="dynatree-checkbox"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title">Sub-item 4.1 (active on init)</a>
                </span>
            </li>
            <li class=""><span class="dynatree-node dynatree-has-children dynatree-selected dynatree-exp-c dynatree-ico-c"><span class="dynatree-expander"></span><span class="dynatree-checkbox"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title">Sub-item 4.2 (selected on init)</a>
                </span>
            </li>
            <li class=""><span class="dynatree-node dynatree-exp-c dynatree-ico-c"><span class="dynatree-connector"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title">Sub-item 4.3 (hideCheckbox)</a>
                </span>
            </li>
            <li class="dynatree-lastsib"><span class="dynatree-node dynatree-lastsib dynatree-exp-cl dynatree-ico-c"><span class="dynatree-connector"></span><span class="dynatree-checkbox"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title">Sub-item 4.4 (unselectable)</a>
                </span>
            </li>
        </ul>
    </li>
</ul>

下面是用于上述 HTML 的一些CSS 。

对于 check-boxes dynatree-checkbox、 iconsdynatree-icon和 expandersdynatree-expander类，这个 CSS 用于指向同一个 sprite-sheet，唯一改变的是选择所用图像的工作表上的位置：

span.dynatree-empty,
span.dynatree-vline,
span.dynatree-connector,
span.dynatree-expander,
span.dynatree-icon,
span.dynatree-checkbox,
span.dynatree-radio,
span.dynatree-drag-helper-img,
#dynatree-drop-marker
{
    width: 16px;
    height: 16px;
/*  display: -moz-inline-box; /* @ FF 1+2 removed for issue 221 */
/*  -moz-box-align: start; /* issue 221 */
    display: inline-block; /* Required to make a span sizeable */
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: left;
    background-image: url("icons.gif");
    background-position: 0 0;
}
于 2013-04-06T11:42:01.727 回答
0

您不能将 SELECT 元素样式化为树结构，例如如何。在您的情况下，您只能选择一项。但是您可以通过 UL 和 LI-s 基于您的 SELECT 元素创建树形结构，并隐藏 SELECT 元素以将所选项目存储在树形结构中。

于 2013-04-06T11:52:43.597 回答