widgets.FisheyeList

Ce widget est propulsé par Dojo.js Framework .

Bien connu des utilisateurs de MacOsX/Apple, l'effet Fisheye est un effet graphique qui a pour objectif de créer une "vague" ou une "loupe" sur une liste d'icônes affichés. L'effet est utilisé de base sur le bureau MacOsX, ce qui, il faut le dire, change un peu de la monotonie des barres des tâches de Windows XP.
Dojo.js vous permet donc d'intégrer ce type d'effet 'Fisheye' au sein de corps XHTML/CSS ceci dans le but dynamiser les menus des sites webs et les rendre plus attrayants plus proche d'un environnement desktop standard.

#00 :: Utilisation basique de widgets.Fisheye

Utilisation basique de widgets.Fisheye

Vous pouvez prendre connaissance dans ce premier niveau de contenu d'un exemple d'intégration de barres d'icônes avec l'effet "Fisheye".
Dojo.js se base sur un container "FisheyeList" contenant des "FisheyeListItem" représentant les différents icônes de la barre.
La "FisheyeList" définit la taille minimum et maximum des icônes au sein du widget, définit le type de zoom (ici un survol 'long' est nécessaire pour obtenir la taille maximale d'icône) ainsi que le nombre d'éléments à prendre en compte.

Cet exemple montre la force du framework Dojo.js . Très simplement à l'aide d'éléments qu'un novice ne distinguerait pas d'éléments (X)HTML classiques, ce novice peut mettre en place une fonctionnalité qui sans être incontournable est au moins agréable particulièrement pour les afficionados de l'environnement MacOsX.

Le code source de cet exemple est repris ci après avec dans l'ordre :

• Code Javascript : code javascript permettant d'inclure la classe 'dojo.widgets.FisheyeList' .
• Code HTML (modify) : code HTML spécialisé hybride Dojo, définissant la "FisheyeList" et ses "FisheyeListItem" .

<script language="JavaScript" type="text/javascript"> dojo.require("dojo.widget.FisheyeList"); </script>
Ci après le code HTML hybride Dojo :
<div dojoType="FisheyeList" itemWidth="48" itemHeight="48" itemMaxWidth="128" itemMaxHeight="128" orientation="horizontal" effectUnits="5" itemPadding="10" attachEdge="center" labelEdge="bottom" conservativeTrigger="true" > <div dojoType="FisheyeListItem" caption="webjax c'est bien tata dans les choux toto au ciel" iconsrc="http://www.webjax.eu/images/Fisheye/preferences-desktop-assistive-technology--128.png" onclick="alert('click on' + this.caption + '(from widget id ' + this.widgetId + ')!');"> </div> <div dojoType="FisheyeListItem" caption="webjax c'est bien tata dans les choux toto au ciel" iconsrc="http://www.webjax.eu/images/Fisheye/preferences-system-windows--128.png" onclick="alert('click on' + this.caption + '(from widget id ' + this.widgetId + ')!');"> </div> <div dojoType="FisheyeListItem" caption="webjax c'est bien tata dans les choux toto au ciel" iconsrc="http://www.webjax.eu/images/Fisheye/terminal--128.png" onclick="alert('click on' + this.caption + '(from widget id ' + this.widgetId + ')!');" > </div> <div dojoType="FisheyeListItem" caption="webjax c'est bien tata dans les choux toto au ciel" iconsrc="http://www.webjax.eu/images/Fisheye/volume-knob--128.png" onclick="alert('click on' + this.caption + '(from widget id ' + this.widgetId + ')!');" > </div> <div dojoType="FisheyeListItem" caption="webjax c'est bien tata dans les choux toto au ciel" iconsrc="http://www.webjax.eu/images/Fisheye/web-browser--128.png" onclick="alert('click on' + this.caption + '(from widget id ' + this.widgetId + ')!');" > </div> <div dojoType="FisheyeListItem" caption="webjax c'est bien tata dans les choux toto au ciel" iconsrc="http://www.webjax.eu/images/Fisheye/xchat--128.png" onclick="alert('click on' + this.caption + '(from widget id ' + this.widgetId + ')!');" > </div> </div>

: 10/08/2007 21:46:13 | : Fisheye, effect, fisheye, MacOsX, Macintosh, Apple, Effect, cool, widget, images, widgets, image, Widgets, fish, eye, photography,

Aucun commentaire enregistré