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..
