JoliTree

Description

JoliTree is a CSS Stylesheet and a lightweight JavaScript (2K minified) to represent a (X)HTML tree, with collapsable folders.

download jolitree-1.0.1.zip - version 1.0.1 - 2010-06-21

You can find at the bottom of this page a tool to convert Bookmarks into (X)HTML directly usable with jolitree.

Demo

bookmarks

a link 1 - some text -

a folder 1

a link 2 (no icon)

a link 3

a folder 2

a link 4
a link 5

a folder 3

a link 6

a link 7

a folder 4

a link 8
a link 9 (no icon)

Compatibility

Should work on all modern Browsers (Firefox, Opera, Safari, Chrome,...).
Should work with IE6, IE7, IE8.

The JavaScript used is unobstrusive, if JavaScript is not enabled on the client the tree will be displayed statically, all branches opened.

Usage

The HTML structure used to represent the tree looks like Bookmarks in Netscape format, it is based on definition lists (<dl>, <dt> and <dd>).

example (source of the demo above):

	<dl id="myTree" class="jolitree">
		<dd class="last opened">
			<p>bookmarks</p>
			<dl>
				<dt><a href="#">a link 1</a> <em>- some text -</em></dt>
				<dd class="opened">
					<p>a folder 1</p>
					<dl>
						<dt class="noicon">
							<img src="../img_example/favicon.png" alt="">
							<a href="#">a link 2</a> (no icon)
						</dt>
						<dt><a href="#">a link 3</a></dt>
						<dd class="last">
							<p>a folder 2</p>
							<dl>
								<dt><a href="#">a link 4</a></dt>
								<dt class="last"><a href="#">a link 5</a></dt>
							</dl>
						</dd>
					</dl>
				</dd>
				<dd class="last">
					<p>a folder 3</p>
					<dl>
						<dt><a href="#">a link 6</a></dt>
						<dd class="separator"><hr></dd>
						<dt><a href="#">a link 7</a></dt>
						<dd class="last">
							<p>a folder 4</p>
							<dl>
								<dt><a href="#">a link 8</a></dt>
								<dt class="noicon-last">
									<img src="../img_example/favicon.png" alt="">
									<a href="#">a link 9 (no icon)</a>
								</dt>
							</dl>
						</dd>
					</dl>
				</dd>
			</dl>
		</dd>
	</dl>

Explanations

The global container is an <dl>, with a class "jolitree".

A folder is represented by a <dd>, which contains a <p> representing its label, and a <dl> that contains the actual content of this folder.

A simple entry is a <dt> which may optionally contain a link <a>

Finally, a separator is represented by a <dd class="separator">, itself containing a <hr>.

Notes:

You must add the class "last" to each element (<dd> or <dt>) which is the last child of a folder, it is necessary if JavaScript is not enabled on the client.

If you want to use a particular icon for an entry, just put the class "no-icon" on the corresponding <dt>, this removes the icon by default. Then, just add your <img> tag in the <dt>.

If you want a folder opened by default when JavaScript is enabled, add the class "opened" on the corresponding <dd>.

Styles

For the visual formatting, simply link the stylesheet jolitree.css to the page.

A alternative stylesheet is available to be compatible with the old versions of Internet Explorer (IE6), wich don't treat the PNG transparency. This stylesheet use GIF images rather than PNG.
Ideally, link the 2 stylesheets with IE conditional comments:

	<!--[if gte IE 7]> <!-->
	<link rel="stylesheet" type="text/css" media="screen" href="jolitree/css/jolitree.css">
	<!--<![endif]-->
	
	<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" media="screen" href="jolitree/css/jolitree-ie6.css">
	<![endif]-->

Another alternative stylesheet is available, jolitree-tango.css, Tango style based. You can use it in place of jolitree.css, or create your own, of course.

Behaviors

To enable the folding/unfolding behavior, you have to link the JavaScript file jolitree.js to your page, and create an instance of the JoliTree class with the cibled <dl> as argument:

<script type="text/javascript" src="jolitree/jolitree.js"></script>

<script type="text/javascript">
function init() {
  var tree = new JoliTree(document.getElementById("myTree"));
}

window.onload = init;
</script>

Alternatively, you can use instead a compressed version. jolitree-min.js is a minified version (with JSMin). jolitree-packed is compressed with the Dean Edwards JavaScript Packer. Personaly, I recommend to use the minified version, or the uncompressed version, because it's already a lightweight file ;) .

License

JoliTree is licensed under the MIT License.

Feel free to use it in your projects, free or commercial, and to modify it as you want.

Converter - Related Tools

convert your bookmarks into jolitree

bm2jolitree convert a Bookmarks file (Netscape format ) into a jolitree representation ((X)HTML valid).
It's a PHP class (NBM2TreeConverter), and a script called bm2jolitree usable in command line, or as an example of the class usage. An online example is available too.

download bm2jolitree-1.0.tar.gz - version 1.0 - 2010-06-18

Because this site is on a shared server, and some PHP functions are not available, unfortunately I cannot let you try this converter online.

Note that with the latest version of Boox , an extension for Firefox, you can easily export a particular folder of your bookmarks.

joliclic code