Une classe pour gèrer les fenêtres avec prototype.js

Par j0k3r_n0ir le jeudi 08 juin 2006, 12:08 dans webdesign - 7507 vues

Prototype Window Class est une classe JavaScript pour la librairie prototype.js.
Cette classe permet de gérer plusieurs fenêtre. Par exemple plutôt que d'afficher une alert en JavaScript, on peut utiliser la méthode Window qui permet d'afficher une fenêtre par-dessus le site avec un système d'overlay pour éviter que l'on puisse cliquer en dehors de la fenêtre. Prototype Window Class propose bien d'autres méthodes toutes aussi intéressantes :

Redimensionnement de fenêtre
Minimiser / maximiser
Effets visuels
Gestion des thèmes

Ce dernier point est très intéressant puisqu'il permet de faire ses propres thèmes et donc ses propres fenêtres. En plus de ça, le site est clair, propose une bonne documentation de la classe, des exemples et même une fonction débug très utile.

A essayer d'urgence ! :)

11 commentaires en tout !

1. rehren le vendredi 09 juin 2006, 02:28 #permalien

Ajax va t-il remplacer flash?? avec tout ce que l'on peut faire maintenant , je me pose de plus en plus cette question!

2. j0k3r_n0ir le vendredi 09 juin 2006, 07:27 #permalien

Sacré romain :)

3. Anonymous le jeudi 24 août 2006, 06:14 #permalien

Yo mec, je cherche cette fonction et je tombe direct sur ton site ! Merki !

et RE...

4. Anonymous le lundi 09 avril 2007, 04:35 #permalien

Je connais cetet fonction depuis peu mais ne cerne pas comment l'installer correctement. Tuts possible ?

Merci d'avance

5. j0k3r_n0ir le lundi 09 avril 2007, 07:06 #permalien

Tu as plein d'exemple accès simple sur le site : http://prototype-window.xilinus.com/samples.html

6. Anonymous le mardi 10 avril 2007, 03:35 #permalien

Cela ne résout en rien la question du code nécessaire pour le mettre en place... si tu veux j0k, ce ne sont pas les fonctions qui posent un problème ce sont leur intégration.
Actuellement j'utilise : **Code ** &lt;a id=&quot;zone1&quot; href=&quot;#&quot; onclick=&quot;show()&quot; title=&quot;pouet&quot;&gt;&lt;/a&gt;

C'est dans un mapping... mais bref cela s'affiche dès le chargement de la page au lieu de s'afficher lors du click sur la zone mapped. Il me semble que c'est ici que le problème se trouve. Je n'en suis pas sur à 100% non plus.

Merci en tout cas.

7. DanRaZor le mardi 10 avril 2007, 03:43 #permalien

Si sur "onClick()" tu "Show()", il faut bien penser à appeler le "Hide()" dés le chargement du script ...
Sinon elle est déja certainement en "Show()" ...

C'est "Right" ? LOL

Quand on veut un effet sur "onClick", il faut bien veiller à activer l'état initial qui n'est souvent pas le bon ...

Un div est souvent affiché par défaut, donc c'est à toi de le cacher au chargement de la page.

8. j0k3r_n0ir le mardi 10 avril 2007, 04:02 #permalien

Montre nous ta fonction show pour voir

9. Anonymous le mardi 10 avril 2007, 04:42 #permalien

Voila l'engin...
**Code ** ``<div id="image">    <a id="zone1" href="#" onclick="show()" title="edito/accueil"></a>       <script type="text/javascript"> var win = new Window({className: "dialog", width:350, height:400, zIndex: 100, resizable: true, title: "Avant propos", showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff, draggable:true, wiredDrag: true})

 win.getContent().innerHTML= "<div style='padding:10px'>le texte de ma fenêtre que je vous ait effacé sinon ça fait trop long</div>"  win.setStatusBar("Status bar info");  win.showCenter(); </script>           <a id="zone2" href="../photo/" title="acceder à la gallerie photo"></a>       </div>``

Je rame, j'ai essayé une dizaine de fonction dans le onclick... aucune ne donne de résultat satisfaisant : la fenetre s'affiche tjs au chargement de la page...

10. j0k3r_n0ir le mardi 10 avril 2007, 05:47 #permalien

Tu devrai englober la création de la fenetre dans une fonction.
Quand je l'ai mis en place j'ai fait comme ça moi :

un appel à la fonction **Code ** &lt;input name=&quot;action&quot; value=&quot;Modifier&quot; onclick=&quot;javascript:openContentWindow(298, 249, 3)&quot; type=&quot;button&quot;&gt;

Et ma fonction : **Code ** function openContentWindow(suivi_id, idStage, promo) { &nbsp; &nbsp;win = new Window('window_id', {resizable: false, minimizable: false, maximizable: false, opacity: 0, className: &quot;alphacube&quot;, title: &quot;Edition&quot;, width:300, height:300}); &nbsp; &nbsp;var pars = 'getModif='+suivi_id+'&amp;idStage='+idStage+'&amp;promo='+promo; &nbsp; &nbsp;win.setAjaxContent('modules/mod.suivis.php', {method: 'post', parameters: pars}); &nbsp; &nbsp;win.toFront(); &nbsp; &nbsp;win.setDestroyOnClose(); &nbsp; &nbsp;win.showCenter(); } Sauf que moi le contenu provenait d'une requete AJAX

11. Anonymous le mardi 24 avril 2007, 11:07 #permalien

J'ai réussi à l'intégrer mais elle s'affiche à l'ouverture du site alors que je voudrait qu'elle ne s'affiche que lorsque l'on clique sur le bouton/map du menu...

Pensez à vous inscrire !