Bidouilleur

jQuery Context Menu Plugin est comme son nom l’ indique un plugin jQuery qui va vous permettre d’intégrer à votre site un menu contextuel. Ce menu s’affichera par exemple lorsqu’ un utilisateur fera un clic droit sur votre page ou une zone définie de votre page.

Code HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<ul id="myMenu" class="contextMenu">
    <li class="edit">
        <a href="#edit">Edit</a>
    </li>
    <li class="cut separator">
        <a href="#cut">Cut</a>
    </li>
    <li class="copy">
        <a href="#copy">Copy</a>
    </li>
    <li class="paste">
        <a href="#paste">Paste</a>
    </li>
    <li class="delete">
        <a href="#delete">Delete</a>
    </li>
    <li class="quit separator">
        <a href="#quit">Quit</a>
    </li>
</ul>

Code jQuery:

1
2
3
4
5
6

$(document).ready( function() {
   $("#selector").contextMenu({menu: 'myMenu'},
      function(action, el, pos) {
         alert('Action: ' + action);
   });
});

Twitter ce post

PHPjs est un projet dont le but est de recréer les fonctions PHP les plus utilisées, en fonction Javascript. PHPjs comprend pour l’instant près de 300 fonctions converties, ce qui n’est pas négligeable! Sans compter que le projet est souvent mis à jour. Si vous êtes développeur PHP, cette librairie devrait vous ravir!

Télécharger PHPjs

Documentation

Twitter ce post

GcColor est un plugin jQuery qui vous permet d’ agrémenter vos champs d’un color picker. Comme vous pouvez le voir ci-dessous, ce plugin est pratiquement digne de notre bon vieux photoshop.

Code jQuery:

1

$('input.color').gccolor();

A noter que ce plugin s’ appui sur un autre plugin de color picker qui se nomme tout simplement Color picker.

Twitter ce post

La beta de Safari 4 vient de sortir il y a quelques jours, et les premiers résultats des tests sont plutôt concluants, en effet le nouveau moteur javascript baptisé Nitro surpasse tous les autres navigateurs , chrome compris, comme vous pouvez le voir ci-dessous.

Néanmoins on peut regretter le manque de nouveauté au niveau des fonctionnalités, en effet on y retrouve la plupart, voir la totalité des nouveautés amenées par Chrome(onglets, page d’ accueil des sites les plus visités,navigation privée…etc).

Mais malgrès ce petit manque de nouveauté croustillante, Safari 4 vient se placer en leader sur ce marché, avec un respect des strandarts plus que parfait avec 100/100 au test Acid 3, et une rapidité d’affichage des pages et de traitement du Javascript bien au dessus de tous ces concurrents.

Twitter ce post

Voici un “cheat sheet” ou mémo CSS pour vous aider dans vos longues heures d’intégration XHTML/CSS.

Et en voici un 2ème.

Twitter ce post

Voici un mini mode opératoire sans acune prétention pour créer simplement et rapidement un plugin pour le célèbre RTE TinyMCE.

• Téléchargez la dernière version développement de TinyMCE sur cette page.

• Décompressez le zip dans le dossier voulu.

• Affichez l’éditeur dans une page  ou prenez la page d’exemple : « tinymce/examples/index.html », pour tester l’éditeur de base.

• Copiez le dossier « example » du dossier « tinymce/jscripts/tiny_mce/plugins » dans le même dossier et renommez le avec le « nom de votre plugin« .

• Copiez/collez l’image qui servira d’icône dans la barre d’outil de TinyMCE dans le dossier « img » de votre nouveau plugin.(« tinymce/jscripts/tiny_mce/plugins/nom_de_votre_plugin/img« ), et renommez l’image du nom de votre plugin.

• Supprimez « editor_plugin.js » dans le dossier de votre plugin.

• Puis renommez « editor_plugin_src.js » en « editor_plugin.js »(En effet l’ancien editor_plugin.js été compressé et donc non éditable.)

• Ouvrez « editor_plugin.js » et remplacez tous les mots « example » par « Nom de votre plugin ».

Votre plugin d’exemple est prêt, pour l’activer il vous suffit de mettre le nom de votre plugin dans le code javascript d’affichage de votre éditeur à ces 2 endroits:

13

plugins : "nom_de_votre_plugin,safari,pagebreak,style,la

15
16

// Theme options
theme_advanced_buttons1 : "nom_de_votre_plugin,save,newdocument,|,bo...

Vous pouvez maintenant voir votre plugin fonctionner.(Videz votre cache navigateur si nécessaire.)

Pour modifier le dialogue du plugin il vous faudra modifier le fichier « dialog.htm » de votre dossier plugin.

Et pour interagir avec l’éditeur je vous conseille de consulter la documentation des fonctions proposées par TinyMCE.

Twitter ce post

Le plugin Captify vous permet de légender vos photos de bien belle manière, en effet le texte de description de la photo est certes caché mais il s’ affiche au survol de la photo dans un fond en semi-transparence.En voici un avant goût ci-dessous.

Démo.

Téléchargement.

Code HTML:

1
2

<img src="image.jpg" class="captify" rel="legende1" />
<div id="legende1"> La légende de mon image .</div>

Code jQuery:

1
2
3
4
5
6
7
8
9
10
11
12

$('img.captify').captify({
		// toutes ces options sont facultatives
		speedOver: 'fast',
		speedOut: 'normal',
		hideDelay: 500,	
		animation: 'slide',		
		prefix: '',		
		opacity: '0.7',					
		className: 'caption-bottom',	
		position: 'bottom',
		spanWidth: '100%'
	});

Twitter ce post

Voici un « cheat sheet » du célèbre système de gestion de contenu DRUPAL pour sa version 6.

Twitter ce post

Pas besoin de vous présenter ce langage, ce petit mémo qui recense les fonctions les plus utilisées de PHP devrait vous être utile si vous ne les connaissez pas encore sur le bout des doigts.

Twitter ce post

Le plugin jQuery mbGallery va vous permettre de réaliser de jolis diaporamas photo de vos albums sur votre site.

Le diaporama est entièrement configurable, en voici la preuve par le petit code jQuery d’exemple:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

$(”#g1?).mbGallery( {
   galleryMaxWidth:0,
   galleryWidth:300,
   galleryHeight:300,
   galleryColor:”#333?,
   galleryFrameBorder: 12,
   galleryFrameColor:”#fff”,
   thumbStripPos: “right”,
   thumbStripWidth:250,
   thumbSelectColor: “#fff”,
   thumbOverColor : “#cccccc”,
   thumbStripColor: “#333333?,
   thumbsBorder: 6,
   thumbHeight:70,
   headerOpacity: .8,
   labelColor: “#333333?,
   labelColorDisactive:”#333333?,
   labelTextColor: “#ffffff”,
   labelTextSize:”11px”,
   labelHeight:20,
   startFrom:0,
   fadeTime: 500,
   autoSlide:true,
   autoSize : true,
   slideTimer: 3000,
   iconFolder: “elements/white”,
   startTimer:0
}
)}

Pour le code HTML suivant:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="”g1?" class="”galleryCont”">
     //image1
     <img class="”imgThumb”" src="”LR/01.jpg”" alt="”&quot;" />     //miniature
     <img class="”imgFull”" src="”HR/01.jpg”" alt="”&quot;" />     //photo
<div class="”imgDesc”">Entrance view of the SESC Avenida Paulista, São Paulo, Brazil (Photo by Noah Stolz)</div>
//légende
     //image2
     <img class="”imgThumb”" src="”LR/02.jpg”" alt="”&quot;" />
     <img class="”imgFull”" src="”HR/02.jpg”" alt="”&quot;" />
<div class="”imgDesc”">Fórum Discussões Collaterais - Collateral Talks</div>
//image3
     <img class="”imgThumb”" src="”LR/04.jpg”" alt="”&quot;" />
     <img class="”imgFull”" src="”HR/04.jpg”" alt="”&quot;" />
<div class="”imgDesc”">Runa Islam, “Turn (Gaze of Orpheus)”</div>
</div>

Twitter ce post