jqxTree – Powerful Tree widget built with jQuery

jqxTree represents a highly configurable jQuery Tree widget that displays hierarchical data, such as a table of contents in a tree structure. jqxTree can be generated from lists and standard anchor tags, which are properly recognized by search engines. As a result, all content accessible through this widget will be automatically indexed and ranked with no extra effort required from the web developer. The Tree widget comes with built-in keyboard navigation, animated expand and collapse, customizable toggle mode, flexible API and professional themes.
Browse examples: Tree Demos

Features

• Checkboxes and Three-state Checkboxes
• Keyboard Navigation
• Works across devices and browsers
• Web Standards Compliant
• Rich and easy to use JavaScript API
• Easy customization and built-in themes
• Search-Engine Friendly Rendering

Checkboxes and Three-state checkboxes

With jqxTree, you can display a checkbox next to each tree item. It also supports three-state checkboxes that allow you to check or uncheck all sub-items whenever the parent tree item is checked or unchecked respectively. An indeterminate state of the checkbox indicates that some child objects in the collection are checked while others are not.

Keyboard Navigation

The jQuery Tree widgets allows you to navigate through all Tree items by using the keyboard arrow keys. You can also expand or collapse items with keyboard strokes. Keyboard navigation is perfect for application scenarios where accessibility is an important factor.

Works across devices and browsers

jqxTree supports all major desktop and mobile web browsers – Internet Explorer 7.0+, Firefox 2.0+, Safari 3.0+, Opera 9.0+, Google Chrome, IE Mobile, Android, Opera Mobile, Mobile Safari(IPhone, IPad). jqxTree automatically detects the browser’s type and adjusts its internal behavior for optimal rendering and best user experience. You can easily use this widget even on touch devices.

Web Standards Compliant

Don’t spend time testing on different devices and browsers. Use a reliable, CSS compliant JavaScript Tree widget based on jQuery, HTML5 and CSS3.

Rich and easy to use JavaScript API

jqxTree has a rich set of events and built-in functions guaranteeing full control over the Tree. With the Tree API, you can get the selected tree item, expand or collapse an item, disable or enable a tree item or the entire Tree. You can also add new items or remove tree items or entire sub-trees.

Easy customization and built-in themes

jqxTree ships with 5 professionally designed themes. Each theme is stored in a separate CSS file which makes it easy to export, customize and re-use. The themes can be easily switched using a single property.

Search-Engine friendly rendering

jQuery Tree uses a list items and CSS for rendering. You can turn your list items into a nice-looking tree by calling a single function. Below is a html markup for building a Tree.

<div id='jqxTree'>
<ul>
    <li id='home' item-selected='true'>Home</li>
    <li item-expanded='true'>Solutions
        <ul>
            <li>Education</li>
            <li>Financial services</li>
            <li>Government</li>
            <li>Manufacturing</li>
            <li>Solutions
                <ul>
                    <li>Consumer photo and video</li>
                    <li>Mobile</li>
                    <li>Rich Internet applications</li>
                    <li>Technical communication</li>
                    <li>Training and eLearning</li>
                    <li>Web conferencing</li>
                </ul>
            </li>
            <li>All industries and solutions</li>
        </ul>
    </li>
    <li>Company
        <ul>
            <li>About Us</li>
            <li>Press</li>
            <li>Investor Relations</li>
            <li>Corporate Affairs</li>
            <li>Careers</li>
            <li>Showcase</li>
            <li>Events</li>
            <li>Contact Us</li>
            <li>Become an affiliate</li>
        </ul>
    </li>
</ul>
</div>