On content-heavy sites with multiple tiers of information architecture, occasionally a need arises to present several levels of nested data. If all of the info was presented in its entirety, it would be too unwieldy to be useful and would take up too much vertical space on a page. Enter the file-tree paradigm. This functionality, seen most notably in the desktop UI of Windows Explorer (not to be confused with Internet Explorer), allows a user to expand and compact layers of directories.
By using jQuery’s descendant selectors on nested unordered lists, we can hide/show additional portions of a tree structure, as needed. This is done by addingclass="tree" to the top-level unordered list and using a combination of CSS and Java-Script to unveil its sublevels, producing a tree like that in
Figure : (Presenting multiple levels of data through a file tree). Additionally, we make use of event delegation to support numerous tiers without the overhead of attaching event listeners to multiple elements. Instead, the event is captured at the top level of the <ul class="tree">via jQuery’s.live() method.File tree—HTML code
File tree—jQuery code
The tree code begins by attaching event handlers to links with class names of expand_all and collapse_all. If either link is clicked, then we traverse the DOM upward to the parent <p>, over to the next <ul>, and then down into its children. Each child link with class="tree_trigger" receives the class of trigger_expanded, and each subsequent <ul>receives the class tree_expanded. These class names correspond to the CSS rules that change their visual appearance. In the case of the trigger links, they have an expanded icon. As for the lists, they are now display: block instead of display: none.
The “live” event listener listens for clicks anywhere within the tree. Basically, this listens for clicks anywhere within the <ul class="tree">and then determines whether the click happened on a link with class="trigger". If so, it executes the associated code.
The benefit of using .live(), as opposed to adding a click handler directly to each link,is that the code is associated with all existing and future elements that match the criteria.
The benefit of this is twofold: you don’t waste time attaching event listeners to numerous elements, and if dynamic content is inserted via Ajax, it is affected by the “live”event listener as well.
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.