一个基于jQuery的树型插件(OrangeTree)使用介绍_jquery

OrangeTree
下载地址:OrangeTree

首先大家先看下演示吧!
首先声明本人美术功底比较差!这个样式大家就将就一下吧!我将这个无限级树型插件命名为桔子树,它主要就分为3个级别的节点:

首级菜单,就是树上的一级菜单
父级菜单,也就是下面还有节点的菜单
子级菜单,也就是下面没有节点的菜单
每个节点都可以用CSS控制其样式,详细请看下表:


OrangeTree

.OrangeTree 控件
.first_node 首级菜单的默认样式
.first_node_hover 首级菜单鼠标移上的样式
.first_node_click 首级菜单鼠标点击后的样式
.first_node_subItem 首级菜单下的子级菜单样式
.Item 父级菜单
.Item_node 父级菜单默认样式
.Item_node_hover 父级菜单鼠标移上的样式
.Item_node_click 父级菜单鼠标点击后的样式
.Item_Img_bg 父级菜单图标样式
.subItem 子级菜单
.subItem span 子级菜单默认样式
.subItem_node_hover 子级菜单鼠标移上的样式
.subItem_node_click 子级菜单鼠标点击后的样式
.subItem_Img_bg 子级菜单图标样式
注:注释为(*)的样式建议不要修改

JavaScript参数说明:

OrangeTree
width 控件宽度
height 控件高度
indent 层级缩进
view 初始显示方式,expanded:全部打开,collapsed:全部关闭,firstNode:指定显示首级的第几级(firstNode指定)
firstNode view为firstNode此属性指定显示首级的第几级
single 指定显示方式,是否只能开打一级目录

具体用法如下:
首先添加引用

复制代码 代码如下:

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

HTML

复制代码 代码如下:

<div class="OrangeTree">
<ul>
<li>……</li>
……
</ul>
</div>

Javascript

复制代码 代码如下:

$(document).ready(function() {
$(".OrangeTree").OrangeTree({
width:"300px",
height:"500px",
indent:20,
view: "collapsed",
firstNode: 1,
single:false
});
});

时间: 2024-12-05 00:43:48

一个基于jQuery的树型插件(OrangeTree)使用介绍_jquery的相关文章

TimergliderJS 一个基于jQuery的时间轴插件_jquery

Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及其其它需要显示历史的项目. 时间轴可以通过右边拖放垂直滑动器来缩放界面:向上缩小,向下放大.同时也支持使用滚轮来控制缩放.通过鼠标拖东空白处可以左右拖动时间轴,点击事件可以弹出一个小窗口来描述时间内容及其数据. JS组件有以下几个目标: 支持iPads和其它支持触摸的设备 非常容易整合到基于HTML/JS应用和界面 支持复杂的布局,并且可以对任何指定自定义HTML元素添加事件 安

基于jquery中children()与find()的区别介绍_jquery

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元素集合中每个元素的后代.参数是必选的,可以为选择器.jquery对象可元素来对元素进行筛选. .find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级.这里的children,我理解为儿子,只在儿子这一级遍历.看下例子: 复制代码 代码如下: .chi

jWiard 基于JQuery的强大的向导控件介绍_jquery

我就不贴我现在做项目的代码,我直接把作者的示例搬过来,因为改动不大,只要做点修改,就能很好的满足我们自己的需求. 原文地址 猛点这里下载       作者官网   不过是英文的,英语好的话 可以看原文,生怕我表达错误. 不知道童鞋们在平时的开发用到用向导式开发这种方式没有?有人问 什么是向导式开发呢?其实,很简单,就是让用户完成一个步骤,然后点击下一步,完成一个步骤就点击下一步,这样 按照我师父的来说,可以很好的提升用户体验. OK,废话不说了,先来一个最简单的例子:例子1: 1.1当然咯,既然

passwordStrength 基于jquery的密码强度检测代码使用介绍_jquery

查看示例:DEMO  打包下载 使用很简单. 复制代码 代码如下: $('#pass').passwordStrength(); XHTML 复制代码 代码如下: <p><label>请输入密码:</label> <input type="password" id="pass" class="input" /></p> <div id="passwordStrengthD

基于jQuery实现选取月份插件附源码下载_jquery

这是一个基于jQuery的可以选择年份和月份的月份拾取插件,你可以设置点击页面上的任意元素触发弹出年月选择面板,可以是一个链接也可以是一个输入框,广泛应用于月份查询,而无需设置select表单. 效果展示        源码下载   HTML 首先将monthpicker插件相关的css和js文件载入,大家可以到源码下载里下载css和js文件. <link rel="stylesheet" type="text/css" href="jquery.m

upload-做一个基于jquery 的上传控件

问题描述 做一个基于jquery 的上传控件 我是新手,我想做一个基于jquery upload的上传控件需要从哪方面考虑?谢谢 解决方案 很多居于jquery的上传插件,如ajaxfileupload,jquery.form.js,uploadify等..自己找下API看 http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.htmlhttp://plugins.jquery.com/form/ 解决方案二: http://ww

基于jQuery的消息提示插件 DivAlert之旅(二)_jquery

改进的代码部分主要如下: 1.创建default.css文件: 代码 复制代码 代码如下: img { vertical-align:middle; } .jBg { position: absolute; top: 0; left: 0; z-index: 9999; background-color: #999; filter: alpha(opacity=70); opacity: 0.7; } .jWrap { position: absolute; border: 1px solid

10 款基于 jQuery 的切换效果插件推荐

本文整理了 10 款非常好用的jQuery切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换.  1. InnerFade  这是一个基于jQuery的小插件,可以实现页面内的元素淡入淡出效果.  源码/演示  2. HighlightFade  该插件可以实现高亮.缩放等效果.  源码/演示  3. Dynamic Page / Replacing Content  使用按钮实现网页内容的动态切换.  源码 / 演示  4. jqFancyTransitions 

10 个非常酷的基于jQuery的菜单效果插件

除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉.本文为你带来10个非常酷的基于jQuery的菜单效果插件.  1.  右击菜单  一个创建右击菜单的插件,简洁且易用.  源码/演示  2.  jQuery多级菜单--FX CSS菜单与子菜单  使用CSS创建菜单,使用JavaScript展示效果.特点如下:  跨浏览器,兼容所有浏览器(包括IE6). 效果:在鼠标经过和子菜单展开时,具有平滑的淡入淡出效果. 易于设置:简单的.用于无限级别菜单项目的嵌套无序列表.