Dator Blog

Bonjour à tous,

Aujourd’hui je vais vous présenter ModalBox , une boite de dialogue entièrement codé en Javascript et respectant les « normes»  du Web 2.0.

Ce petit bijoux est basé sur Prototype JS , un des meilleurs framework JS sur le web , et Scriptaculous , une librairie d’effets Javascript .

De façon très simple, ajouter à vos pages des boites de dialogues à votre site internet .

De plus quand ces boites sont activés, la page qui est derrière deviens non cliquable (depuis le temps que je cherche à faire ça ! (prochainement sur www.dator.fr pour la petite astuce ) ! Ces boites ressemble à cela (cliquez sur le lien ) : ModalBox Exemple

Pour que la Modal Box fonctionne correctement, n’oubliez pas d’inclure ces 4 éléments dans votre source HTML :

1. Le css de la modalbox (modalbox.css).
2. La librairie Prototype (prototype.js).
3. La librairie Scriptaculous (scriptaculous.js?load=effects (pour charger les effets)).
4. Le javascript de ModalBox (modalbox.js).

Avec ces 4 éléments il est très simple de créer ces propres boites modales.

Je vous met le petit script a disposition ici : http://www.box.net/shared/exbvmv2o8k

(l’ensemble du code utilisé est commenté pour plus de clarté).

Et le lien pour télécharger la librairie ModalBox : http://www.wildbit.com/labs/modalbox/
Bon Javascript à tous !

• 15 commentaires

Aujourd’hui je vais vous présenter Ext-JS, Le framework Javascript du moment !

Cette librairie est très complète et permet de faire des composant windows-like comme par exemple une datagrid éditable (voir l’exemple), des onglets (voir l’exemple) ou bien des formulaires dynamique (voir l’exemple) ou encore bien d’autres !

Couplé avec de l’Ajax et du JSON (notation Objet pour le Javascript) , Ext-JS s’impose comme une des référence dans le monde du Javascript .
Suivrons des tests de cette librairie avec des exemples concrets !

Le site : http://extjs.com/

Bon Javascript à tous

• 4 commentaires

De nombreux développeurs qui créent des applications orientées objet, créent un fichier source par définition de classe.

L’inconvénient majeur de cette méthode est d’avoir à écrire une longue liste d’inclusions de fichier classes au début de chaque script : une inclusion par classe.

En php5, c’est finit ! La méthode __autoload() a été créée et permet le chargement des classes suivant les besoins de l’application .
En effet, si l’application a besoin d’une classe précise, la méthode __autoload() va charger la classe dont elle a besoin.

Voici comment l’utiliser :

function __autoload($className) {
      require_once $className . '.class.php';
}

Et le tour est joué ! pas mal non?

Attention : vérifier que toutes vos classes ce trouvent au même endroit et quelle se termine par class.php (ou autre, mais respectant la syntaxe de ce que vous avez mis dans la déclaration de la fonction).

Si vos classes ne sont pas dans le même répertoire, il faudra modifier le include_path de php

• 0 commentaire

Je pense que vous avez le même soucis que moi … comment faire des conteneurs CSS avec les coins arrondis ? non ?

Bon si c’est oui ! J’ai la solution ! Et la solution c’est la propriété moz !

Voici les propriétées CSS :

#content{
 	-moz-border-radius-topright: 20px;
 	-moz-border-radius-bottomright: 20px;
 	-moz-border-radius-bottomleft: 20px;
 	-moz-border-radius-topleft: 20px;
 	width:100px;
 	background-color:#FDD99B;
 	border-color:#D9BB7A;
 	border-style:solid;
 	border-width:1px 5px 5px 1px;
 	padding:1ex 1ex 1ex 1ex;
 	text-align:justify;
 	vertical-align:middle;
 }

Télécharger la source

Et voila, un joli petit effet à la Ubuntu !

Attention cette propriété est uniquement compatible avec Firefox (ou autre navigateur qui respecte les normes w3c )

• 5 commentaires

Un article retrouvé de mon ancien blog.

Bon, je viens de me rendre compte qu’une propriété CSS nommée focus existait … je sais je suis en retard mais bon mais je me suis souvent demandé comment faisait certains sites pour changer le style de leurs balises CSS au moment ou le focus etait dessus…

input:focus, select:focus, textarea:focus

Même pas besoin de javascript ! Tout ce fait tout seul ! MAGIE

Exemple

Style.css

 input, select, textarea {
        border-top:1px solid #666;
        border-left:1px solid #666;
        border-bottom:1px solid #ccc;
        border-right:1px solid #ccc;
}
input:focus, select:focus, textarea:focus {
        background-color: #cddefd;
        border:1px solid #248;
         color:#000;
}

Télécharger la source

Et voila !
Si c’est pas beau ça !

• 1 commentaire

Certain le connaisse surement, d’autre pas encore: Voici le Pingoo Gadget . Voici une petite description :

« Pingouine du jour « , un gadget pour vous messieurs Pingoo est un pote. Son site www.pingoo.com parle de choses et d’autres, et nous le connaissons depuis des lustres. Sur son site, il y a les « pingouines du jour» . Rien de porno ni de sale, non juste des petites photos de femmes. Elles sont jolies et les photos aussi. Un mollet, une jambe, un début de décolleté, parfois un sein qui se dévoile mais c’est toujours de l’art. La pingouine du jour s’affiche….et après toutes les autres s’affichent de façon aléatoire. A vous de choisir la vitesse de rotation dans le petit panneau de configuration des gadgets (de 30 secondes à une heure)

Mais pour moi et mes collèges de SUPINFO, on trouvais que 30 secondes à attendre pour voir une autre pingouine c’était beaucoup trop. Après un petit quart d’heure de recherche, j’ai trouvé un bon compromis…

Déjà (pour les vista users only), installez le gadget sur votre sidebar.

Ensuite, copier coller ce chemin dans votre explorateur de fichier et changez uniquement VotreNom par le nom que vous avez mis sur votre vista.

C:\Users\VotreNom\AppData\Local\Microsoft\Windows Sidebar\Gadgets

Ensuite ouvrez le fichier settings.html et cherchez la ligne 80, vous devez tomber sur cela :

30 secondes
minutes
5 minutes
10 minutes
30 minutes
heures

Il suffit de rajouter dans les premieres options :

1 seconde

Vous pouvez définir ce que vous voulez dans l’attribut value de l’option de selection !

Enfin, enregistrez et aller dans les paramètres de votre gadget , vous allez voir appaitre un beau petit 1 seconde et magie ! Les pingouines défiles vites !!

Bon courage !

• 0 commentaire