odelia technologies - JavaScript

Les effets spectaculaires d’AJAX dans une application Grails !

odelia technologies — Wed, 24 Oct 2007 22:08:02 +0200

Le framework Grails contient dans sa librairie de tags plusieurs éléments réservés au support d'AJAX. Nous donnons dans cet article, des exemples d'utilisation des éléments g:remoteFonction et g:remoteLink, et montrons comment appliquer des effets visuels dans la mise à jour partielle d'une page web avec la librairie scripta.culo.us.

en lire plus

Menu animé en images

odelia technologies — Sat, 18 Aug 2007 07:32:15 +0200

Image Menu de Phatfusion est un élégant menu animé à base d'images, utilisant la librairie mootools. Pour fonctionner, une page web doit inclure dans son en-tête les fichiers JavaScript imageMenu.js et mootools.js, ainsi que le fichier CSS imageMenu.css.

Le menu doit être défini dans la page au moyen d'une liste HTML contenant autant d'éléments LI que nécessaire : chaque élément LI déclare l'attribut class avec la valeur kwick opt<n>, où peut prendre les valeurs 1, 2, ..., 5.
En effet, le fichier imageMenu.css définit des sélecteurs CSS pour les classes opt1, opt2, ..., opt5 et permet ainsi d'associer une image pour chaque élément du menu.

Voici Image Menu en action avec trois éléments de menu :

Lanscapes
People
Nature

Dans cet exemple, le click sur une image est détectée et une fonction JavaScript est appelée, permettant ainsi l'affichage d'un message utilisateur.
Si vous souhaitiez provoquer la navigation vers une URL particulière, vous pouvez avoir recours à l'objet JavaScript window, comme ceci :

window.location.href = 'http://www.odelia-technologies.com/';

Le fichier attaché à cet article contient les sources de cette démonstration.

Valider facilement des formulaires web avec style

odelia technologies — Wed, 07 Mar 2007 22:49:23 +0100

Andrew Tetlaw décrit dans le billet Really easy field validation de son blog DEXAGOGO, une librairie JavaScript permettant de valider facilement les champs d'un formulaire web.

L'idée principale est d'associer des classes CSS particulières aux contrôles d'entrée HTML, pour que la librairie puisse en valider le contenu.
Par exemple, si vous souhaitez que dans une zone d'édition du formulaire, l'utilisateur saisisse obligatoirement une adresse électronique valide, vous utiliserez les classes CSS prédéfinies required et validate-email, comme ceci :

Au moment de la validation (par défaut au moment de la soumission du formulaire), si une donnée saisie se révèle invalide, la librairie fait apparaître un message d'erreur prédéfini ou bien celui que vous avez indiqué.
Ce message apparaît avec un effet de type "fade-in", si vous avez référencé la librairie effects.js de Scriptaculous dans l'en-tête de la page HTML.

Voici un exemple de formulaire web très simple utilisant cette librairie en version 1.5.4.1, avec l'option qui demande la validation d'un champ lorsque celui-ci perd le focus :

Des boîtes de dialogue web avec ThickBox 2.1

odelia technologies — Tue, 07 Nov 2006 23:19:12 +0100

ThickBox 2.1 est une librairie écrite en JavaScript qui permet l'affichage de pages web avec un comportement identique à celui des boîtes de dialogue modales qui requièrent l'attention de l'utilisateur.

en lire plus