Skip to content

Instantly share code, notes, and snippets.

@hawkrives
Created October 11, 2011 16:59
Show Gist options
  • Save hawkrives/1278680 to your computer and use it in GitHub Desktop.
Save hawkrives/1278680 to your computer and use it in GitHub Desktop.
HTML <tree> element

Use Cases

  • Bookmarks Sidebar
  • Email Folders
  • Message/ToDo List
  • Groups/Trello
  • List
  • Website Navigation

Bookmarks Sidebar

    <tree>
        <ti>Bookmarks Toolbar
            <ti>Apps
                <ti>Gmail</ti>
                <ti>Trello</ti>
                <ti>MDN</ti>
                <ti>Twitter</ti>
            </ti>
            <ti>Mozilla
                <ti>.org</ti>
                <ti>developer</ti>
                <ti>mozillians.org</ti>
                <ti>browserID</ti>
                <ti>bugzilla</ti>
            </ti>
        </ti>
        <ti>Bookmarks Menu
            <ti>Feature Pages
                <ti>UX/ToDo</ti>
                <ti>Features/Desktop</ti>
                <ti>Silent Update</ti>
            </ti>
            <ti>Bugs
                <ti>Bug 630792 - Add a close button and small toolbar to Tab View</ti>
                <ti>Bug 596017 - Combine the Panorama button and the List Tabs button</ti>
                <ti>Bug 587873 - App tabs should be the same in each window</ti>
            </ti>
        </ti>
    </tree>
Bookmarks Toolbar
    Apps
        Gmail
        Trello
        MDN
        Twitter
    Mozilla
        .org
        developer
        mozillians.org
        browserID
        bugzilla
Bookmarks Menu
    Feature Pages
        UX/ToDo
        Features/Desktop
        Silent Update
    Bugs
        Bug 630792 - Add a close button and small toolbar to Tab View
        Bug 596017 - Combine the Panorama button and the List Tabs button
        Bug 587873 - App tabs should be the same in each window

Email Sidebar

    <tree>
    	<header>
    		<ti>Folder</ti>
    		<ti>Unread</ti>
    	</header>
    	<group>
    		<ti>Inbox</ti>
    		<ti>5</ti>
    		<group>
    			<ti>Child</ti>
    			<ti>2</ti>
    		</group>
    		<group>
    			<ti>Other</ti>
    			<ti>3</ti>
    		</group>
    	</group>
    	<group>
    		<ti>Junk</ti>
    		<ti>3</ti>
    	</group>
    	<group>
    		<ti>All Mail</ti>
    		<ti>26</ti>
    	</group>
    </tree>
Folder			Unread
----------------------
Inbox			5
  Child			2
  Other			1
Junk			3
All Mail		26

Groups

    <tree>
    	<group>
    		<header>To Do</header>
    		<ti>Write out use cases
    			<ti>Groups (Logical)</ti>
    			<ti>Website Navigation</ti>
    			<ti>Email Folder Sidebar</ti>
    			<ti>Simple List</ti>
    			<ti>Bookmarks Sidebar</ti>
    			<ti>Message/Todo List</ti>
    		</ti>
    		<ti>Does jQuery have a tree view?</ti>
    	</group>
    	<group>
    		<header>Doing</header>
    	</group>
    	<group>
    		<header>Done</header>
    		<ti>Look at the XUL &lt;treeview&gt; element.</ti>
    	</group>
    </tree>
|------------ To Do ------------|	|---- Doing ----|
| Write out use cases 			|	|				|
| - Groups (Logical)			|	|				|
| - Website Navigation			|	|---------------|
| - Email Folder Sidebar		|
| - Simple List					|
| - Bookmarks Sidebar			|
| - Message/Todo List			|
|								|
| Does jQuery have a tree view?	|
|-------------------------------|

|---------------- Done -----------------|
| Look at the XUL `<treeview>` element. |
|---------------------------------------|

List

    <tree>
    	<ti>Item 1</ti>
    	<ti>Item 2</ti>
    	<ti>Item 3</ti>
    	<ti>Item 4</ti>
    </tree>
Item 1
Item 2
Item 3
Item 4

Messages List

    <tree>
        <header>
            <ti>From</ti>
            <ti>Subject</ti>
            <ti>Date</ti>
            <ti>*</ti>
            <ti>!</ti>
        </header>
        <group>
            <ti>Kyle</ti>
            <ti>Hi!</ti>
            <ti>Today</ti>
            <ti>*</ti>
            <ti></ti>
            <group>
                <ti>Kyle</ti>
                <ti>Test</ti>
                <ti>Yesterday</ti>
                <ti>°</ti>
                <ti></ti>
                <group>
                    <ti>Kyle</ti>
    	            <ti>Child</ti>
    	            <ti>10/11/2011</ti>
    	            <ti>°</ti>
    	            <ti></ti>
    	        </group>
            </group>
        </group>
        <group>
        	<ti>Mike</ti>
            <ti>Hmm...</ti>
            <ti>Today</ti>
            <ti>*</ti>
            <ti>!</ti>
        </group>
    </tree>
| From ^	| Subject		| Date			| * | ! |
-----------------------------------------------------
| Kyle		| Hi!			| Today			| * |   |
| > Kyle	| Test			| Yesterday		| ° |   |
| > > Kyle	| Child			| 10/11/2011	| ° |   |
| Mike		| Hmm...		| Today			| * | ! |

Website Navigation

    <tree>
    	<ti>Topics
    		<ti>Web</ti>
    		<ti>Mobile</ti>
    		<ti>Add-ons</ti>
    		<ti>Mozilla</ti>
    	</ti>
    	<ti>Docs
    		<ti>HTML
    			<ti>DOM</ti>
    			<ti>Video</ti>
    			<ti>Audio</ti>
    			<ti>SVG</ti>
    			<ti>WebGL</ti>
    		</ti>
    		<ti>HTML5
    			<ti>WebSockets</ti>
    			<ti>Offline Cache</ti>
    			<ti>Local Storage</ti>
    			<ti>IndexedDB</ti>
    			<ti>File API</ti>
    		</ti>
    		<ti>CSS
    			<ti>Gradients</ti>
    			<ti>Transforms</ti>
    			<ti>Transitions</ti>
    			<ti>Animations</ti>
    			<ti>Media Queries</ti>
    		</ti>
    		<ti>JavaScript
    			<ti>AJAX</ti>
    			<ti>Canvas</ti>
    			<ti>Geolocation</ti>
    			<ti>Drag &amp; Drop</ti>
    			<ti>Web Workers</ti>
    		</ti>
    	</ti>
    	<ti>Demos</ti>
    	<ti>Learning</ti>
    	<ti>Community
    		<ti>Events</ti>
    		<ti>Discussions</ti>
    		<ti>Promote</ti>
    	</ti>
    </tree>
--------------------------------------------------------
| DevMo | Topics  | Docs | Demos | Learning | Community |
--------| ^^^^^^  |-------------------------------------
		| Web     |
		| Mobile  |
		| Add-ons |
		| Mozilla |
		-----------

--------------------------------------------------------
| DevMo | Topics | Docs | Demos | Learning | Community |
-----------------| ^^^^ |-------------------------------------------------
				 | *HTML* | *HTML5        | *CSS*         | *JavaScript* |
				 | DOM    | WebSockets    | Gradients     | AJAX         |
				 | Video  | Offline Cache | Transforms    | Canvas       |
				 | Audio  | Local Storage | Transitions   | Geolocation  |
				 | SVG    | IndexedDB     | Animations    | Drag & Drop  |
				 | WebGL  | File API      | Media Queries | Web Workers  |
				 ---------------------------------------------------------

-----------------------------------------------------------
| DevMo | Topics  | Docs | Demos | Learning | Community   |
--------------------------------------------| ^^^^^^^^^   |
                                    		| Events      |
                                    		| Discussions |
                                    		| Promote     |
                                    		---------------

Outstanding Issues

  • Use <row> or <group> elements?
  • Use <item> or <ti> element?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment