Pages

Friday, March 06, 2009

How To Add YUI Treeview menu in your page...



Sometimes in our project we need to add menus
and submenus...so instead of writing long javascript
code(if you are a damm good javascript programmer) or
Scritping code,ts far better to use YAHOO User interface tool...
It contains lots of many useful tools and reduce rather saves
our time a lot..so the first example of YUI that i gonna share with
u all is the Treeview Menu...


Its very simple..just follow the steps or instruction given below




  • Copy the YUI folder to your root directory..You can download it from http://developer.yahoo.com/yui/


  • Now open the page in which you want to add this tool..
    like i hv added this tool in a CMS in which many sub links were there..


  • Add the code in header section of ur page

    <link rel='stylesheet' type='text/css'
    href='../yui/build/fonts/fonts-min.css' />

    <link rel="stylesheet" type="text/css"
    href="../yui/build/treeview/assets/skins/sam/treeview.css"/>

    <script type="text/javascript"
    src="../yui/build/yahoo/yahoo-min.js"/></script/>

    <script type="text/javascript"
    src="../yui/build/event/event-min.js"/></script/>

    <script type="text/javascript"
    src="../yui/build/treeview/treeview-min.js"/></script/>

    <style/> #treeDiv1 {background: #E4DDC0; padding:1em;} </style/>



  • Add below given line at the place where you want the tree..

    Like in my case i have placed the tree in left section of my page..
    <div id="treeDiv1" style="background-color:#E4DDC0"/></div/>


  • Add this javascript code at the end of the page




<script type="text/javascript"/>
//global variable to allow console inspection of tree:
var tree;
//anonymous function wraps the remainder of the logic:
(function() {
//function to initialize the tree:
function treeInit() {
buildRandomTextNodeTree();
}

//Function creates the tree and
//builds between 3 and 7 children of the root node:
function buildRandomTextNodeTree() {


//instantiate the tree:
tree = new YAHOO.widget.TreeView("treeDiv1");


var n =new YAHOO.widget.TextNode("<a href='#'/>Home</a>" ,tree.getRoot(), false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=School'/>› School View</a>" , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Tour'/>› Virtual Tour</a>" , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Pricipal'/>› Principal Desk</a>" , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=SiteMap'/>› Site Map</a>" , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=contactus'/>› Contact Us</a>" , n, false);


var n =new YAHOO.widget.TextNode("<a href='#'/>Our School</a>" ,
tree.getRoot(), false);

new YAHOO.widget.
TextNode("<a href='edit-content.php?page=Vision'/>› Our Vision</a>" , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Location'/>› Location</a>" , n, false);
new YAHOO.widget.TextNode("<a href='edit-content.php?page=History'/>› History</a/>" , n, false);
new YAHOO.widget.TextNode("<a href='edit-content.php?page=Terms'/>› School Terms</a/>" , n, false);
var n =new YAHOO.widget.TextNode("<a href='#'/>Infrastructure</a/>" , tree.getRoot(), false);
new YAHOO.widget.TextNode("<a href='edit-content.php?page=Library'/>› Library</a/> " , n, false);
new YAHOO.widget.TextNode("<a href='edit-content.php?page=Computerlab'/>› Computer & Science Lab</a>" , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Mathslab'/>› Maths Lab</a> " , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Conference'/>› Conference Room</a> " , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Auditorium'/>› Auditorium</a> " , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Playground'/>› Playground</a> " , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Transport'/>› Transport</a> " , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Medical'/>› Medical</a> " , n, false);

var n =new YAHOO.widget.TextNode("<a href='edit-content.php?page=Staff'/>Staff</a> " , tree.getRoot(), false);

var n =new YAHOO.widget.TextNode("<a href='#'/>Academics</a>" , tree.getRoot(), false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Education'/>› Education</a> " , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Curriculum'/gt;› Curriculum</a/> " , n, false);
new YAHOO.widget.TextNode("<a href='edit-content.php?page=Computer'/>›Computer</a> " , n, false);

var n =new YAHOO.widget.TextNode("<a href='#'/>Beyond Academics</a>" , tree.getRoot(), false);
new YAHOO.widget.TextNode("<a href='edit-content.php?page=Sports'/>› Sports </a/> " , n, false);
new YAHOO.widget.TextNode(" <a href='edit-content.php?page=Arts'/>› Arts & Crafts </a/>" , n, false);
new YAHOO.widget.TextNode("<a href='edit-content.php?page=Elocution'/>› Elocution</a/> " , n, false);
new YAHOO.widget.TextNode("<a href='edit-content.php?page=Music'/>› Music & Drama</a> " , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Scouts'/>› Scouts & Guides</a/> " , n, false);
new YAHOO.widget.TextNode("<a href='edit-content.php?page=Counselling'/gt;rsaquo; Counselling</a/> " , n, false);

var n =new YAHOO.widget.TextNode("<a href='#'/>Enrollment</a>" , tree.getRoot(), false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Fee'/>› Fee Structure </a/> " , n, false);

new YAHOO.widget.TextNode(" <a href='edit-content.php?page=Uniforms'/>› Uniforms </a> " , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Books'/>› Book List </a> " , n, false);

var n =new YAHOO.widget.TextNode("<a href='#'/>Boarding</a>" , tree.getRoot(), false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Fee'/>› Fee Structure </a> " , n, false);

new YAHOO.widget.TextNode(" <a href='edit-content.php?page=Uniforms'/>› Uniforms </a/> " , n, false);

new YAHOO.widget.TextNode("<a href='edit-content.php?page=Books'/>› Book List </a/> " , n, false);

var n =new YAHOO.widget.TextNode("<a href='#'/>School System</a>" , tree.getRoot(), false);

new YAHOO.widget.TextNode(" <a href='edit-content.php?page=Prefectorial'/>› Prefectorial System </a>" , n, false);

var n =new YAHOO.widget.TextNode("<a href='#'/>Policies</a>" , tree.getRoot(), false);
new YAHOO.widget.TextNode("<a href='edit-content.php?page=ChildPro'/>› Child Protection </a> " , n, false);

new YAHOO.widget.TextNode(" <a href='edit-content.php?page=SubstanceAbuse'/>› Substance Abuse </a> " , n, false);

// Expand and collapse happen prior to the actual expand/collapse,
// and can be used to cancel the operation
tree.subscribe("expand", function(node) {
YAHOO.log(node.index + " was expanded", "info", "example");
// return false; // return false to cancel the expand
});

tree.subscribe("collapse", function(node) {
YAHOO.log(node.index + " was collapsed", "info", "example");
});

// Trees with TextNodes will fire an event for when the label is clicked:
tree.subscribe("labelClick", function(node) {
YAHOO.log(node.index + " label was clicked", "info", "example");
});

//The tree is not created in the DOM until this method is called:
tree.draw();
}


//Add an onDOMReady handler to build the tree when the document is ready
YAHOO.util.Event.onDOMReady(treeInit);

})();

</script/>


6. Thats it just refresh the page..and you are done..