Documentation de la librairie prototype-window

Sébastien Gruhier

Traducteur

spacefrog

Traduction pour https://www.developpez.com par SpaceFrog (Steven K. Martin), du document Prototype

Window Class : Documentation de Sébastien Gruhier.

- Titre : Documentation de la librairie prototype-window

- Auteur : Sébastien Gruhier

- Traducteur : spacefrog

- Parution : 21 juin 2007

- Licence : Traduction pour https://www.developpez.com par Steven K. Martin du document en Prototype Window Class : Documentation de Sébastien Gruhier. Cet article reste la propriété de l'auteur original. La copie, modification et/ou distribution par quelque moyen que ce soit est soumise à l'obtention préalable de l'autorisation de l'auteur.

Sommaire

- I. Présentation

- II. Fonctionnalités

- III. Mode d'emploi

I - Présentation

Cette classe JavaScript permet d'ajouter une fenêtre dans une page HTML.

Cette classe est fondée sur le framework Prototype. Son code est inspiré de la puissante bibliothèque script.aculos.us. Il est même possible d'utiliser tous les effets d'affichage et de masquage de script.aculo.us en incluant le fichier effects.js, mais ce n'est pas obligatoire.

Testé sous Safari, Camino, Firefox, IE6 et Opera avec de bons résultats.

II - Fonctionnalités

Le code généré est valide HTML/XHTML.

Fenêtres redimensionnables.

Minimiser / Maximiser.

Fenêtres modales.

Effets visuels.

Différents thèmes disponibles.

Et bien plus.

III - Mode d'emploi

Facile d'utilisation, il suffit d'inclure deux fichiers JavaScript et un CSS (ou davantage pour les thèmes supplémentaires).

<script type="text/javascript" src="/javascripts/prototype.js"></script>
<script type="text/javascript" src="/javascripts/window.js"></script>
<link href="/stylesheets/themes/default.css" rel="stylesheet" type="text/css"/>

<!--  Ajoutez ceci pour mettre en place un thème spécifique -->
<link href="themes/mac_os_x.css" rel="stylesheet" type="text/css"/>

Pour créer une fenêtre, il suffit d'instancier un objet Window avec des paramètres optionnels, attribuer l'innerHTML de son contenu principal et appeler les fonctions show() ou showCenter().

win = new Window({className: "mac_os_x", title: "Sample", width:200, height:150, destroyOnClose: true, recenterAuto:false});
win.getContent().update("<h1>Hello world !!</h1>");
win.showCenter();

Voir les exemples pour plus de codes.