Click here to Skip to main content
Click here to Skip to main content

Tagged as

Tree View Control using HTML5

, 19 Apr 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
How to create Tree View Control by HTML5 only.

Introduction

Tree View Control is a useful element for displaying a tree structure, for example: catalog of products, menu of site content, user groups etc. But there is no standard HTML tag to create it as for list box or edit box. Usually a Tree View control is created by JavaScript or CSS3. These methods require a lot of code. I have a simple idea to do this using the HTML5 tag <details>. Unfortunately this tag only supports Chrome and Safari web browsers, but I think in future all browsers will support the HTML5 standard.

Background

The main and simple idea is to use nest tags <details> and a left margin style for tree levels. The item of the Tree View control may be as a list tag or any other form tag: <div>, <p> etc. To insert a caption to tag <details> use the tag <summary>. Hint: you can use as normal text as links. See example:

Using the code

To insert this code only for Chrome or Safari web browser you may use PHP code like this:

if( strpos( $_SERVER['HTTP_USER_AGENT'], "Chrome") !== false || 
 strpos( $_SERVER['HTTP_USER_AGENT'], "Safari") !== false ){}

For example:

<details><summary>1. Node</summary>
<div style="margin-left:25px">1.1 Item</div>
<div style="margin-left:25px">1.2 Item</div>
<details style="margin-left:25px"><summary>1.3 Node</summary>
    <div style="margin-left:25px">1.3.1 Item</div>
    <div style="margin-left:25px">1.3.2 Item</div>
</details>
</details>
<details><summary>2. Node</summary>
<div style="margin-left:25px">2.1 Item</div>
<div style="margin-left:25px">2.2 Item</div>
</details>
<details><summary>3. Node</summary>
<div style="margin-left:25px">3.1 Item</div>
</details>

Points of Interest

I've created Tree View control for my site catalogofsoftware.com. You may see platforms as first level of tree, categories as second level of tree and sub categories as first level of tree.

See also:

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Style-7

Ukraine Ukraine
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 19 Apr 2013
Article Copyright 2013 by Style-7
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid