JoliTree

Le JavaScript utilisé est non-intrusif, si JavaScript est désactivé sur le client l'arbre sera affiché statiquement, avec toutes les branches ouvertes.

Usage

La structure HTML utilisée pour représenter l'arbre ressemble au format Netscape Bookmarks, elle est basée sur des listes de définition (<dl>, <dt> et <dd>).

exemple (source de la démo ci-dessus):

	<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>

Explications

Le conteneur global est un élément <dl>, avec une classe "jolitree".

Un dossier est représenté par un <dd>, lequel contient un <p> qui représente son libellé, et un <dl> qui contient le contenu proprement dit du dossier.

Une simple entrée est un <dt> lequel peut éventuellement contenir un lien <a>.

Enfin, un séparateur est représenté par un <dd class="separator"> contenant lui-même un <hr>.

Notes:

Vous devez ajouter la classe "last" à chaque élément (<dd> ou <dt>) qui est le dernier enfant d'un dossier, c'est nécessaire dans le cas où JavaScript n'est pas activé sur le client.

Si vous souhaitez utiliser une icône particulière pour une entrée, il suffit de mettre la classe "no-icon" sur le <dt> correspondant, celà supprimera l'icone par défaut. Il ne vous reste plus qu'à ajouter une balise <img> dans le <dt>.

Si vous souhaitez qu'un dossier soit ouvert par défaut lorsque le JavaScript est actif, ajouter lui la classe "opened" sur le <dd> correspondant.

Styles

Pour la mise en forme, il suffit de lier la feuille de style jolitree.css à la page.

Une feuille alternative est disponible pour les anciennes versions d'Internet Explorer (IE6) qui ne comprennent pas la transparence des images png (elle utilise des gifs à la place).
L'idéal est de lier les 2 feuilles à l'aide de commentaires conditionnels pour IE6 :

	<!--[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]-->

Une autre feuille alternative est également disponible, jolitree-tango.css, basée sur le style Tango. Vous pouvez l'utiliser à la place de jolitree.css, ou créer la votre bien sur.

Comportements

Pour les comportements de pliage/dépliage, il vous faut lier le fichier JavaScript jolitree.js, et créer une instance de la classe JoliTree avec l'élément <dl> souhaité en 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>

Alternativement, vous pouvez utiliser à la place une version compressée. jolitree-min.js est une version minifiée (avec JSMin). jolitree-packed.js est compressé avec le Packer de Dean Edwards. Personnellement, je recommende d'utiliser la version minifiée, voir la version non compressée, car c'est un déjà un fichier léger ;) .

Licence

JoliTree est sous Licence MIT.

Soyez libre de l'utiliser dans vos projets, libre, gratuit ou commercial, de le modifier comme bon vous semble.

Convertisseur - Outils en relation

transformer vos marque-pages en jolitree

bm2jolitree convertit un fichier de marque-pages au format Netscape en représentation jolitree (valide (X)HTML).
Il s'agit d'une classe PHP (NBM2TreeConverter), et d'un script nommé bm2jolitree utilisable en ligne de commande, ou comme exemple d'utilisation de la classe, ainsi qu'un exemple d'utilisation en ligne.

télécharger bm2jolitree-1.0.tar.gz - version 1.0 - 2010-06-18

Ce site étant sur un serveur mutualisé, et certaines fonctions php n'étant pas disponibles, je ne peux malheureusement pas vous faire essayer ce convertisseur en ligne.

Noter qu'avec la dernière version de Boox, une extension pour Firefox, vous pouvez facilement exporter un dossier particulier de vos marque-pages.

joliclic code

JoliTree

Description

Démo

Compatibilité