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]
Articles Taggés ‘Jquery’
Savez-vous planter IE6 à la mode jQuery ?
1 avril 2010jQuery : cocher tout / tout décocher (checkbox)
16 mars 2010Si 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]
Accès à l’élément sélectionné d’un select en jQuery
10 mars 2010Pour 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 2010Pour 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 «
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 «
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 2010Voici quelques mémento jQuery que j’ai trouvé sur le net :
Mémento jQuery 1.4
Créé par Future Colors.
Mémento complet jQuery 1.3
par Antonio Lupetti
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
Trouvé sur le blog myphpetc.com
Extension firefox jQuery
jQuery ou comment simplifier les requêtes Ajax
2 mars 2010Avant 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.
[cc lang= »js » width=’100%’ line=’20’]
$.ajax({
type : « POST »,
url : « page.php »,
data : « info = »+info,
send : $(‘#chargement’).html(« « ),
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 2010Vous 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/