新版本susymenu树形菜单,请大家指教、分享

/* Susy Menu Class, version 2.0.0
* 2007 shaoyu su
*
* Susy-Menu Class is freely distributable .
*
*
*--------------------------------------------------------------------------*/
var CONTEXT_PATH='';
var NS = (navigator.appName=="Netscape")?true:false;
var EXCEPTION_INFO = {EvalError:'eval()use error',
RangeError:'num overflow',
ReferenceError:'illegal or no can identify num',
SyntaxError:'syntax parse error',
TypeError:'operate num type error',
URIError:'URI use error'
};
String.prototype.trim = function(){
return this.replace(/(^[\\s]*)|([\\s]*$)/g, "");
}
var menuItems = new Array();
Object.extend = function(destination, source) {
for (property in source) {
destination[property] = source[property];
}
return destination;
}
function Parameter(){
this.option = {
menuType:'0',
expandHeadImgUrl:'js/expandHead.gif',
expandBodyImgUrl:'',
expandFootImgUrl:'',
mergeHeadImgUrl:'js/mergeHead.gif',
mergeBodyImgUrl:'',
mergeFootImgUrl:'',
status:'merge',
headWidth:20,
bodyWidth:100,
footWidth:0,
height:20,
mLeft:15,
mTop:3,
fontFamily:'宋体',
fontSize:'12',
fontWeight:'normal',
fontStyle:'normal',
textAlign:'left',
color:'transparent',
gap:'2',
conBackImg:''
};
}
Parameter.prototype.setParameter=function(option){
this.option = Object.extend(this.option,option || {});
}
var lineN = 60;
Parameter.prototype.show=function(mainDivId,menus){
var mainDiv = null;
lineN = 62;
try{
if( mainDivId && mainDivId != '')mainDiv = document.getElementById(mainDivId);
if(mainDiv != null){
var midDiv = document.createElement('div');
midDiv.style.position="absolute";
midDiv.style.left=mainDiv.offsetLeft;
midDiv.style.top=mainDiv.offsetTop;
lineN = 70;
var itemWidth = parseInt(this.option.headWidth)+parseInt(this.option.bodyWidth)+parseInt(this.option.footWidth);
if(menus){
if(1 == parseInt(this.option.menuType)){
midDiv.style.width=menus.length * (itemWidth + parseInt(this.option.mLeft) + parseInt(this.option.gap)) + parseInt(this.option.mLeft);
midDiv.style.border="1px solid green";
}
lineN = 77;
var openedMenuStr = getCookie("OpenedMenu");
for(var i=0;i0){
if(menuItems[this.index].option.status=='merge')
menuItems[this.index].changeSelfImg('expand');
}
if('1'==menuItems[this.index].option.menuType){
menuItems[this.index].startExpandTimer();
}
this.status = 'over';
}
}
};
this.midA.onmouseout=function(){
if(menuItems && menuItems[this.index]){
if(!this.status || this.status!='out'){
if(menuItems[this.index].children && menuItems[this.index].children.length>0){
menuItems[this.index].changeSelfImg(menuItems[this.index].option.status);
}
if('1'==menuItems[this.index].option.menuType){
menuItems[this.index].startMergeTimer();
}
this.status = 'out';
}
}
};
this.menuDiv.onmouseover=function(){
if('1'!=menuItems[this.index].option.menuType)return;
if(menuItems[this.index].timer){
window.clearTimeout(menuItems[this.index].timer);
menuItems[this.index].timer=null;
}
menuItems[this.index].mouseOver=true;
//if(menuItems[this.index].superior)menuItems[this.index].superior.startExpandTimer();
}
this.menuDiv.onmouseout=function(){
if('1'!=menuItems[this.index].option.menuType)return;
menuItems[this.index].startMergeTimer();
}

if(NS)
this.headImg.setAttribute('style','float:left');
else
this.headImg.style.styleFloat='left';
this.headImg.style.width = this.option.headWidth;
this.headImg.style.height = this.option.height;
this.headImg.style.backgroundColor=this.option.color;
this.headImg.style.backgroundRepeat='no-repeat';
this.headImg.style.backgroundPosition='0 50%';

if(NS)
this.bodyDiv.setAttribute('style','float:left');
else
this.bodyDiv.style.styleFloat='left';
this.bodyDiv.style.width = this.option.bodyWidth;
this.bodyDiv.style.height = this.option.height;
this.bodyDiv.style.backgroundColor=this.option.color;
this.bodyDiv.style.fontFamily=this.option.fontFamily;
this.bodyDiv.style.fontWeight=this.option.fontWeight;
this.bodyDiv.style.fontSize=this.option.fontSize;
this.bodyDiv.style.fontStyle=this.option.fontStyle;
this.bodyDiv.style.textAlign=this.option.textAlign;
this.bodyDiv.style.lineHeight = this.bodyDiv.style.height;
this.bodyDiv.style.backgroundRepeat='no-repeat';
this.bodyDiv.style.backgroundPosition='0 50%';

if(NS)
this.footImg.setAttribute('style','float:left');
else
this.footImg.style.styleFloat='left';
this.footImg.style.width = this.option.footWidth;
this.footImg.style.height = this.option.height;
this.footImg.style.backgroundColor=this.option.color;
this.headImg.style.backgroundRepeat='no-repeat';
this.headImg.style.backgroundPosition='0 50%';

this.bodyDiv.innerHTML=this.title;

this.midA.appendChild(this.headImg);
this.midA.appendChild(this.bodyDiv);
this.midA.appendChild(this.footImg);

this.midDiv.appendChild(this.midA);
this.menuDiv.appendChild(this.midDiv);
this.menuDiv.appendChild(this.container);

this.changeSelfImg('merge');
if('1' == this.option.menuType && this.superior){
this.container.style.left =0;
this.container.style.left = parseInt(this.container.style.left) + parseInt(this.midDiv.style.width) + parseInt(this.menuDiv.style.marginLeft) + parseInt(this.option.gap);
}
//this.container.style.top = parseInt(superiorDiv.style.top) + parseInt(this.menuDiv.style.marginTop);
//alert(this.container.style.top);
if(this.children){
for(var i=0;i0)sT = parseInt(this.children[i-1].container.style.top);
else if(!this.superior)sT = sT + parseInt(this.option.mTop);
this.children[i].container.style.top = sT + parseInt(this.option.mTop) + parseInt(this.option.height);
}
this.children[i].init(this.container,this);
}
}
superiorDiv.appendChild(this.menuDiv);
}
}
Menu.prototype.changeStatus=function(source){
if(source && ''!=source)this.option.status=source;
if(this.option.status=='merge'){
this.expand();
} else {
this.merge();
if('1' == this.option.menuType && this.children){
for(var i=0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

新版本菜单中的一种类型,另一种形式在下面运行代码中展示。

(0)

相关推荐

  • 新版本susymenu树形菜单,请大家指教、分享

    /* Susy Menu Class, version 2.0.0 * 2007 shaoyu su * * Susy-Menu Class is freely distributable . * * *--------------------------------------------------------------------------*/ var CONTEXT_PATH=''; var NS = (navigator.appName=="Netscape")?true

  • JS+CSS简单树形菜单实现方法

    本文实例讲述了JS+CSS简单树形菜单实现方法.分享给大家供大家参考.具体如下: 这是一款不错的CSS树形菜单,树状列表,当然不全是CSS实现,部分功能还使用了JavaScript代码进行配合,删减了修饰用的菜单图片,大家用的时候自己图片加进去,IMG标签大部分都预留了出来,稍懂Html语法的朋友很容易就看懂的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-tree-menu-style-codes/ 具体代码如下

  • Android实现多级树形菜单并支持多选功能

    公司有一个需求,实现一个多级的树形菜单,并且支持多选功能,实现这个功能之前,我在网上找了找,树形菜单很好找,但是支持多选功能并没有很合适的,所以没办法,只能自己动手写了,由于本人第一次写博客,如果有什么不足的地方,大家多多指教. 这个是效果图: 这个菜单是可以无限极分类的,如果父元素的子元素,都被选了,父元素的checkbox应该自动选中,或者说选中一个父元素,当前父元素下的子元素应该全部被选中.就是这样的一个效果! 这样的树形结构,重点是我们应该怎样去定义数据结构,这个是Node实体类: pu

  • json+jQuery实现的无限级树形菜单效果代码

    本文实例讲述了json+jQuery实现的无限级树形菜单效果代码.分享给大家供大家参考.具体如下: 这里演示json树形菜单,JS无级树树形菜单,引入了jQuery插件,使用递归实现获取无级树数据并生成DOM结构,可以在JSON数据里 扩展无限级 看结构就明白. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-json-tree-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • javascript实现在下拉列表中显示多级树形菜单的方法

    本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法.分享给大家供大家参考.具体如下: 这里演示在下拉列表框中显示分级的菜单,在很多网站都可以看到的效果,很实用,下拉列表框中的选项是利用JS控制输出,如果你有更好的办法不用JS来显示,那最好了,因为像这种菜单用JS来实现,多多少少有点麻烦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

  • javascript实现树形菜单的方法

    本文实例讲述了javascript实现树形菜单的方法.分享给大家供大家参考.具体如下: var ME={ ini:{i:true,d:{},d1:{},h:0,h1:0,h2:0}, html:function(da,f){ var s='<ul'+(f?' class="f"':'')+'>'; for(var i=0,l=da.length;i<l;i++){ if(typeof(da[i].pid)=='object'){ s+='<li><b

  • asp.net TreeView递归循环子节点生成树形菜单实例

    本文实例讲述了asp.net TreeView递归循环子节点生成树形菜单的方法.分享给大家供大家参考,具体如下: 这里主要用到递归循环获取子结点 /// <summary> /// 生成根节点 /// </summary> /// <param name="treeview"></param> protected void BindTreeView(long ID, TreeView treeview) { DataTable dt =

  • JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    本文实例讲述了JS实现无限级网页折叠菜单(类似树形菜单)效果代码.分享给大家供大家参考.具体如下: 这是一款超不错的网页折叠菜单,采用JavaScript实现.折叠菜单是大家比较常见到的一种菜单形式,可广泛应用于管理系统.后台左侧.产品列表中,本折叠菜单有点树形菜单的味道,相信"无限级"会满足你的要求. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-fade-in-out-tree-menu-codes/ 具体代

  • 基于jquery实现的树形菜单效果代码

    本文实例讲述了基于jquery实现的树形菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的树形菜单代码,点击菜单项可以向下滑出对应的二级菜单,效果流畅自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tree-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

  • javascript动态生成树形菜单的方法

    本文实例讲述了javascript动态生成树形菜单的方法.分享给大家供大家参考,具体如下: //======================================== //Envrionment to hold Listeners //======================================== tv_listeners = new Array() ; function listener( type , handler ) { this.type = type ;

随机推荐