Popin en jQuery

Posté le 20 août 2010 dans la caégorie stage par annelaure.hoareau

Pour créer une popin en jQuery il y a plusieurs façon de proc&egarv;der, pour cette article je vais vous parler du plugin Impomptu de jQuery que j’utilise actuellement. Vous pouvez récupérer le code du plugin ici.

Ce plugin contient plusiseurs options qui vous permettrons de personnaliser votre popin, vous pouvez changez le CSS, personnaliser les boutons …

Pour une popin toute simple : $.prompt(’votre texte a afficher’);

Pour une popin avec plusiuers états le code est plus long certes mais loin d’être compliqué:


1. function openprompt(){
2. var statesdemo = {
3. state0: { // Premier état
4. html:’test 1.test 1..test 1…’, // on ajoute du text
5. buttons: { Cancel: false, Next: true }, // Initialisation des boutons
6. focus: 1,
7. submit:function(v,m,f){
8. if(!v) return true;
9. else
10. $.prompt.goToState(’state1′);
11. return false;
12. }
13. },
14. state1: {
15. html:’test 2′,
16. buttons: { Back: -1, Exit: 0 },
17. focus: 1,
18. submit:function(v,m,f){
19. if(v==0) $.prompt.close()
20. else if(v=-1)
21. $.prompt.goToState(’state0′);
22. return false;
23. }
24. },
25. state2: {
26. html:’This is the next one
test 3′,
27. buttons: { Back: true, Done: false },
28. submit:function(v,m,f){
29. if(!v)
30. return true;
31. else $.prompt.goToState(’state1′);//go back
32. return false;
33. }
34. }
35. };
36. $.prompt(statesdemo);} // On lance le plugin
Vous pouvez voir le résultat de cette example ici.

Ceci n’est qu’un petit exemple des possibilité de ce plugin, pour en savoir plus et voir plus d’exemples aller voir le tuto (en anglais bien sûr) ici.

Tags :

Commentaires fermés.