Archive pour le ‘Jquery’ catégorie

Humour : ecran de choix du navigateur internet

7 avril 2010

Sachant que les utilisateurs de Windows (Seven, Vista et XP) vont devoir choisir leur futur navigateur, permettez moi de vous aider un peu dans votre choix :
Ecran de choix 😉

Pour cette fois, choisissez Internet Explorer… mais pas (forcément) après, hein ! 😉

Savez-vous planter IE6 à la mode jQuery ?

1 avril 2010

Un plugin jQuery pour planter IE6, marrant non ?
[cc lang=’js’ width=’100%’]
/**
* jQuery Crash (http://mktgdept.com/jquery-crash)
* A jQuery plugin to crash IE6.
*
* v0.0.2 – 5 March 2010
*
* Copyright (c) 2009 Chad Smith (http://twitter.com/chadsmith)
* Dual licensed under the MIT and GPL licenses.
* http://www.opensource.org/licenses/mit-license.php
* http://www.opensource.org/licenses/gpl-license.php
*
* Use $.crash();
*
**/
;jQuery.crash=function(x){for(x in document.open);};
[/cc]

jQuery : cocher tout / tout décocher (checkbox)

16 mars 2010

Si vous avez plusieurs cases à cocher à la suite, il peut être intéressant de proposer au visiteur de les cocher toutes en un clic et de les décocher de la même façon.
Démo ici
voici donc quelques checkbox, et au dessus une case cocher tout dont le texte est entouré d’un span que l’on mettra à jour cocher/décocher
[cc width=’100%’ lang=’html’]

Cocher tout

  • Case 1
  • Case 2
  • Case 3

[/cc]
N’oubliez pas d’inclure le fichier jQuery
[cc width=’100%’ lang=’js’]

[/cc]
Et maintenant le code jQuery.
[cc width=’100%’ lang=’js’]
$(document).ready(function() {
$(‘#cocheTout’).click(function() { // clic sur la case cocher/decocher

var cases = $(« #cases »).find(‘:checkbox’); // on cherche les checkbox qui dépendent de la liste ‘cases’
if(this.checked){ // si ‘cocheTout’ est coché
cases.attr(‘checked’, true); // on coche les cases
$(‘#cocheText’).html(‘Tout decocher’); // mise à jour du texte de cocheText
}else{ // si on décoche ‘cocheTout’
cases.attr(‘checked’, false);// on coche les cases
$(‘#cocheText’).html(‘Cocher tout’);// mise à jour du texte de cocheText
}

});

});
[/cc]

Menu Yvette Horner en jQuery (menu accordéon)

15 mars 2010

Voici comment créer un menu accordéon avec jQuery. On crée des titres (h3) à qui l’on affecte la classe menuYvette et sous chaque titre on créé une div avec la classe divEtte.
Démo ici.
[cc lang=’html’ width=’100%’]

Mon contenu à afficher
Coucou ici le contenu 2
Enfin à moi ! le contenu 3

[/cc]

Chevelure d’Yvette oblige, j’ai pris du orange
[cc lang=’css’ width=’100%’]
h3.menuYvette{
background-color : #D64203;
cursor:pointer;
}
[/cc]
cursor:pointer; est important car il permet d’obtenir la « main » au survol des titres menuYvette ce qui permet au visiteur de savoir qu’il peut cliquer !

Le but est de masquer au démarrage l’ensemble des div de contenu divEtte pour ne les afficher qu’au cas par cas, en fonction du clic sur le titre correspondant.
[cc lang=’js’ width=’100%’]
$(document).ready(function() {
$(‘.divEtte’).hide(); // Au départ on masque toutes les div de contenu « divEtte »

$(‘.menuYvette’).click(function() { // action sur clics d’élément de classe menuYvette

$(this).siblings(‘div:visible’).slideUp(); // on enroule les soeurs (siblings) « divEtte »
if($(this).next(‘div:hidden’)){
$(this).next(‘div:hidden’).slideDown(); // on déroule le contenu s’il était masqué
}

});

});
[/cc]
Merci Yvette !
yvette horner

Article fortement inspiré du blog de Arnaud Koncina, j’ai simplement ajouté la possibilité de rétracter la div en re-cliquant sur le même titre et mis des classes sur les titres pour rendre à Yvette ce qui est à Yvette 😉

Accès à l’élément sélectionné d’un select en jQuery

10 mars 2010

Pour accéder facilement à la sélection d’un select vous pouvez utiliser jQuery
démo ici
[cc lang=’html’ width=’100%’]

[/cc]

on récupére la valeur à chaque changement de sélection avec la méthode .change()
[cc lang=’js’ width=’100%’]
$(document).ready(function(){
$(‘#monselect’).change(function () {
v = $(« #monselect option:selected »).val();
t = $(« #monselect option:selected »).text();
$(‘#retour’).html(v+ » « +t);

})
.trigger(‘change’);

})

[/cc]
.val() récupère le value de l’élement sélectionné, alors que .text() renvoie le texte affiché dans le select.

Sans jQuery on pourrait utiliser une fonction appelée sur l’évènement onchange du select.
[cc lang=’js’ width=’100%’]
function recup(){
document.getElementById(‘monselect’).options[document.getElementById(‘monselect’).selectedIndex].value;
}
[/cc]

Alterner les couleurs des lignes d’un tableau (PHP ou jQuery)

9 mars 2010

Pour faciliter la lecture d’un tableau il est fréquent d’alterner la couleur de chaque ligne.
Le principe est d’attribuer aux lignes paires un style et un autre aux lignes impaires.

En PHP

Voir la démo
Créons tout d’abord 2 styles.
[cc lang=’css’ width=’100%’]
.style1{
background-color : #F2F1EB;
}
.style2{
background-color : #DAE9F4;
}
[/cc]

En PHP on utilise le modulo % (reste de la division) . Le modulo d’une division par 2 permet de savoir si la ligne est paire ou impaire, il ne reste plus qu’à affecter un style pour chacun des 2 cas.
[cc lang=’php’ width=’100%’]
echo « 

« ;
for($i=1; $i < = 10; $i++){ if($i%2){ $classe = "style1"; }else{ $classe = "style2"; } echo "

< /tr> « ;
}
echo « 

ligne $i ligne $i

« ;
[/cc]
On affecte à la variable $classe l’un ou l’autre des styles et on l’applique à la ligne.

En jQuery

Voir la démo
Partons du même tableau.
[cc lang=’php’ width=’100%’]
echo « 

« ;
for($i=1; $i < = 10; $i++){ echo "

< /tr> « ;
}
echo « 

ligne $i ligne $i

« ;
[/cc]
et appliquons un style différent selon que les lignes soient paires (even) ou impaires (odd)

[cc lang=’js’ width=’100%’]
$(document).ready(function(){
$(‘table.monTab tr:nth-child(even)’).addClass(‘style1’);
$(‘table.monTab tr:nth-child(odd)’).addClass(‘style2’);
});
[/cc]
On applique donc le style style1 à chaque ligne paire (even) et le style2 à chaque ligne impaire (odd) du/des tableau(x) dont la classe est monTab grâce à la méthode addClass de jQuery, qui ajoute une classe à un élément.

L’utilisation de nth-child permet d’éviter que jQuery se perde si vous avez plusieurs tableaux dans votre page, en effet sinon il continu d’attribuer les couleurs sans repartir à zéro. Ainsi la première ligne du tableau 1 pourrait être bleue alors que la première ligne du tableau 2 serait blanche.

Mementos jQuery

4 mars 2010

Voici quelques mémento jQuery que j’ai trouvé sur le net :

Mémento jQuery 1.4

Version HTML
Version PDF

jquery.cheatsheet.1.4
Créé par Future Colors.

Mémento complet jQuery 1.3

par Antonio Lupetti

memento jQuery

memento jQuery

Source : http://woork.blogspot.com/2009/09/jquery-visual-cheat-sheet.html

Mémento pour la balise select

http://comp345.awardspace.com/select_element_cheatsheet.pdf

memento_select

memento_select

Trouvé sur le blog myphpetc.com

Extension firefox jQuery

jQuery Menu de Simon Lang

jQuery menu

jQuery ou comment simplifier les requêtes Ajax

2 mars 2010

Avant il fallait jongler avec XMLHttpRequest, bien sûr ça fonctionne très bien, mais une fois qu’on a essayé jQuery difficile de faire machine arrière !
En effet ce simple code ci dessous permet d’envoyer la variable js info à page.php avec la méthode POST, pendant l’envoi et en attendant le retour de page.php, l’image load.gif est affichée dans le div chargement et enfin si tout s’est bien passé, retourPHP affiche ce que renvoi page.php.

Démo du script

[cc lang= »js » width=’100%’ line=’20’]
$.ajax({
type : « POST »,
url : « page.php »,
data : « info = »+info,
send : $(‘#chargement’).html(« chargement« ),
error :function(msg){
alert( « Erreur :  » + msg );
},
success : function(data){
$(‘#retourPHP’).html(data);
}});
[/cc]

Tout d’abord pour faire patienter l’internaute vous pouvez créer votre gif de chargement avec AjaxLoad

Mise en place du script :

D’abord insérez l’appel à jQuery
[cc lang= »js » width=’100%’]

[/cc]
Ensuite on va créer un champ monChamp qui contiendra les données à envoyer, un bouton envoiAjax et une balise div retourPHP qui renverra la valeur saisie dans le champ
[cc lang= »html » width=’100%’]

[/cc]
Avec jQuery on surveille le click sur envoiAjax et on récupère le value de monChamp que l’on stocke dans la variable info (le reste est expliqué au début de l’article)
[cc lang= »js » width=’100%’]

[/cc]

et page.php y’a quoi dedans ? pas pas grand chose on se contente d’afficher ce que l’on a reçu (sans vérification de contenu : ni isset, ni empty ni rien…)

[cc lang= »php » width= »100% »]
< ?php echo "reception de : " . $_POST['info']; ?>
[/cc]
et voilà !

Ajaxload créez votre gif de chargement Ajax

2 mars 2010

Vous utilisez ajax et vous avez besoin d’un petit gif animé pour occuper l’internaute pendant le chargement de votre script ? ne cherchez plus ! créez-le en quelques secondes avec http://www.ajaxload.info/

ajax-loader

Ajax-loader

SlideToggle : simplifiez vous la vie pour afficher et masquer un élément

2 mars 2010

Dans la série jQuery simplifie moi la vie, voici la méthode .slideToggle.

Voir la démo

Imaginez que vous avez un div monBloc que vous voulez masquer ou afficher en fonction du clic sur le lien displayBloc
[cc lang=’html’ width=’100%’]
Contenu masqué

Lorem Ipsum

[/cc]

Plutôt que de s’amuser à appeler une fonction afficheMasque sur l’évènement onclick du lien pour un résultat sans animation comme ci-dessous :
[cc lang=’javascript’ width=’100%’]
function afficheMasque(){
if(document.getElementById(‘monBloc’).style.display==’none’){
document.getElementById(‘monBloc’).style.display=’block’;
}else{
document.getElementById(‘monBloc’).style.display=’none’;
}
}
[/cc]

Utilisez slideToggle pour obtenir la même chose avec une animation.
[cc lang=’javascript’ width=’100%’]
$(document).ready(function(){
$(« #displayBloc »).click(function () {
$(« #monBloc »).slideToggle(« slow »);
});
});
[/cc]

La vitesse d’apparition/disparition du bloc est déterminée par ‘fast’ ou ‘slow’ ou être spécifié en millisecondes.

N’oubliez pas d’inclure l’appel à jQuery dans la balise HEAD.
[cc lang=’html’ width=’100%’]

[/cc]

Pour aller plus loin, vous pouvez également utiliser toggleClass qui vous permet de permuter une classe (ajouter/retirer la classe à l’élément). Ainsi on peut afficher une flèche haut/bas (ou +/-) en fonction de l’affichage du contenu.
Pour cela il faut ajouter une classe au lien
[cc lang=’html’ width=’100%’]
Contenu masqué

Lorem Ipsum

[/cc]

[cc lang=’css’ width=’100%’]
.deroule{
display : block;
width : 120px;
background: url(fleches.gif) no-repeat right -50px;
}

.enroule {
background: url(fleches.gif) no-repeat right 8px;
}
[/cc]

Ensuite on ajoute la méthode toggleClass qui va ajouter ou supprimer la classe enroule et donc dans l’exemple décaler l’image contenant les flèches
[cc lang=’javascript’ width=’100%’]
$(document).ready(function(){
$(« #displayBloc »).click(function () {
$(« #monBloc »).slideToggle(« slow »);
$(this).toggleClass(« enroule »); return false;
});
});
[/cc]

Plus d’infos sur la documentation de jQuery