Aller au contenu | Aller au menu | Aller à la recherche

Du libre et du sport

Espace virtuel d'un bricoleur du net

Monde du Libre › Monde du Web › JavaScript

Fil des billets - Fil des commentaires

jeudi 27 décembre 2007

Mettre en avant certains commentaires avec jQuery

Par Osku le jeudi 27 décembre 2007, 14:58

Avec jQuery il est possible de mettre en avant certains de vos commentateurs.
Pour les commentaires filtrés sur l'adresse web utilisée. On ajoute une classe aux éléments dt qui contient les infos du commentateur et au contenu du commentaire dd

$("div#comments dt a[@href*='dotclear']") .parents("dt") .next("dd") .addClass("dotclearComment");
$("div#comments dt a[@href*='dotclear']") .parents("dt") .addClass("dotclearComment");

Pour cet exemple, j'imagine qu'on utilise un thème avec la structure <dl>, <dt>, <dd>, <dt>, <dd> ...
Ensuite, il suffit d'ajouter une règle dans la feuille style :

dt.dotclearComment,dd.dotclearComment{color:green;background-color:black}

Il est certainement possible de plouguéniser la chose sans utiliser le framework jQuery ;-)

un commentaire un rétrolien

mardi 13 novembre 2007

jQuery : plugin color

Par Osku le mardi 13 novembre 2007, 15:07

Bon, on continue dans la série des billets sur jQuery :-).
L'effet .animate permet de faire des trucs déjà sympas sauf de jouer sur les couleurs...
Je cherche et je découvre un plugin jQuery.color.js qui permet de jouer sur les couleurs des éléments css :

  • la couleur du text via 'color'
  • la couleur du fond via 'backgroundColor'
  • ou encore les différentes bordures via 'borderBottomColor', 'borderLeftColor', 'borderRightColor' et 'borderTopColor'

Le plugin semble uniquement compatible avec jQuery version 1.2 ou supérieure.

Exemple

$(document).ready(function(){
     $("#go").click(function(){
     $(".block").animate( { backgroundColor:'#008CFF', color:'#EFF8FF', borderLeftColor:'#000'}, 2000)
                       .animate( { backgroundColor:'#fff', color:'#444', borderLeftColor:'yellow'}, 2000);
     });
});

Ceci est un gros bloc qui change de couleurs si vous cliquez sur le bouton

Epatant, non ?

4 commentaires aucun rétrolien une annexe

vendredi 9 novembre 2007

L'effet accordéon en jQuery (suite)

Par Osku le vendredi 9 novembre 2007, 17:51

Afin d'éviter l'effet Accordéon sur le bloc (#div) sélectionné, la solution suivante m'a été donnée sur le groupe de discussion jQuery (merci Glen)

	$(document).ready(function(){
		$("#blogextra ul:not(:first)").hide();
		$("#blogextra h2").click(function(){
			var target = $(this).next('#blogextra ul')
			$("#blogextra ul:visible").not(target).slideUp();
			target.slideToggle();
	});
		$("#blogextra h2").mouseover(function () {
			$(this).css("cursor","pointer");
		});
	});

Le bloc se ferme mais ne se réouvre pas dans la foulée - c'est mieux.

Limites demeurantes :
  • Les widgets Liens et Liens de navigation fonctionnent pas : la magie jQuery fonctionnent seulement pour des widgets dont la structure est <div><h2></h2><ul></ul></div>
  • Le widget Texte ? bin ça dépend ! voir point précédent...
  • C'est tout (enfin je crois) ;-)

2 commentaires aucun rétrolien

mercredi 7 novembre 2007

$("blog").addjQuery(function() {$("#blogextra").accordeon();});

Par Osku le mercredi 7 novembre 2007, 10:47

Gni ?
Regardez sur le côté :-) J'ai ajouté un petit effet visuel pour l'affichage de la zone bandeau extra (#blogextra dans le squelette) : ça coulisse entre les widgets.

Et ce n'était vraiment pas compliqué à mettre en place vu qu'une documentation de qualité existe.

En jQuery, on met simplement en place le bazard avec :

	$(document).ready(function(){
		$("#blogextra ul:not(:first)").hide();
		$("#blogextra h2").click(function(){
			$("#blogextra ul:visible").slideUp("slow");
			$(this).next().slideDown("slow");
			return false;
		});
		$("#blogextra h2").mouseover(function () {
			$(this).css("cursor","pointer");
		});

Petites explications de code

  1. au chargement de la page
  2. caches moi (.hide) toutes les zones <ul> de la div #blogextra (#blogextra ul) sauf la première (:not(:first))
  3. ajoutes moi une propriété "click" sur les titres <h2> de la div #blogextra
  4. quand je clique sur un titre <h2>, caches moi avec un effet lent 'slideUp' (slideUp("slow")) la zone <ul> de la div #blogextra qui était visible (#blogextra ul:visible)
  5. et aussi déroules moi lentement (.slideDown("slow")) la zone <ul> qui suit le titre <h2> cliqué.
  6. le return false stoppe la propagation et annule l’action en cours. (plus d'infos)

Les trois dernières lignes nous permettent de changer l'aspect du curseur de la souris au survol des titres <h2> de la div #blogextra : tout devient intuitif ;-)

4 commentaires un rétrolien

- page 1 de 2