`

一个基于jQuery的简单树形菜单

 
阅读更多

一个基于jQuery的简单树形菜单

在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用。

比如 easyui 中的 tree 需要单击分叉节点前的小三角,才能够展开或关闭节点。另外,它还必需要求浏览器在兼容模式下才能正常使用(这个项目中使用的 easyUI 是 1.2.2 版本,新版的 Tree 不存在该问题),很是不方便。

想修改又无从下手,所以有单独写一个简单的树形菜单的想法,趁下班的时间,抽空写了一个简单的JS文件,基于jQuery1.6版本的 SimpleTree。

SimpleTree使用起来比较方便,它实现了最基本的树形菜单的功能,包括1个JS文件、1个CSS文件和5个图标文件。

使用时只要将相关文件复制到项目中,并在相应的页面引用它就行,例如:

复制代码
<!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>SimpleTree</title>
<link rel="stylesheet" type="text/css" href="js/tree_themes/SimpleTree.css"/>
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/SimpleTree.js"></script>
<script type="text/javascript">
$(function(){
    $(".st_tree").SimpleTree({
        click:function(a){
            if(!$(a).attr("hasChild"))
                alert($(a).attr("ref"));
        }
    });
});
</script>
</head>
<body>

<div class="st_tree">
<ul>
    <li><a href="#" ref="hyjm">欢迎界面</a></li>
    <li><a href="#" ref="xtgl">系统管理</a></li>
    <ul show="true">
        <li><a href="#" ref="yhgl">用户管理</a></li>
        <li><a href="#" ref="rzck">日志查看</a></li>
    </ul>
    <li><a href="#" ref="ckgl">仓库管理</a></li>
    <ul>
        <li><a href="#" ref="kcgl">库存管理</a></li>
        <li><a href="#" ref="shgl">收货管理</a></li>
        <li><a href="#" ref="fhgl">发货管理</a></li>
        <ul>
            <li><a href="#" ref="yhgl">用户管理</a></li>
            <li><a href="#" ref="rzck">日志查看</a></li>
        </ul>
    </ul>
</ul>
</div>

</body>
</html>
复制代码

上面代码在IE8中执行结果如图:

在Chrome里执行如图:

示例程序下载:SimpleTree1.0.zip

11.27更新1.1版本:SimpleTree1.1.zip

11.27更新1.2版本:SimpleTree1.2.zip

12.04更新1.3版本:http://files.cnblogs.com/zhhh/SimpleTree1.3.zip

分享到:
评论

相关推荐

    使用jquery实现树形菜单

    想修改又无从下手,所以有单独写一个简单的树形菜单的想法,趁下班的时间,抽空写了一个简单的JS文件,基于jQuery1.6版本的 SimpleTree。 SimpleTree使用起来比较方便,它实现了最基本的树形菜单的功能,包括1个...

    jquery树形菜单很好用理解又简单

    例如,在一个企业级应用中,可能需要一个展示部门结构的树形菜单,员工可以通过它来查看自己的上下级关系,或进行权限分配。 总之,jQuery树形菜单以其简单易用、功能强大和良好的兼容性,成为了Web开发中处理层级...

    jquery-zTree树形菜单

    jQuery zTree是一款基于jQuery的开源JavaScript库,用于创建交互式的树形菜单。它提供了丰富的配置选项、多种事件处理和灵活的数据接口,使得在网页中构建各种复杂的树结构变得非常简单。在本文中,我们将深入探讨...

    jquery树形菜单设计器

    总的来说,jQuery树形菜单设计器是一个强大的工具,它结合了jQuery的便利性和树形结构的直观性,使得在网页上构建和管理级联菜单变得简单而高效。无论是初学者还是经验丰富的开发者,都能从中受益,轻松实现复杂的...

    dtree+jquery 动态实现无限树形菜单 (包括增删改查)

    dtree是一款基于jQuery的插件,它提供了丰富的API和灵活的配置选项,使得在网页上创建交互式树形菜单变得简单易行。 首先,我们来深入理解dtree的核心功能。dtree允许开发者通过JSON或者HTML结构来定义树形菜单的...

    一个简单的JS树形菜单

    在本文中,我们将深入探讨如何使用JavaScript(JS)和jQuery_z_tree库来创建一个简单的树形菜单。这个菜单是基于SimpleTree1.3的JS思想,它极大地简化了前端开发人员的工作,使得创建动态、交互式的树状结构变得更加...

    树形菜单 三种使用的树形菜单

    例如,`jQuery`库提供了便利的DOM操作,而`ztree`则是一个基于jQuery的树形菜单插件,它提供了丰富的配置选项和API,便于开发者定制各种功能和样式。 3. AJAX 实现 当数据量较大或者需要实时更新时,可以采用AJAX...

    超全的JQuery树形菜单

    3. **jQuery EasyUI Tree**:基于jQuery EasyUI框架,提供了一种简单的方式来创建和管理树形菜单,支持数据异步加载。 4. **jQuery Nice Tree**:此插件注重用户体验,提供了流畅的动画效果和良好的可定制性。 5. ...

    jquery无限级树形菜单源码 v1.0

    今天我们将深入探讨一款基于jQuery实现的无限级树形菜单源码,版本为v1.0。这款源码以其小巧简洁的特性,被广泛应用于后台或前台侧栏菜单,且具有良好的浏览器兼容性。 首先,我们来了解一下jQuery库。jQuery是一款...

    基于jquery多供能树形菜单

    以上代码创建了一个简单的多选树形菜单,其中`setting`定义了配置项,`zNodes`是树的数据源。 **总结** 通过jQuery与zTree的结合,我们可以构建出功能强大的树形菜单,为用户提供直观、易用的操作界面。无论是用于...

    基于bootstrap的jQuery树形菜单插件 EasyTree

    【基于Bootstrap的jQuery树形菜单插件EasyTree详解】 在Web开发中,用户界面的交互性和易用性是至关重要的,而树形菜单作为一种常见的数据展示方式,常用于层级结构的导航和信息组织。Bootstrap作为最流行的前端...

    java动态树形菜单

    本示例是一个基于Java实现的JSP动态树形菜单功能,旨在提供一个简单而全面的解决方案,覆盖了从数据获取到页面渲染的全过程。 首先,我们要理解树形菜单的基本概念。树形菜单是由节点(通常代表菜单项)构成的层级...

    jQuery多级树形分类折叠菜单.zip

    一个简单的树形菜单通常由`&lt;ul&gt;`和`&lt;li&gt;`元素构建,其中`&lt;li&gt;`代表每个节点,而`&lt;ul&gt;`则代表子节点的集合。通过添加特定的类或ID,我们可以控制这些元素的样式和行为。 接着,我们引入jQuery库,这里使用的是...

    jquery dtree 实例 动态实现无限树形菜单(增删改查)

    这个实例着重展示了如何利用jQuery dTree动态地构建一个无限层级的树形菜单,并实现基本的数据操作功能,包括添加、删除、修改和查询。下面我们将深入探讨这个主题。 首先,jQuery dTree是一个轻量级的插件,它基于...

    JQuery树形菜单实例

    zTree是一个基于JQuery的插件,专门用于实现各种类型的树形菜单和树形结构。它提供丰富的API和配置选项,使得开发人员可以轻松地定制和扩展树形组件,以满足不同项目的需求。zTree支持多选、单选、异步加载、拖拽...

    带复选框三级树形菜单.rar

    本项目名为"带复选框三级树形菜单",是基于jQuery实现的一个简单但功能齐全的三级树形菜单,特别适合用于系统的下拉菜单功能。 首先,我们来理解树形菜单的概念。树形菜单是一种数据结构的可视化表示,它模仿了...

    基于XML的树形菜单组件

    首先,我们来看一个简单的XML示例,它代表了树形菜单的结构: ```xml 主页" href="/home"&gt; 关于我们" href="/about"&gt; 公司历史" href="/history"/&gt; 团队成员" href="/team"/&gt; 产品与服务" href="/products...

    树形菜单插件

    在IT领域,树形菜单是一种常见的用户界面元素,它用于组织和展示层级关系的数据,比如文件系统、网站导航或组织结构。"树形菜单插件"是为网页或应用程序提供这种功能的软件组件。以下是对四款树形菜单插件的详细解释...

    树形菜单、用JS配合Struts1.2、Spring2。0、Ajax2.0的树形菜单

    在这个项目中,我们看到一个利用JavaScript、Struts1.2、Spring2.0以及Ajax2.0实现的树形菜单系统。这个系统不仅提供菜单展示,还涉及到了角色的添加和修改功能,可以说是一个简单但实用的角色分配系统。 首先,让...

Global site tag (gtag.js) - Google Analytics