**jQuery OrangeTree 插件详解**
`jQuery OrangeTree` 是一款用于构建无限级树形结构的插件，适合用于网站导航、数据展示等场景。它提供了丰富的自定义样式选项和可配置的JavaScript参数，使开发者能够灵活地创建符合设计需求的树型结构。
### 插件样式
`OrangeTree` 的样式主要分为以下几类：
1. **首级菜单样式**：
- `OrangeTree.OrangeTree控件.first_node`：首级菜单的默认样式。
- `OrangeTree.OrangeTree控件.first_node_hover`：首级菜单鼠标悬停时的样式。
- `OrangeTree.OrangeTree控件.first_node_click`：首级菜单被点击后的样式。
- `OrangeTree.OrangeTree控件.first_node_subItem`：首级菜单下子级菜单的样式。
2. **父级菜单样式**：
- `Item`：父级菜单通用样式。
- `Item_node`：父级菜单默认样式。
- `Item_node_hover`：父级菜单鼠标悬停时的样式。
- `Item_node_click`：父级菜单被点击后的样式。
- `Item_Img_bg`：父级菜单图标的样式。
3. **子级菜单样式**：
- `subItem`：子级菜单的基础样式。
- `subItem span`：子级菜单默认样式。
- `subItem_node_hover`：子级菜单鼠标悬停时的样式。
- `subItem_node_click`：子级菜单被点击后的样式。
- `subItem_Img_bg`：子级菜单图标的样式。
对于带星号(*)的样式，建议不要修改，以免影响插件的基本功能。
### JavaScript 参数说明
`OrangeTree` 插件提供了多个可配置的JavaScript参数，以满足不同的显示需求：
1. `width`：控件的宽度，例如 "300px"。
2. `height`：控件的高度，例如 "500px"。
3. `indent`：层级缩进的距离，例如 "20"，单位通常是像素。
4. `view`：初始显示方式，有 "expanded"（全部展开）、"collapsed"（全部关闭）和 "firstNode"（指定显示首级的第几级）三种。
5. `firstNode`：当 `view` 设置为 "firstNode" 时，此属性指定显示首级的第几级。
6. `single`：指定显示方式，如果设为 `true`，则只能打开一级目录；如果设为 `false`，则允许多级目录的展开。
### 使用步骤
1. 引入必要的CSS和JavaScript文件：
```html
<link href="Styles/OrangeTree.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/OrangeTree.js" type="text/javascript"></script>
```
2. 创建HTML结构：
```html
<div class="OrangeTree">
<ul>
<li>……</li>
……
</ul>
</div>
```
3. 初始化插件并设置参数：
```javascript
$(document).ready(function() {
$(".OrangeTree").OrangeTree({
width: "300px",
height: "500px",
indent: 20,
view: "collapsed",
firstNode: 1,
single: false
});
});
```
通过以上步骤，你可以轻松地在网页中实现一个功能完善的无限级树型插件。`OrangeTree` 的灵活性和易用性使其成为jQuery开发者的理想选择，无论是在大型项目还是小型应用中，都能发挥出其优势。
