如何为dynatree中的每个节点设置特定图标

时间:2014-02-04 09:51:31

标签: jquery dynatree jquery-dynatree

我有一个代表图标的课程。如何使用此类显示我想要的节点图标而不是默认图标?

3 个答案:

答案 0 :(得分:0)

您应该查看有关Theming的DynaTree文档。

您可以编写custom.css并添加对相关类的引用

<link href="skin-custom/custom.css" rel="stylesheet" type="text/css" >

然后使用文档中解释的选项之一包含对此类的引用:

<li data="addClass:'custom1'">Node with custom class 1 
<li data="icon: 'customDoc1.gif'">Node with standard CSS, but custom icon

您可以设置自己的自定义图标,并将路径设置为树的属性: imagePath:“skin-custom /”

复制文档中的大部分行,如果您需要帮助的更具体,请详细说明。希望这能让你前进。 THX

答案 1 :(得分:0)

在css中应用此功能 在文件夹open.gif的位置放置所有展开文件夹的图标

 .dynatree-ico-ef span.dynatree-icon  /* Expanded Folder */
    {
        background-image: url("folder-open.gif");
        background-repeat:no-repeat;
        background-position:0 0;
    }

在folder.gif的位置放置所有可折叠文件夹的图标

 .dynatree-ico-cf span.dynatree-icon  /* Collapsed Folder */
{
    background-image: url("folder.png");
    background-repeat:no-repeat;
    background-position:0 0;
}

For Fileicon

 span.custom span.dynatree-icon
{
   background-image:url('Fileicon.gif'); 
   background-position:0 0;
   background-repeat:no-repeat;
}

在li中添加类以获取文件图标。像这样

<li id="id2.2.1" data="addClass:'custom'">item2.1.1

答案 2 :(得分:0)

最初使用适当的css

设置树文件夹和节点的图标
var tree = $('#myId').fancytree({
    classNames: {
        folder: 'dynatree-folder'
        nodeIcon: 'icon-16-folder'
    }
});