树形菜单

在 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. Amazon Interview | Set 27

    Amazon Interview | Set 27 Hi, I was recently interviewed for SDE1 position for Amazon and got select ...

  2. Access提示“操作必须使用一个可更新的查询”的解决办法

    问题:软件工程师开发了一个asp.net+access网站,本地调试增.删.改和查都没有异常.部署到服务器windows2008 R2的IIS上运行后,查询没有异常.可是在修改操作提交时,产生异常:提 ...

  3. 【IOS开发笔记03-视图相关】简单计算器的实现

    UIView 经过前几天的快速学习,我们初步了解的IOS开发的一些知识,中间因为拉的太急,忽略了很多基础知识点,这些知识点单独拿出来学习太过枯燥,我们在今后的项目中再逐步补齐,今天我们来学习APP视图 ...

  4. 用Kotlin语言重新编写Plaid APP：经验教训(I)

    原文标题:Converting Plaid to Kotlin: Lessons learned (Part 1) 原文链接:http://antonioleiva.com/plaid-kotlin- ...

  5. 函数式Android编程（II）：Kotlin语言的集合操作

    原文标题:Functional Android (II): Collection operations in Kotlin 原文链接:http://antonioleiva.com/collectio ...

  6. UITableView cell复用出错问题 页面滑动卡顿问题 & 各杂七杂八问题

    UITableView 的cell 复用机制节省了内存,但是有时对于多变的自定义cell,重用时会出现界面出错(例如复用出错,出现cell混乱重影).滑动卡顿等问题,这里只简单敲下几点复用出错时的解决 ...

  7. 浅谈DrawerLayout(抽屉效果)

    DrawerLayout是V4包下提供的一种左滑右滑抽屉布局效果. 实现效果如下: 因为是官方提供的,所以使用起来也相对的比较简单. DrawerLayout 提供 1.当界面弹出的时候,主要内容区会 ...

  8. 使用rsync同步目录

    本文描述了linux下使用rsync单向同步两个机器目录的问题. 使用rsync同步后可以保持目录的一致性(含删除操作). 数据同步方式 从主机拉数据 备机上启动的流程 同步命令: rsync -av ...

  9. Microsoft Visual SourceSafe 6.0 无法关联项目

    最近遇到Microsoft Visual SourceSafe 6.0 安装好以后, 无法关联项目,导致无法进行版本控制,研究以后,发现需要运行一个程序,在安装目录下 ..\Visual Source ...

  10. [MySQL性能优化系列]提高缓存命中率

    1. 背景 通常情况下,能用一条sql语句完成的查询,我们尽量不用多次查询完成.因为,查询次数越多,通信开销越大.但是,分多次查询,有可能提高缓存命中率.到底使用一个复合查询还是多个独立查询,需要根据 ...