改进了子乌的无限树-飞飞

改进了子乌的无限树

在上一篇日志中,俺介绍了子乌写的无限树.非常漂亮的...但是美中不足的是没有保持树的状态的功能,也就是说当页面刷新的时候,所有的子菜单都会重新初始化,这样对用户来说是很不利的(汗,貌似俺也在考虑用户体验了.)
经过俺的琢磨,终于出炉了这个版本,能保持树的状态,当然是俺目前的想法是保持最后一个子菜单的状态就行了.
俺觉得还得加一个功能,就是点击同级别的菜单的时候,其他的菜单应该收缩,嗯,应该也蛮简单的,今天先发布测试版本1.0.1吧. -_-!

废话就不说了
看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<script language="JavaScript" type="text/javascript">
/*--------------------------*/
/*--------------------------*/
// 无限类作者：子乌  http://sheneyan.com
// hash:飞飞    http://chenefei.com
//本菜单测试中,如果您发现有什么不对(hash不能用--树的状态不能保持).请联系飞飞
//chyf1982[A]gmail.com
//感谢子乌分享他的无限类
/*--------------------------*/
/*--------------------------*/
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
var mouseX=0;
var mouseY=0;
function setNodeType(obj,type){
	var c=obj.parentNode;
	var s=c.getElementsByTagName("span");
	var t={leaf:{style:"clsLeaf",text:"."},open:{style:"clsExpand",text:"-"},close:{style:"clsCollapse",text:"+"}}
	var o=null;
	if (s&&s[0]){
		o=s[0];
	}
	else{
		var o=document.createElement("span");
		c.insertBefore(o,obj);
	}
	o.innerHTML=t[type]["text"];
	o.className=t[type]["style"];
}
//获取鼠标位置
function moveToMouseLoc(e){
  if(ns4||ns6){
    mouseX = e.pageX;
    mouseY = e.pageY;
  }
  else{
    mouseX = event.x + document.body.scrollLeft;
    mouseY = event.y + document.documentElement.scrollTop;
  }
  return true;
}

//初始化菜单
//opened:true,默认展开,false,默认收起
function initNav(obj,opened){
	if(ns4) document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove = moveToMouseLoc;
	var nav=document.getElementById(obj);
	var navItems=nav.getElementsByTagName("li");
	for (var i=0,c;c=navItems[i];i++){
		var t=c.getElementsByTagName("ul");
		var a=c.getElementsByTagName("a")[0];
		if (t.length==0){
			setNodeType(a,"leaf")
			a.onmouseout=function(){
				var tipDiv=this.parentNode.getElementsByTagName("div")[0];
				if (tipDiv){
				  tipDiv.style.display='none';
				}
			};
		}
		else{
			for (var j=0;j<t.length ;j++ ){
	          t[j].style.display='none';
			}
		setNodeType(a,opened?"open":"close");
		a.onfocus=function(){this.blur();return true;}
			a.onmouseup=function(){
				var t,p;
		        p=this.parentNode;
				var t=p.getElementsByTagName("ul")[0];

				if (t.style.display=='none'){
					setNodeType(this,"open");
					t.style.display='';
				}
				else{
					setNodeType(this,"close");
					t.style.display='none';
				}
				return false;
			};
			//设置菜单的样式
			a.onmouseover=function(){
				var t=this.parentNode.getElementsByTagName("ul")[0];
			};
			//设置菜单的样式
			a.onmouseout=function(){
				var t=this.parentNode.getElementsByTagName("ul")[0];
				var tipDiv=this.parentNode.getElementsByTagName("div")[0];
				if (tipDiv){
				  tipDiv.style.display='none';
				}
			};
			//设置菜单提示
			a.onmousemove=function(){
			  var tipDiv=this.parentNode.getElementsByTagName("div")[0];
			  if (tipDiv){
				with (tipDiv.style){
				  display='block';
				  left=parseInt(mouseX)+"px";
				  top=(parseInt(mouseY)+20)+"px";
				  position='absolute';
				}
			  }
			}
		}
	}

function che(){ // 得到最终被点击的节点名称
	var last_hash=l_hash;
		if(last_hash)alert(last_hash);
	var url=window.location.hash;
	if(last_hash!=""||last_hash!=url){// 判断上一个展开的节点 如果不是空就折叠
		_urls=url.substring(1,url.length);
		_obj=_urls.split("_");
		for(var i =0; i<_obj.length;i++){
			var _uls=$(_obj[i]);
			if(_uls){//如果ID存在
				_uls.className="clsCollapse";
				var _s=_uls.parentNode.getElementsByTagName("span");
				if(!_s){
					var _o=document.createElement("span");
					_s[0].insertBefore(_o,obj);
					}
				_s[0].innerHTML="+";
				_uls.style.display="none";
			}
		}
	}
	if(url!=""){// 最后一个点击的节点,保持状态.
		urls=url.substring(1,url.length);
		obj=urls.split("_");
		for(var i =0; i<obj.length;i++){
			var uls=$(obj[i]);
			if(uls){//如果ID存在
				uls.className="clsExpand";
				var s=uls.parentNode.getElementsByTagName("span");
				if(!s){
					var o=document.createElement("span");
					s[0].insertBefore(o,obj);
					}
				s[0].innerHTML="-";
				uls.style.display="block";
			}
		}
	}
	var l_hash=url;
}
che();
}
//document.getElementById 的简写
function $(){
  var elements = new Array();
  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);
    if (arguments.length == 1)
      return element;	
    elements.push(element);
	}
  return elements;
} 

</script>
<style type="text/css">
*,html,body{
  margin: 0;
  padding: 0;
  font-size:12px;
  font-family:宋体;
}
#nav ul{
  list-style: none;
}
#nav li{
  padding: 3px 0 0 13px;
  
}
#nav img{
  border:0;
  padding:2px 0 0 8px
}

#nav a{
  color:#303030;
  text-decoration: none;
  padding:2px 0 0 2px;
}
#nav li div{
  display:none;
  position:absolute;
  background:#fff;
  color:#777;
  border:solid 1px;
  padding:3px;
}
#nav li div div{display:block;position:static;padding:0;border:0;}
#nav a:hover{
  color:blue;
}
img{border:0}
#nav span,span.clsExpand,span.clsCollapse {font-size:9px;color:#ccc;position:relative;display:inline;top:-1px;height:14px;border:solid 1px #ccc;margin:0 5px 0 0;padding:1px 3px!important;padding:1px 3px 0;font-weight:normal;}
#nav span.clsLeaf {font-size:7px;padding:0px 2px 4px 5px!important;padding:0px 2px 3px 5px;top:-3px;} 
</style>
</head>
<body onload="initNav('nav',false)">
<div id="nav">
  <ul>
    <li> <a href="#a1" >子节点1(有提示)</a>
      <div>提示：这个菜单下面还有子菜单的！</div>
      <ul id="a1">
        <li> <a href="#a1_b1" >子节点1-1(有提示)</a>
          <div>提示：这个菜单下面还有子菜单的！</div>
          <ul id="b1">
            <li> <a href="#a1_b1_c1" >子节点1-1-1</a> </li>
            <li> <a href="#a1_b1_c2" >子节点1-1-2</a> </li>
          </ul>
        </li>
        <li><a href="#a1_b2" >子节点1-2(有提示)</a>
          <div>提示：这个菜单下面还有子菜单的！
            <div>嘿嘿可以嵌套！</div>
          </div>
          <ul id="b2">
            <li> <a href="#a1_b2_c1" >子节点1-2-1(有提示)</a>
              <div>提示：这个菜单下面还有子菜单的！
                <div>嘿嘿可以嵌套！</div>
              </div>
              <ul id="c1">
                <li> <a href="#a1_b2_c1_d1" >子节点1-2-1-1</a> </li>
                <li> <a href="#a1_b2_c1_d2" >子节点1-2-1-2(有提示)</a>
                  <div>提示：这个菜单下面还有子菜单的！
                    <div>嘿嘿可以嵌套！</div>
                  </div>
                  <ul id="d2">
                    <li> <a href="#a1_b2_c1_d2_e1" >子节点1-2-1-2-1</a> </li>
                    <li> <a href="#a1_b2_c1_d2_e2" >子节点1-2-1-2-2(有提示)</a>
                      <div>提示：这个菜单下面还有子菜单的！
                        <div>嘿嘿可以嵌套！</div>
                      </div>
                      <ul id="e2">
                        <li><a href="#a1_b2_c1_d2_e2_f1"  id="f1">dasfds</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

[ 可以先修改再运行 ]

hash 部分的注释:
需要注意的时候.俺是把每个节点的ID用_号整合到hash中去的...
如果您觉得看不懂..也可以联系我..有文字表达错误也可以联系我(最近有意识的联系表达中 -_-!)

当然了，hash部分肯定还有不足的地方，俺第一次用hash. 如果您觉得有错误，或者可以优化的，请记得留下您的“墨宝”哈。。

--------------1-13-------------------
第2版...
这个版本是对上一个版本的的JS进行了小量的优化..第一版的错误找出来了.. 结构中有相同的ID....
另外多写一个哪个判断上一个hash的功能无效...实际上还是对获取hash对树进行排序.
奇怪的是,在IE和FF下居然对2个相同的ID的情况都不报错,还能正常运行JS

<html>
<head>
<title>增加Hash功能的无限树－－－飞飞</title>
<script language="JavaScript" type="text/javascript">
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
var mouseX=0;
var mouseY=0;

function setNodeType(obj,type){
	var c=obj.parentNode;
	var s=c.getElementsByTagName("span");
	var t={leaf:{style:"clsLeaf",text:"."},open:{style:"clsExpand",text:"-"},close:{style:"clsCollapse",text:"+"}}
	var o=null;
	if (s&&s[0]){
		o=s[0];
	}
	else{
		var o=document.createElement("span");
		c.insertBefore(o,obj);
	}
	o.innerHTML=t[type]["text"];
	o.className=t[type]["style"];
}
//获取鼠标位置
function moveToMouseLoc(e){
  if(ns4||ns6){
    mouseX = e.pageX;
    mouseY = e.pageY;
  }
  else{
    mouseX = event.x + document.body.scrollLeft;
    mouseY = event.y + document.documentElement.scrollTop;
  }
  return true;
}

//初始化菜单
//opened:true,默认展开,false,默认收起
function initNav(obj,opened){
	if(ns4) document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove = moveToMouseLoc;
	var nav=document.getElementById(obj);
	var navItems=nav.getElementsByTagName("li");
	for (var i=0,c;c=navItems[i];i++){
		var t=c.getElementsByTagName("ul");
		var a=c.getElementsByTagName("a")[0];
		if (t.length==0){
			setNodeType(a,"leaf")
			a.onmouseout=function(){
				var tipDiv=this.parentNode.getElementsByTagName("div")[0];
				if (tipDiv){
				  tipDiv.style.display='none';
				}
			};
		}
		else{
			for (var j=0;j<t.length ;j++ ){
	          t[j].style.display='none';
			}
		setNodeType(a,opened?"open":"close");
		a.onfocus=function(){this.blur();return true;}
			a.onmouseup=function(){
				var t,p;
		        p=this.parentNode;
				var t=p.getElementsByTagName("ul")[0];

				if (t.style.display=='none'){
					setNodeType(this,"open");
					t.style.display='';
				}
				else{
					setNodeType(this,"close");
					t.style.display='none';
				}
				return false;
			};
			//设置菜单的样式
			a.onmouseover=function(){
				var t=this.parentNode.getElementsByTagName("ul")[0];
			};
			//设置菜单的样式
			a.onmouseout=function(){
				var t=this.parentNode.getElementsByTagName("ul")[0];
				var tipDiv=this.parentNode.getElementsByTagName("div")[0];
				if (tipDiv){
				  tipDiv.style.display='none';
				}
			};
			//设置菜单提示
			a.onmousemove=function(){
			  var tipDiv=this.parentNode.getElementsByTagName("div")[0];
			  if (tipDiv){
				with (tipDiv.style){
				  display='block';
				  left=parseInt(mouseX)+"px";
				  top=(parseInt(mouseY)+20)+"px";
				  position='absolute';
				}
			  }
			}
		}
	}
	che();
}

function che(){ // 得到最终被点击的节点名称
	var url=window.location.hash;
	if(url!=""){// 最后一个点击的节点,保持状态.
		urls=url.substring(5,url.length);
		obj=urls.split("_");
		for(var i =0; i<obj.length;i++){
			var uls=$(obj[i]);
			if(uls){//如果ID存在
				uls.className="clsExpand";
				var s=uls.parentNode.getElementsByTagName("span");
				var a=uls.parentNode.getElementsByTagName("a")[0];
				if(!s){
					var o=document.createElement("span");
					s[0].insertBefore(o,a);
					s[0]=o;
					}
				s[0].innerHTML="-";
				uls.style.display="block";
			}
		}
	}
}
//document.getElementById 的简写
function $(){
  var elements = new Array();
  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);
    if (arguments.length == 1)
      return element;	
    elements.push(element);
	}
  return elements;
} 
</script>

<style type="text/css">
<!--
ul { list-style:none;}
#nav ul{margin:0;padding:0;font-size:12px;font-family:"宋体";list-style:none;}
#nav ul li {list-style:none; padding-left:13px; line-height:28px; text-align:left}
#nav li{padding: 3px 0 0 13px; line-height:28px;}/*padding-left:;控制子节点的缩进*/
#nav img{border:0;padding:2px 0 0 8px}
/*链接样式*/
#nav a:link{color:#000;text-decoration:none;padding:2px 0 0 2px; line-height:28px;}
#nar a:visited { color:red;}
#nav a:hover{color:red; line-height:28px;}
#nav a:active { color:red;}
img{border:0}
/* +,-号样式 */
#nav span,span.clsExpand,span.clsCollapse{font-size:16px; font-weight:bold;color:#666;position:relative;display:inline;top:-1px;height:28px;margin:0 5px 0 0;padding:1px 3px!important;padding:1px 3px 0;font-weight:normal;}
/* .号样式 */
#nav span.clsLeaf {font-size:16px;font-weight:bold;padding:0px 2px 4px 5px!important;padding:0px 2px 3px 5px;top:-3px;}
-->
</style>
</head>
<body onload="initNav('nav',false)">
<div style="width:185px;border:0;" id="nav">
  <ul>
    <li><a href="#nogoche1">饰品</a>
      <ul id="che1">
        <li> <a href="pro.asp?id=11#che1_che11">头饰</a> </li>
        <li> <a href="pro.asp?id=13#che1_che13">耳环</a> </li>
        <li> <a href="pro.asp?id=14#che1_che14">项链</a> </li>
        <li> <a href="pro.asp?id=15#che1_che15">戒指</a> </li>
        <li> <a href="pro.asp?id=16#che1_che16">手镯手链</a> </li>
        <li> <a href="pro.asp?id=17#che1_che17">胸针</a> </li>
        <li> <a href="pro.asp?id=18#che1_che18">皮带腰带</a> </li>
        <li> <a href="pro.asp?id=51#che1_che51">手表</a> </li>
        <li> <a href="pro.asp?id=53#che1_che53">套链</a> </li>
      </ul>
    </li>
    <li><a href="#nogoche2">工艺礼品</a>
      <ul id="che2">
        <li> <a href="pro.asp?id=19#che2_che19">工艺盒子</a> </li>
        <li> <a href="pro.asp?id=20#che2_che20">蜡烛和烛台</a> </li>
        <li> <a href="pro.asp?id=21#che2_che21">相框</a> </li>
        <li> <a href="pro.asp?id=22#che2_che22">挂历</a> </li>
        <li> <a href="pro.asp?id=23#che2_che23">陶瓷产品</a> </li>
        <li> <a href="pro.asp?id=24#che2_che24">玻璃水晶工艺品</a> </li>
        <li> <a href="pro.asp?id=58#che2_che58">装饰工艺</a> </li>
      </ul>
    </li>
    <li><a href="#nogoche3">玩具</a>
      <ul id="che3">
        <li> <a href="pro.asp?id=25#che3_che25">毛绒玩具</a> </li>
        <li> <a href="pro.asp?id=26#che3_che26">电动玩具</a> </li>
        <li> <a href="pro.asp?id=27#che3_che27">充气玩具</a> </li>
        <li> <a href="pro.asp?id=28#che3_che28">一般玩具</a> </li>
      </ul>
    </li>
    <li><a href="#nogoche4">电子</a>
      <ul id="che4">
        <li> <a href="pro.asp?id=29#che4_che29">电脑配件</a> </li>
        <li> <a href="pro.asp?id=30#che4_che30">手机配件</a> </li>
        <li> <a href="pro.asp?id=31#che4_che31">数码产品</a> </li>
        <li> <a href="pro.asp?id=32#che4_che32">其他</a> </li>
        <li> <a href="pro.asp?id=52#che4_che52">手电筒</a> </li>
      </ul>
    </li>
    <li><a href="#nogoche5">文体用品</a>
      <ul id="che5">
        <li> <a href="pro.asp?id=33#che5_che33">办公用品</a> </li>
        <li> <a href="#nogoche5_che34">体育用品</a>
          <ul id="che34">
            <li> <a href="pro.asp?id=55#che5_che34_che55">木马</a> </li>
            <li> <a href="pro.asp?id=56#che5_che34_che56">休闲用品</a> </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#nogoche6">化妆品</a>
      <ul id="che6">
        <li> <a href="pro.asp?id=35#che6_che35">化妆工具</a> </li>
        <li> <a href="pro.asp?id=36#che6_che36">护肤品</a> </li>
        <li> <a href="pro.asp?id=37#che6_che37">化妆包装</a> </li>
      </ul>
    </li>
    <li><a href="#nogoche7">箱包</a>
      <ul id="che7">
        <li> <a href="pro.asp?id=38#che7_che38">学生包</a> </li>
        <li> <a href="pro.asp?id=39#che7_che39">行李包</a> </li>
        <li> <a href="pro.asp?id=40#che7_che40">时尚包</a> </li>
      </ul>
    </li>
    <li><a href="#nogoche8">针织</a>
      <ul id="che8">
        <li> <a href="pro.asp?id=41#che8_che41">泳装</a> </li>
        <li> <a href="pro.asp?id=42#che8_che42">服装</a> </li>
        <li> <a href="pro.asp?id=43#che8_che43">服饰</a> </li>
      </ul>
    </li>
    <li><a href="#nogoche9">五金</a>
      <ul id="che9">
        <li> <a href="pro.asp?id=44#che9_che44">配件</a> </li>
        <li> <a href="pro.asp?id=45#che9_che45">工具</a> </li>
        <li> <a href="pro.asp?id=46#che9_che46">汽摩</a> </li>
      </ul>
    </li>
    <li><a href="#nogoche10">生活用品</a>
      <ul id="che10">
        <li> <a href="pro.asp?id=47#che10_che47">床上用品</a> </li>
        <li> <a href="pro.asp?id=48#che10_che48">日用品</a> </li>
        <li> <a href="pro.asp?id=49#che10_che49">厨具</a> </li>
        <li> <a href="pro.asp?id=57#che10_che57">雨伞</a> </li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

[ 可以先修改再运行 ]
这个是新版1.0.2
待加的功能...折叠上一个打开的按钮!

发布:飞飞 | 分类:web编程 | 评论:10 | 浏览: | 字号:大中小

1.smartweb.cn 说发表评论于2007-1-11 10:34:19发送邮件个人网站

那么麻烦，真接用yahoo ui
2.飞飞说发表评论于2007-1-11 11:02:36发送邮件个人网站

用人家的..永远不会进步哈....自己学会了.才是自己的 :)
3.飞飞说发表评论于2007-1-12 21:43:04发送邮件个人网站

失败.对ID的编写还是有问题.
很有可能会重复..
4.飞飞说发表评论于2007-1-12 21:47:56发送邮件个人网站

突然想到一个方法...
用ID..类别的ID.因为类别的ID具有惟一性,那么随便写一个字符+ID的方式这样就是不可能重复的了....
嗯..应该可以的...嘿嘿..刚刚否定自己.. 灵感就来了..
继续测试,,
5.飞飞说发表评论于2007-1-12 23:00:33发送邮件个人网站

郁闷...功能消失了.原因还不知道呢..明天来测试把...
6.倩倩说发表评论于2007-1-18 12:06:25发送邮件个人网站

很复杂的塞!!看不懂!!!
7.笑漫中原说发表评论于2007-1-19 8:56:37发送邮件个人网站

第二版的还不如第一版的好呢,整个发生错误了.
8.飞飞说发表评论于2007-1-19 14:14:14发送邮件个人网站

???? 那里错误？麻烦把错误提示给我。。我这里正常的
9.wein 说发表评论于2007-7-25 10:29:35发送邮件个人网站

谢谢！！！找到了你的BLOG经营的很好
10.飞飞说发表评论于2007-7-25 12:57:03发送邮件个人网站

过奖了。都是朋友帮忙的～
欢迎常来～

笨笨的飞飞

日历

网站目录

最新留言

最近发表

链接

查看其他的友情链接