javascript 树形菜单

1. [代码][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><button type="button" class="+(i==0&&this.ini.i?‘s1‘:(i+1==l?‘s5‘:‘s3‘))+" onclick="ME.yc(this)"></button><span><button type="button" class="r1"></button><a href="javascript:;">‘+da[i].ming+‘</a></span>‘;
this.ini.i=false;
s+=this.html(da[i].pid,(i+1==l));
}else{
s+=‘<li><button type="button" class="+(i+1==l?‘e3‘:‘e1‘)+"></button><span><button type="button" class="m1"></button><a href="http://www.za90.com" target="mainFrame">‘+da[i].ming+‘</a></span>‘;
}
s+=‘</li>‘;
}
s+=‘</ul>‘;
return s;
},
st:function(id,da){
document.getElementById(id).innerHTML=this.html(da);
},
yc:function(a){
var s=a.className.substr(1);
if(s%2){
this.ini.d=a.parentNode.children[2];
this.ini.h1=this.hei(this.ini.d);
this.ini.h3=this.ini.h1/10;
this.yc1(1);
a.className=‘s‘+(parseInt(s)+1);
a.parentNode.children[1].children[0].className=‘r2‘;
var ol=a.parentNode.parentNode._;
if(typeof(ol)==‘object‘){
this.ini.d1=ol;
this.ini.h=ol.offsetHeight;
this.ini.h2=this.ini.h/10;
this.yc2(1);
ol.parentNode.children[0].className=‘s‘+(parseInt(ol.parentNode.children[0].className.substr(1))-1);
ol.parentNode.children[1].children[0].className=‘r1‘;
}http://www.huiyi8.com/css3/?
a.parentNode.parentNode._=a.parentNode.children[2];
}else{
this.ini.d1=a.parentNode.children[2];
this.ini.h=this.ini.d1.offsetHeight;
this.ini.h2=this.ini.h/10;
this.yc2(1);
a.className=‘s‘+(parseInt(s)-1);
a.parentNode.children[1].children[0].className=‘r1‘;
a.parentNode.parentNode._=‘‘;
}
},
yc1:function(b){
var h1=ME.ini.h1-(11/(b+1)-1)*ME.ini.h3;
with(ME.ini.d.style){
height=h1+‘px‘;
display=‘block‘;
}css3动画
if(b<10){
setTimeout(‘ME.yc1(‘+(b+1)+‘)‘,25);
}else{
ME.ini.d.style.display=‘block‘;
ME.ini.d.style.height=‘‘;
}
},
yc2:function(b){
var h1=(11/(b+1)-1)*ME.ini.h2;
with(ME.ini.d1.style){
height=h1+‘px‘;
}
if(b<10){
setTimeout(‘ME.yc2(‘+(b+1)+‘)‘,25);
}else{
ME.ini.d1.style.display=‘‘;
ME.ini.d1.style.height=‘‘;
}
},
hei:function(a){
var b=a.cloneNode(true);
b.style.position=‘absolute‘; 
b.style.display=‘block‘; 
b.style.visibility=‘hidden‘;
a.parentNode.appendChild(b);
var h=b.offsetHeight;
a.parentNode.removeChild(b);
return h;
}
}

javascript 树形菜单

时间: 2024-10-10 04:09:02

javascript 树形菜单的相关文章

实用的树形菜单控件tree

 jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview  jQuery  jstree jsTree是一个基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖\放节点操作.可以自己自定义创建,删除,嵌套,重命名,选择节点的规则.在这些操作上可以添加多种监听事件.  jstree  jQuery UI Widgets  FileTreePanel F

【转】html树形菜单控件

Query plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree. 主页:http://bassistance.de/jQuery-plugins/jquery-plugin-treeview/ 下载:http://jquery.bassistance.de/treeview/jquery.treeview.zip 示例:http://jquery.bassistance.de/treeview/demo/ jstree jsTree是一个基于jQuery的Tre

JavaScript - 高级树形菜单实例

简单的树形菜单 <!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">

[JavaScript]cookie实现刷新不变化树形菜单

通过设置cookie来保存树形菜单的状态,在页面加载时重新读取cookie来设置菜单. 菜单的HTML结构: 1 <div class="treemenu"> 2 <ul> 3 <li> 4 <a href="#" id="treemenu_a_1">一级菜单一</a> 5 <div class="submenu" id="submenu_1"

Jquery Easy-UI 树形菜单的运用

一.树形菜单的右键标签 期中增加同级机构.增加下属机构.修改.删除分别是调用了addNode(),del()等方法. <div id="menuTree" class="easyui-menu" style="width: 120px;"> <SecurityTag:Authorize ID="Authorize12" runat="server" FunctionID="fun

Web应用程序开发,基于Ajax技术的JavaScript树形控件

感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项. 目前市场上常见的JavaScript框架及组件库中均包含自己的树形控件,例如jQuery.Dojo.YUI.Ext JS等,还有一些独立的树形控件,例如dhtmlxTree等,这些树形控件完美的解决了层次数据的展示问题. 展示离不开数据,树形控件主要

用dtree实现树形菜单 dtree使用说明

http://www.jb51.net/article/28566.htm 准备工作: 请从脚本之家http://www.jb51.net/jiaoben/31974.html下载dtree.zip文件 dtree.zip压缩包介绍: dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源. 目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件, 不需要复杂的操作即可生产,同时支持动态从数据库引入数据 解压后有以下几部分: img文件夹: 包含树

使用jquery实现的多级树形菜单代码实例

使用jquery实现的多级树形菜单代码实例:树形菜单在网站中有大量的应用,这当然是因为它的独特优点,首先它可以有效的组织数据,使分类更为清晰明了,通常情况下树形菜单是可以折叠的,这样可以以更小的空间容纳更多的数据,下面就详细介绍一个使用jquery实现的属性菜单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author&q

简单实用的二级树形菜单hovertree

原创,欢迎评论推荐. hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http://keleyi.com/jq/hovertree/hovertreegreen.htm 可以设置菜单宽度(width),还可以设置是否最多只能有一个一级菜单展开(isCloseOther). isCloseOther的值为false 或者 true,设为true即成为手风琴菜单. 使