Bidouilleur

jQuery Gestures est un plugin jQuery qui capture les mouvements de souris (clic gauche enfoncé ou non) de vos visiteurs; aussi ce système peut être intéressent pour réaliser des interfaces compatibles avec les nouveaux écrans tactiles ( de bureaux ou mobiles ).

Il détecte les différents mouvements possibles : vers la gauche, vers la droite, vers le haut, le bas, mouvements circulaires, zigzag…etc; ces mouvements deviennent ainsi des évènements .

Pour tester ce plugin c’est ici.

Exemple de code :

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

$(function(){
 
	$('*').gestures({
 
		callback:function(gesture)
		{
			if(gesture.string == 'circle')
			{
				alert('Circled!');
			}
			else if(gesture.string == 'zig-zag')
			{
				alert('Zig-Zagged!');
			}
		}
 
	});
 
});

Twitter ce post

C’est officiel depuis quelques jours : les robots de Google (les GoogleBots) suivent maintenant les liens JavaScript !

C’est à dire qu’ils savent interpréter le JavaScript qui se trouve sur les attributs onclick d’apparement toutes les balises (<a>,<div>,..)

Rappelons que cette pratique permettait de cacher un lien au robots de Google, soit pour éviter de donner son PageRank à une autre page, soit pour cacher des liens « vendus » ( créé contre rémunération ) qui ne sont pas recommandés par Google..

Voici différents liens qui pourront être suivis pas le Google bot:

1
2
3
4
5
6
7

<div onclick="document.location.href='http://foo.com/'">
 
<tr onclick="myfunction('index.html')">
 
<a href="#"onclick="myfunction()">new page</a>
 
<a href="javascript:void(0)" onclick="window.open('welcome.html')">open new window</a>

Source Vanessa Fox

Ceci va aussi permettre  une meilleure indexation des pages qui utilisent l’Ajax à tout-va.

Conclusion  : faites des pages pour vos visiteurs et non pas pour le Google Bot puisque celui-ci devient petit à petit un visiteur à part entière.

Twitter ce post

Après quelques semaines de repos, jQuery UI passe en version 1.7.2!

Au programme :

• Correction de bugs
• Nouveaux Thèmes

Même si cette version n’apporte pas plus que des corrections de bugs(mis à part les nouveaux thèmes), cela fait quand même plaisir de voir que jQuery UI reprend de l’activité

Pour voir les changements depuis la dernière version c’est ici.

Twitter ce post

jPlayer est un plugin jQuery qui permet de lire des MP3 dans votre page Web!

Et là je vois la question venir : « Comment ce fait-il que Javascript se mette du jour au lendemain à lire les MP3 ?? »

Et bien en fait ce plugin se sert d’un flash invisible sur la page qui permet la lecture des MP3!

Plusieurs styles de lecteurs sont possibles :

• Lecteur simple avec gestion du son.
• Lecteur de playlist
• Lecteur texte
• Lecteur avec barre de progression (jolijoli)
• Et le dernier arrivé : Lecteur compatible avec les thèmes  jQueryUI

Pour le tester et télécharger c’est ici.

Twitter ce post

En anglais FishEye ou en français Oeil de poisson c’est cet effet qui est utilisé pour le menu de Mac OS.

Ce plugin jQuery nommé jqDock donne un effet  loupe au passage de la souris sur les icônes d’un menu.

Télécharger ce plugin.

Twitter ce post

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

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