`

JQuery插件之-- 树型插件jquery.treeview

阅读更多

1. 地址:
http://dev.jquery.com/browser/trunk/plugins/treeview

可以下载 jquery.treeview.zip,其中包含了jquery.treeview.js 和压缩版,还有例子。

2. 起步

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>***系统</title>
	
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="jquery/treeview/jquery.treeview.css" />
	<script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
	<script src="jquery/treeview/lib/jquery.cookie.js" type="text/javascript"></script>
	<script src="jquery/treeview/jquery.treeview.js" type="text/javascript"></script>
	
	<script type="text/javascript">
	$(document).ready(function(){
		$("#browser").treeview();
	});
	</script>
	</head>
	<body>
	<ul id="browser" class="filetree">
		<li class="folder"><span class="folder">流程管理引擎系统</span>
			<ul>
				<li class="closed"><span class="folder">故障查询</span>
					<ul>
						<li><span class="file">简单查询</span></li>
						<li><span class="file">高级查询</span></li>
					</ul>
				</li>
				<li class="closed">
					<span class="folder">故障统计</span>
					<ul>
						<li><span class="file">统计分析</span></li>
					</ul>
				</li>
	
				<li class="closed">
					<span class="folder">流程管理</span>
					<ul>
						<li><span class="file"><a href="workflow/process_definition_index.html" target="workareaFrame">流程维护</a></span></li>
						<li><span class="file">挂起流程</span></li>
						<li><span class="file">监控流程</span></li>
						<li><span class="file">设置优先级</span></li>
						<li><span class="file">催办流程</span></li>
					</ul>
				</li>	
				<li class="closed">
					<span class="folder">通知管理</span>
					<ul>
						<li><span class="file"><a href="notification/announcement_index.html" target="workareaFrame">公告管理</a></span></li>
					</ul>
				</li>					
	
				
			</ul>
		</li>
	</ul>
 
</body></html>
 
分享到:
评论

相关推荐

    dtree、xtree和jquery-treeview构建树型菜单

    在本主题中,我们将深入探讨“dtree”、“xtree”以及“jquery-treeview”这三个JavaScript插件,它们都是用来创建这样的菜单的工具。下面我们将逐一介绍这三个插件,并讨论它们的特点和使用方法。 首先,`dtree`是...

    jquery树型

    当我们谈论“jQuery树型”时,我们指的是利用jQuery来创建和操作树形数据结构的用户界面。树型结构通常用于展现层次化信息,如文件系统、组织结构或导航菜单。在网页应用中,它可以帮助用户更直观地理解和操作复杂的...

    jquery_treeview实现树型demo代码完整示例下载.txt

    基于jquery的jquery.treeview组件,实现tree型效果代码示例,如下图所示

    bootstrap树形下拉框 下拉框树形菜单

    &lt;select id="treeview-select"&gt; 请选择 父节点1"&gt; 子节点1 子节点2 父节点2"&gt; 子节点1的子节点1 ``` 接下来,需要在HTML文档中引入Bootstrap的相关CSS和JS文件,以及`bootstrap-treeview.js`插件。之后...

    一个基于jQuery +ASP.NET实现的树型控件Treeview右键菜单Context Menu 源码例子

    在这个例子中,我们将探讨一个基于jQuery和ASP.NET技术实现的树型控件(TreeView)的右键菜单(Context Menu)功能。这个源码实例旨在帮助开发者了解如何在网页应用中集成这种常见且实用的交互元素。 首先,jQuery...

    jquery插件

    - **树型(Tree)**:`jQuery.treeview`等插件可以将扁平的HTML列表转换为可折叠的树状结构,适合展示层级关系的数据。 - **提示对话框(Tooltip)**:如`jQuery.tooltip`,在鼠标悬停时显示元素的相关信息,提高...

    纯JQuery实现TreeView示例带连接虚线|多选框

    在本文中,我们将深入探讨如何使用纯jQuery来创建一个具备连接虚线和多选功能的TreeView组件。TreeView是一种常见的UI元素,它以树状结构显示数据,常用于导航菜单、文件系统浏览或层级数据的展示。jQuery是一个轻量...

    树型控件jquery

    例如,开发者可能需要调用`$.fn.treeview`这样的插件方法来初始化树型控件,并使用`expandNode`或`collapseNode`等方法来控制节点的展开和折叠。 在实际开发中,我们需要考虑以下关键点: 1. 数据源:树型控件的...

    jQuery 树型菜单插件(Treeview)

    jQuery 树型菜单插件(Treeview) jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。适用于一些菜单的导航,支持基于 cookie 的持久性菜单。   Folder 1     Item 1.1     Item 1.1.1       ...

    多个简单漂亮的树型菜单JS代码

    jQuery Treeview插件则专门用于创建树型菜单,提供了一套完整的解决方案,包括CSS样式和JavaScript函数。 使用jQuery Treeview的步骤通常包括以下几步: 1. **引入依赖**:在HTML文件中引入jQuery库和jQuery ...

    完整版填充树型框.rar

    在编程中,树型框通常由控件或组件实现,如在.NET Framework中使用TreeView控件,在JavaScript中使用jQuery UI或React的Tree组件。 2. **数据绑定**:树型框的数据可以来源于数据库、XML文件或其他数据源。数据绑定...

    jquery树形插件和vim编辑器win32

    例如,一些知名的jQuery树形插件有jQuery UI的Treeview、jstree和jQuery EasyUI的Tree。 “vim编辑器win32”是指Vim编辑器在Windows 32位操作系统上的版本。Vim是一个高度可配置且功能强大的文本编辑器,具有命令行...

    Javascript树型菜单

    7. **第三方库**:虽然在提供的文件列表中没有明确的JavaScript库,但实现树型菜单通常会用到像jQuery UI、jstree或Bootstrap Treeview这样的库。这些库提供了丰富的API和预定义的样式,使得创建交互式树型菜单变得...

    非常实用的JS树型菜单

    - **jQuery插件**:jQuery提供了丰富的API简化DOM操作,例如`treeview`插件可以快速实现树型菜单。只需引入jQuery和对应的插件库,然后调用方法初始化即可。 - **专业库实现**:如`jstree`、`angular-ui-tree`、`...

    ASP.NET-[其他类别]坏孩子无限级树型菜单.zip

    我们还可以利用JavaScript库,如jQuery或纯JavaScript,增强用户体验,例如添加异步加载子节点的功能,以提高页面加载速度。 此外,这个示例可能还包含CSS样式文件和JavaScript脚本来控制菜单的外观和行为。...

    Ajax框架——jquery树

    有许多优秀的jQuery树插件可供选择,如jQuery UI的Treeview、jstree、treeview等。这些插件通常支持多种操作,如点击节点、拖放节点、搜索节点等功能,且可以通过Ajax动态加载子节点数据。 例如,`jstree`是一款...

    树型结构(javascript+css+html)

    这时,可以考虑使用现有的库,如jQuery UI的Treeview插件,或者专为前端数据展示设计的库,如D3.js。这些库提供了丰富的API和自定义选项,可以轻松实现复杂的功能。 总的来说,结合HTML、CSS和JavaScript,我们可以...

    jQuery 梅花雪地区树型菜单选择插件

    内容索引:脚本资源,jQuery,TreeView,树形菜单 梅花雪基于jQuery 的树型地区菜单选择插件,以及一个带复选框、支持层级的自定义表格,看上去很强大,特别是学习jQuery的朋友相当有用,本代码是源码爱好者从一个...

    bootstrap select树形下拉框

    同时,可能还需要引入一个专门处理树形结构的库,如jQuery Treeview或Select2的树形插件。 下面是一些关键步骤和知识点: 1. **HTML结构**:基础的HTML下拉框应该包含一个`&lt;select&gt;`元素,其中每个`&lt;option&gt;`代表...

    树型控件

    在JavaScript的前端开发中,可以使用jQuery Treeview插件或更现代的React、Vue等框架中的组件。开发者需要为每个节点提供数据,定义节点的展开/折叠行为,以及响应用户的交互事件。 5. **特性与扩展** - 多选:...

Global site tag (gtag.js) - Google Analytics