树形菜单

在 jQuery easyu中其左侧的主菜单使用的是 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里执行如图：

jQuery 树形菜单的更多相关文章

  1. jquery树形菜单

    转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  2. jQuery树形菜单(1)jquery.treeview

    jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/从该网站Download得到jquery.tr ...

  3. jquery树形菜单完整代码

    本实例实现了树形的动态菜单,兼容IE8,火狐,Chrome等浏览器.使用了jQuery的toggle() 方法.效果和代码如下: <!DOCTYPE html PUBLIC "-//W ...

  4. jquery树形菜单插件treeView

    Jquery的treeview很好用,如果是简单的树形菜单按照下面的源码实例模仿就可以. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  5. jQuery树形菜单，使用zTree插件,异步载入 &amp; 编辑功能&amp;Check 共存

    一.下载zTree插件 地址:http://www.ztree.me 二.HTML代码 <%@ Page Language="C#" AutoEventWireup=&quo ...

  6. Bootstrap风格zTree树形菜单插件

    这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...

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

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

  8. jquery 树形导航菜单无限级

    转自:http://www.jb51.net/article/71615.htm 侵删<!DOCTYPE html> <html lang="en"> &l ...

  9. 雷林鹏分享：jQuery EasyUI 树形菜单 - 使用标记创建树形菜单

    jQuery EasyUI 树形菜单 - 使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 元素中.无序列表的 元素提供一个基础的树(Tre ...

随机推荐

  1. 【转载】PHP PSR-1 基本代码规范(中文版)

    基本代码规范 本篇规范制定了代码基本元素的相关标准, 以确保共享的PHP代码间具有较高程度的技术互通性. 关键词 "必须"("MUST")."一定不可 ...

  2. BestCoder Round #89 B题---Fxx and game（单调队列）

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5945     问题描述 输入描述 输出描述 输入样例 输出样例 题意:中文题,不再赘述: 思路:  B ...

  3. file命令

    命令简介: 该命令用来识别文件类型,也可用来辨别一些文件的编码格式.它是通过查看文件的头部信息来获取文件类型,而不是像Windows通过扩展名来确定文件类型的. 执行权限 :All User 指令所在 ...

  4. JS eval()函数的一些见解

    一.eval是基本使用规则 1 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 2 eval(string) 3 string必需.要计算的字符串,其中含有要计算的 ...

  5. DevOps

    DevOps DevOps(英文Development和Operations的组合)是一组过程.方法与系统的统称,用于促进开发(应用程序/软件工程).技术运营和质量保障(QA)部门之间的沟通.协作与整 ...

  6. SpringMVC + mybatis + Druid insert 数据库中文乱码，查询无乱码

    之前一直在pom文件配置的数据库连接url,很多配置都写在pom文件中导致配置文件太长 新项目将配置写到不同的文件夹中得properties文件中了 db.url直接复制的pom文件中的 p.p1 { ...

  7. sys.dm_os_waiting_tasks 引发的疑问(下)

    前面写了两篇了,其实不光是说sys.dm_os_waiting_tasks的应用,研究了挺长时间的并行,自己有了一些理解,所以分享出来希望有什么理解错误的地方大神们及时纠正!! 给出前两篇的连接: 上 ...

  8. redis.conf配置详细解析

    # redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => 1000 bytes # 1kb ...

  9. [原创]最近使用React-Native的适配问题和警告搜集

    主要记录一下最近使用RN 0.29.2版本遇到的适配的坑以及部分警告的解法. 适配类: 安卓输入框圆角.边框颜色.粗细等无法设置成功,需要在TextInput外面新增一个View设置圆角,TextIn ...

  10. C语言调试过程中duplicate symbol错误分析

    说明:在我们调试C语言的过程中,经常会遇到duplicate symbol错误(在Mac平台下利用Xcode集成开发环境).如下图: 一.简单分析一下C语言程序的开发步骤. 由上图我们可以看出C语言由 ...