[orginal] OOP treeView based on web.


  abstraction:

    The TreeView control displays a hierarchy of nodes, like the way files and folders are displayed in the

 left pane of the Windows Explorer feature in Windows operating systems,

 Each node in the tree view might contain other nodes, called child nodes.

You can display parent nodes, or nodes that contain child nodes, as expanded or collapsed.  


  introduction:

 to build the treeView control basing on web meaning css, html and js, is not hard to implement, all one needs to do is to build an active css code, you needn't pay too much attention to the js code  it is really easy if you look to the treeview structure it at all depend on recursive way, each node can at the same time be parent and child.


design:

here we see the recursive algorithm for creating the html code for treeview control :

Code


then continue with the class of the treeView control. to use the code below seems reasonable 

Code
Then one needs to add JavaScript to the page to toggle the applied styles. For this, I decided to go with an approach that could handle multiple styles being applied to a single element, so my solution is a little more complex than a simple className replacement approach:
Code
I then wrote a script to setup the treeview based on a nested list container. The main reason according to which I chose not to have all the event wiring in the HTML itself, is that my approach leads to cleaner markup and allows one to easily convert any unordered list into a treeview. Here is the script to hook up the click events (it works in both IE and FireFox):


Code

to make it all more convenient for users there is no need for create the html code,

just we call the function:



function  createTreeViewHtmlCode(pid)
{
  var ul=document.createElement('ul');
      ul.className='TreeView';
      ul.id=pid+'tv';
      document.getElementById(pid).appendChild(ul);
}
 


here one can observe the entire js code:


Code


now we need to see the way of creating the object  of treeView :


Code

but the step must be implemented after you call the header file:

<SCRIPT type="text/javascript" language="javascript" src="treeview.js"></SCRIPT>

now one can observe the auto-generation code simultaneously created by the js object above:


Code


here you see the css style :


Now I want the first level node to be collapsed with a plus image next to it by default to indicate that the node can be expanded. In order to achieve this we can get rid of the li symbols by making the list items float left. This makes them stack up, so then one can set the elements to display at a 100% of the containing element. We then need space to place our treeview expandable image, so we put in a left padding of 37px. To simplify the process you can use a CSS child selector to apply this to all list elements within the treeview, like this:



Code



The addition of the collapsing and expanding images, and the associated effects to the child nodes is achieved with the help of the following styles:



Code








Moory !! Marisha!!!




posted @ 2009-11-20 17:53  ammar  阅读(310)  评论(0)  编辑  收藏  举报