Jquery+CSS Sprites实现无限级树状的简单实例

  • 作者:39℃
  • 来源:56gee
  • 更新时间:2012-03-07 13:30:13
  • 点击:15469
[60分]

树状菜单的实现方式恐怕在网上随处可见,而且是多种多样的(最常用的莫过于JS和Jquery)。之前提过CSS Sprites的原理和大概的使用范围,最近在工作上刚好碰到这样的需求,于是就简单地搬个实例出来说一下。

打开演示地址


这里主要用到Jquery里面的removeClass、addClass、next()等方法对象,虽然看上去是几段很简单的小代码,但当中的排版布局(DIV+CSS)是非常讲究的。其中每个总结点(包括父节点和下面的若干个子节点)用一个DIV套着(class=Row),这样处理是为了方便Jquery对相关的CSS对象操作。另一方面是关于CSS Sprites中图片的合并处理,为啥要将每组图标纵向排列呢?因为从截图中可见,如果图标是横着排列的话,其他不需要的图标也会在目标位置的左右两边“曝光”。同样道理,另一个呈现虚线效果的的PNG小图(事实上它只是一个小方块)是利用CSS中的背景图纵向重复来实现的。而为什么它又要用另一个图片文件来保存呢?这是因为它跟第一个合并的图片所需的效果不一样,试想一下:把它放在第一张图的哪个位置才能实现纵向重复的效果呢?(呵呵,不太可能吧!)从这两种不同的效果中可知,纵向和横向重复背景的图最好是用各自单独文件来合并处理,至于一般不重复的小图标,就要针对页面排版布局的实际情况来决定是横向还是纵向来排列了。就像这实例就适合用纵向排列来处理了。下面是实例的完整代码。

<!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=gb2312" />  
<title>Jquery+CSS Sprites实现无限极树状的简单实例</title>  
<meta name="author" content="56gee 39℃" />  

<link href="/styles/publicDefine.css" rel="stylesheet" type="text/css" />  
<style type="text/css">  
div, ul, li {  
 margin: 0px;  
 padding: 0px;  
 list-style-type: none;  
}  

body {  
 background-color: #FFFFFF;  
 font-size: 12px;  
 margin: 0px;  
 padding: 0px;  
}  

#TreeList {  
 background-color: #FFFFFF;  
 margin-top: 6px;  
 margin-right: 9px;  
 margin-bottom: 6px;  
 margin-left: 9px;  
 border: 1px solid #5d7b96;  
 padding-bottom: 6px;  
}  

#TreeList .ParentNode {  
 line-height: 21px;  
 background-image: url(/demoImgs/Sys_ModuleIcos.png);  
 background-repeat: no-repeat;  
 padding-left: 39px;  
 height: 21px;  
 cursor: pointer;  
 margin-top: 2px;  
 color: #314f6a;  
}  
#TreeList .ParentNode.show {  
 background-position: 3px -27px;  
 background-color: #d1dfeb;  
 font-weight: bold;  
 border-top-width: 0px;  
 border-right-width: 0px;  
 border-bottom-width: 1px;  
 border-left-width: 1px;  
 border-top-style: solid;  
 border-right-style: solid;  
 border-bottom-style: solid;  
 border-left-style: solid;  
 border-top-color: #5d7b96;  
 border-right-color: #5d7b96;  
 border-bottom-color: #5d7b96;  
 border-left-color: #5d7b96;  
}  

#TreeList .ParentNode.hidden {  
 background-position: 3px 4px;  
 border-top-width: 0px;  
 border-right-width: 0px;  
 border-bottom-width: 1px;  
 border-left-width: 0px;  
 border-top-style: dashed;  
 border-right-style: dashed;  
 border-bottom-style: dashed;  
 border-left-style: dashed;  
 border-top-color: #aabdce;  
 border-right-color: #aabdce;  
 border-bottom-color: #aabdce;  
 border-left-color: #aabdce;  
}  

#TreeList .Row {  
 clear: both;  
 margin-left: 24px;  
 background-image: url(/demoImgs/Sys_ModuleIcos2.png);  
 background-repeat: repeat-y;  
 background-position: 7px 0px;  
}  

#TreeList .Row .list {  
 padding-left: 9px;  
 background-image: none;  
 color: #333;  
}  
#TreeList .Row .list li {  
 background-image: url(/demoImgs/Sys_ModuleIcos.png);  
 background-position: 0px -58px;  
 padding-left: 24px;  
 line-height: 21px;  
 background-repeat: no-repeat;  
 border-top-width: 0px;  
 border-right-width: 0px;  
 border-bottom-width: 1px;  
 border-left-width: 0px;  
 border-top-style: dashed;  
 border-right-style: dashed;  
 border-bottom-style: dashed;  
 border-left-style: dashed;  
 border-top-color: #aabdce;  
 border-right-color: #aabdce;  
 border-bottom-color: #aabdce;  
 border-left-color: #aabdce;  
 cursor: default;  
}  
</style>  
<script type="text/javascript" src="/js/jquery-1.5.min.js"></script>  
<script type="text/javascript">  
$(document).ready(function(e) {  
/*==================  初始化将所有树节点都“收”起来 ==========================*/  

 var TModuleNode = $(’#TreeList .ParentNode’);/*顶层模块名称*/ 
 TModuleNode.removeClass(’show’).addClass(’hidden’);  
 TModuleNode.next().css(’display’,’none’)/*;紧跟的下一个是子节点*/  
   
 TModuleNode.click(function(){  
  if($(this).hasClass(’hidden’)){  
   $(this).removeClass(’hidden’).addClass(’show’);  
   $(this).next().css(’display’,’’);  
  }  
  else{  
   $(this).removeClass(’show’).addClass(’hidden’);  
   $(this).next().css(’display’,’none’);  
  }  
 });  
});  
</script>  
</head>  
<body>  
<div id="TreeList">  
  <div class="Row">  
   <div class="ParentNode">酷站欣赏</div>  
    <ul class="Row list">  
      <li>欧美酷站</li>  
      <li>日韩酷站</li>  
      <li>国内酷站</li>  
      <li>婚庆摄影</li>  
      <li>房产建设</li>  
      <li>餐饮食品</li>  
      <li>服饰饰品</li>  
      <li>教育科研</li>  
      <li>个性酷站</li>  
      <li>美容时尚</li>  
    </ul>  
  </div>    
    
  <div class="Row">  
   <div class="ParentNode">设计网址</div>  
    <div class="Row">  
      <div class="ParentNode">综合设计</div>  
      <ul class="Row list">  
       <li>Arting365</li>  
        <li>视觉中国</li>  
        <li>蓝色理想</li>  
        <li>网页设计师联盟</li>  
        <li>创意在线</li>  
        <li>视觉同盟</li>  
      </ul>  
      <div class="ParentNode">平面设计</div>  
      <ul class="Row list">  
       <li>优艾网</li>  
        <li>中国设计网</li>  
        <li>设计酷</li>  
        <li>平面设计在线</li>  
        <li>Photoshop联盟</li>  
        <li>中国教程网</li>  
      </ul>  
    </div>  
      
  </div>  
    
  <div class="Row">  
   <div class="ParentNode">设计欣赏</div>  
    <ul class="Row list">  
      <li>网页设计</li>  
      <li>UI设计</li>  
      <li>VI设计</li>  
      <li>Logo设计</li>  
      <li>广告设计</li>  
      <li>摄影艺术</li>  
      <li>工艺设计</li>  
    </ul>  
  </div>  
    
  <div class="Row">  
   <div class="ParentNode">设计交流</div>  
    <ul class="Row list">  
      <li>设计理念</li>  
      <li>Photoshop教程</li>  
      <li>Flash教程</li>  
      <li>HTML/CSS教程</li>  
      <li>JS/Jquery教程</li>  
      <li>SEO及建站推广</li>  
    </ul>  
  </div>  
</div>  
</body>  
</html> 
收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华