您现在的位置: 365建站网 > 365学习 > [orginal]treeView control based on WEB

[orginal]treeView control based on WEB

文章来源:365jz.com     点击数:190    更新时间:2009-09-19 10:29   参与评论
thinking in treeView :
first of all we have to see what the treeView real is,normall  treeView is frame contians nested others frame call it itemes each iteme frame maybe contian others subitem.what is the structure of the iteme of the treeview ? each items contians the( image icon + collapsed or expanded , the image for items which refer to and the caption of element item.
let us start by the CSS code :

the treeFrame going some thing like this:


 
/*tree view  is ul*/
.creTreeView
{
    

    

    cursor
: pointer; 
    

    width
:206px;
    height
:30px;
    margin
: 0;
    padding
: 0;
    overflow
:auto;
    font-family
: 宋体;
    font-size
: 12px;
    color
:black;

}
 
 
/* each li maybe node*/
.creTreeView li
{
    
/* The padding is for the tree view nodes */
    padding
: 0 0  0 22px;
    float
: left;
    width
:150px;
    list-style
: none;
}
 
 
/* if the li is parent ul  */
.creTreeView ul
{
    margin
: 0;
    padding
: 0;
}
 
 
/*if the node expanded*/
li.Expanded 
{
    background
:url('images/ExpandedNotLast.gif') no-repeat left top;
    
/*background-image:url('images/ExpandedNotLast.gif');*/
}
 
/* show all subitems if the list li is expanded ,all sublist in the ul*/ 
li.Expanded ul
{
    display
: block;
}
 
 
/* collapesd show the collapse image*/
li.Collapsed 
{
    background
:url('images/CollapsedNotLast.gif') no-repeat left top;
   
/* background-image:url('images/CollapsedLast.gif');*/
   
}

/* hide all items in sublist*/ 
li.Collapsed ul
{
    display
: none;
}

/* the sublist items of the list.show the linkContent*/
.Expanded li
{
    background-position
:right;
    background
: url('images/sx_2.gif');
    background-repeat
: no-repeat;

}

/**/
.creTreeView li
 
{
     padding
:1px 0px  0px 20px;

}
.creTreeView li ul li
{
    
/* The padding is for the tree view nodes */
    padding
:0px 0px  0px 30px;
    

}

.creTreeView li ul li:hover
{
    
/* The padding is for the tree view nodes */
    padding
:0px 0px  0px 30px;
     border-bottom
:1px GrayText dashed;

}

/*image icone*/
.creTreeView li a
{
    background-position
:left;
    width
: 16px;
    height
: 9px;
    background
: url('images/box.gif');
    background-repeat
: no-repeat;
    
}

/*node text*/
.LastExpanded li
{
    background-position
:right;
    background
:url('images/sx_2.gif');
    background-repeat
: no-repeat;

}


here the js  code to control the tree events,expanded and collapsed.


 Array.prototype.indexOf 
= IndexOf;
 
//Toggles between two classes for an element
function ToggleClass(element,zeroClass, firstClass, secondClass, event)
{
    event.cancelBubble 
= true;
    
    
var classes = element.className.split(" ");
    
var firstClassIndex = classes.indexOf(firstClass);
    
var secondClassIndex = classes.indexOf(secondClass);
    
var zeroCLASSiNDEX=classes.indexOf(zeroClass);
    
    
if (firstClassIndex == -1 && secondClassIndex == -1)
    {
        classes[classes.length] 
= firstClass;
    }
    
else if (firstClassIndex != -1)
    {
        classes[firstClassIndex] 
= secondClass;
    }
    
else
    {
        classes[secondClassIndex] 
= firstClass;
    }
    
    element.className 
= classes.join(" ");
    
}
 
//Finds the index of an item in an array
function IndexOf(item)
{
    
for (var i=0; i < this.length; i++)
    {        
        
if (this[i] == item)
        {
            
return i;
        }
    }
    
    
return -1;
}
 
//The toggle event handler for each expandable/collapsable node
//
- Note that this also exists to prevent any IE memory leaks 
//
(due to circular references caused by this)
function ToggleNodeStateHandler(event)
{
    ToggleClass(
this,"LastExpanded""Collapsed""Expanded", (event == null? window.event : event);
}
 
//Prevents the onclick event from bubbling up to parent elements
function PreventBubbleHandler(event)
{
    
if (!event) event = window.event;
    event.cancelBubble 
= true;
}
 
//Adds the relevant onclick handlers for the nodes in the tree view
function SetupTreeView(elementId)
{
    
var tree = document.getElementById(elementId);
    
var treeElements = tree.getElementsByTagName("li");
    
    
for (var i=0; i < treeElements.length; i++)
    {
        
if (treeElements[i].getElementsByTagName("ul").length > 0)
        {
            treeElements[i].onclick 
= ToggleNodeStateHandler; 
        }
        
else
        {
            treeElements[i].onclick 
= PreventBubbleHandler; 
        }
    }
}

//-----------------------------------------------------------------------------

 
var NodeIndex=0;
 
function AddNewParentNode()
 {
   NodeIndex
++;
   
var name="结点"+NodeIndex;
   
var sublist="<li class=Collapsed><a>&nbsp&nbsp&nbsp</a><span>"+name+"</span>"+
           
"<ul>"+
            
" <li>视频0</li>"+
            
" <li>视频1</li>"+
             
"<li>视频2</li>"+
             
"<li>视频3</li>"+
           
"</ul>"+
       
"</li>";

  
try
  {
       
var HTMLS=document.getElementById('TreeView').innerHTML+sublist;
        document.getElementById(
'TreeView').innerHTML=htmlS;
        SetupTreeView(
'TreeView');
 
  } 
 
  
catch(e)
  {
   alert(e);

  }    
 }
//-----------------------------------------------------------------------------------

  




here you go with html code 

<div id="leftTreeViewTabItems" class="LeftTreeview" > 
                
                    
<div class="treeViewTabHeader">
                    
                     
                   
</div>
                   
<!--treeView--->
                    
<ul class="creTreeView" id="TreeView">
                       
                    
</ul> 

       
       
       
       
       
       
<!--last node in the list-->
      

       
    
   

                   
<!--treeView--->

                
</div>


here you go with nice look result:




















如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (190人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------