jquery 左侧树形菜单 -

linder

浏览: 213206 次
性别:
来自: 西安

最近访客更多访客>>

roqingyou

JavaSuperFans

lygily

lubin83

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery 左侧树形菜单

博客分类：

jquery

jQuery CSS JSP HTML 工作

1、left.html 页面内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台管理系统</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
       $("#wenzhang>dd>dl>dd").hide();
     $.each($("#wenzhang>dd>dl>dt"), function(){
$(this).click(function(){
$("#wenzhang>dd>dl>dd ").not($(this).next()).slideUp();
$(this).next().slideToggle(500);
});
});
});

function goSpace(obj){
window.parent.main.location.href=obj;
}
</script>

</head>
<body>
<dl id="wenzhang">
        <dd>
        <dl>
           <dt>权限系统</dt>
           <dd>
             <ul>
             <li><a href="javascript:goSpace('queryOrgType.html')">机构类型管理</a></li>
                <li><a href="javascript:goSpace('queryOrg.html')">机构岗位管理</a></li>
                <li>用户管理</li>
                <li>角色管理</li>
                <li>菜单管理</li>
                <li>数据字典</li>
             </ul>
           </dd>

        </dl>
        </dd>
        <dd>
        <dl>
           <dt>系统设置</dt>
           <dd>
              <ul>
                <li>test1</li>
                <li>test1</li>
                <li>test1</li>
                <li>test1</li>
              </ul>
           </dd>
        </dl>
        </dd>
        <dd>
        <dl>
           <dt>我的工作</dt>
           <dd>
              <ul>
                 <li>work</li>
                 <li>work</li>
                 <li>work</li>
                 <li>work</li>
              </ul>
           </dd>
        </dl>
        </dd>
    </dl>
</body>
</html>
2、jquery.js 自己在jquery官方网站上下载，笔者采用的是1.4.2的版本
3、jquery.treeview.js 的内容如下
;(function($) {

$.extend($.fn, {
swapClass: function(c1, c2) {
var c1Elements = this.filter('.' + c1);
this.filter('.' + c2).removeClass(c2).addClass(c1);
c1Elements.removeClass(c1).addClass(c2);
return this;
},
replaceClass: function(c1, c2) {
return this.filter('.' + c1).removeClass(c1).addClass(c2).end();
},
hoverClass: function(className) {
className = className || "hover";
return this.hover(function() {
$(this).addClass(className);
}, function() {
$(this).removeClass(className);
});
},
heightToggle: function(animated, callback) {
animated ?
this.animate({ height: "toggle" }, animated, callback) :
this.each(function(){
jQuery(this)[ jQuery(this).is(":hidden") ? "show" : "hide" ]();
if(callback)
callback.apply(this, arguments);
});
},
heightHide: function(animated, callback) {
if (animated) {
this.animate({ height: "hide" }, animated, callback);
} else {
this.hide();
if (callback)
this.each(callback);
}
},
prepareBranches: function(settings) {
if (!settings.prerendered) {
// mark last tree items
this.filter(":last-child:not(ul)").addClass(CLASSES.last);
// collapse whole tree, or only those marked as closed, anyway except those marked as open
this.filter((settings.collapsed ? "" : "." + CLASSES.closed) + ":not(." + CLASSES.open + ")").find(">ul").hide();
}
// return all items with sublists
return this.filter(":has(>ul)");
},
applyClasses: function(settings, toggler) {
this.filter(":has(>ul):not(:has(>a))").find(">span").click(function(event) {
toggler.apply($(this).next());
}).add( $("a", this) ).hoverClass();

if (!settings.prerendered) {
// handle closed ones first
this.filter(":has(>ul:hidden)")
.addClass(CLASSES.expandable)
.replaceClass(CLASSES.last, CLASSES.lastExpandable);

// handle open ones
this.not(":has(>ul:hidden)")
.addClass(CLASSES.collapsable)
.replaceClass(CLASSES.last, CLASSES.lastCollapsable);

            // create hitarea
this.prepend("<div class=\"" + CLASSES.hitarea + "\"/>").find("div." + CLASSES.hitarea).each(function() {
var classes = "";
$.each($(this).parent().attr("class").split(" "), function() {
classes += this + "-hitarea ";
});
$(this).addClass( classes );
});
}

// apply event to hitarea
this.find("div." + CLASSES.hitarea).click( toggler );
},
treeview: function(settings) {

settings = $.extend({
cookieId: "treeview"
}, settings);

if (settings.add) {
return this.trigger("add", [settings.add]);
}

if ( settings.toggle ) {
var callback = settings.toggle;
settings.toggle = function() {
return callback.apply($(this).parent()[0], arguments);
};
}

// factory for treecontroller
function treeController(tree, control) {
// factory for click handlers
function handler(filter) {
return function() {
// reuse toggle event handler, applying the elements to toggle
// start searching for all hitareas
toggler.apply( $("div." + CLASSES.hitarea, tree).filter(function() {
// for plain toggle, no filter is provided, otherwise we need to check the parent element
return filter ? $(this).parent("." + filter).length : true;
}) );
return false;
};
}
// click on first element to collapse tree
$("a:eq(0)", control).click( handler(CLASSES.collapsable) );
// click on second to expand tree
$("a:eq(1)", control).click( handler(CLASSES.expandable) );
// click on third to toggle tree
$("a:eq(2)", control).click( handler() );
}

// handle toggle event
function toggler() {
$(this)
.parent()
// swap classes for hitarea
.find(">.hitarea")
.swapClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea )
.swapClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea )
.end()
// swap classes for parent li
.swapClass( CLASSES.collapsable, CLASSES.expandable )
.swapClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
// find child lists
.find( ">ul" )
// toggle them
.heightToggle( settings.animated, settings.toggle );
if ( settings.unique ) {
$(this).parent()
.siblings()
// swap classes for hitarea
.find(">.hitarea")
.replaceClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea )
.replaceClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea )
.end()
.replaceClass( CLASSES.collapsable, CLASSES.expandable )
.replaceClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
.find( ">ul" )
.heightHide( settings.animated, settings.toggle );
}
}

function serialize() {
function binary(arg) {
return arg ? 1 : 0;
}
var data = [];
branches.each(function(i, e) {
data[i] = $(e).is(":has(>ul:visible)") ? 1 : 0;
});
$.cookie(settings.cookieId, data.join("") );
}

function deserialize() {
var stored = $.cookie(settings.cookieId);
if ( stored ) {
var data = stored.split("");
branches.each(function(i, e) {
$(e).find(">ul")[ parseInt(data[i]) ? "show" : "hide" ]();
});
}
}

// add treeview class to activate styles
this.addClass("treeview");

// prepare branches and find all tree items with child lists
var branches = this.find("li").prepareBranches(settings);

switch(settings.persist) {
case "cookie":
var toggleCallback = settings.toggle;
settings.toggle = function() {
serialize();
if (toggleCallback) {
toggleCallback.apply(this, arguments);
}
};
deserialize();
break;
case "location":
var current = this.find("a").filter(function() { return this.href.toLowerCase() == location.href.toLowerCase(); });
if ( current.length ) {
current.addClass("selected").parents("ul, li").add( current.next() ).show();
}
break;
}

branches.applyClasses(settings, toggler);

// if control option is set, create the treecontroller and show it
if ( settings.control ) {
treeController(this, settings.control);
$(settings.control).show();
}

return this.bind("add", function(event, branches) {
$(branches).prev()
.removeClass(CLASSES.last)
.removeClass(CLASSES.lastCollapsable)
.removeClass(CLASSES.lastExpandable)
.find(">.hitarea")
.removeClass(CLASSES.lastCollapsableHitarea)
.removeClass(CLASSES.lastExpandableHitarea);
$(branches).find("li").andSelf().prepareBranches(settings).applyClasses(settings, toggler);
});
}
});

// classes used by the plugin
// need to be styled via external stylesheet, see first example
var CLASSES = $.fn.treeview.classes = {
open: "open",
closed: "closed",
expandable: "expandable",
expandableHitarea: "expandable-hitarea",
lastExpandableHitarea: "lastExpandable-hitarea",
collapsable: "collapsable",
collapsableHitarea: "collapsable-hitarea",
lastCollapsableHitarea: "lastCollapsable-hitarea",
lastCollapsable: "lastCollapsable",
lastExpandable: "lastExpandable",
last: "last",
hitarea: "hitarea"
};

// provide backwards compability
$.fn.Treeview = $.fn.treeview;

})(jQuery);
4、css文件的内容
dl,dd,dt,ul,li{
margin:0;
padding:0;
list-style:none;
color:#333;}
#wenzhang{
width:160px;
text-align:center;
font-size:12px;
border-left:1px solid #dedede;
border-right:1px solid #dedede;
border-bottom:1px solid #dedede;
}
#wenzhang dd dl dt{
border-top:1px solid #dedede;
background:#f2f2f2; height:25px;
line-height:25px; font-weight:bold;
background-image:url(../images/menu-out.jpg);
}
#wenzhang ul{
background:#f9f9f9;
}
#wenzhang li{
border-top:1px solid #efefef;
line-height:25px;
}
5、效果图
[img][/img]