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?
@barek1337436
Copy link

It’s been a solid few weeks since I started playing here, and I’m very impressed. After trying a few games at spartan slots, I found myself coming back almost daily. The gameplay is fair, and I love that they cater specifically to Australian players with some unique perks. Deposits and withdrawals are straightforward, which gives me peace of mind. The bonuses are enjoyable, but it’s the community feel that I like most—it doesn’t feel like just another casino site.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment