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

Du libre et du sport

Espace virtuel d'un bricoleur du net

Tag - jQuery

Fil des billets - Fil des commentaires

vendredi, novembre 9 2007

L'effet accordéon en jQuery (suite)

Par Osku le vendredi, novembre 9 2007, 17:51 - Php, Css, JavaScript, etc.

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, novembre 7 2007

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

Par Osku le mercredi, novembre 7 2007, 10:47 - Php, Css, JavaScript, etc.

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

vendredi, août 24 2007

Thème DC2 : Wsuper

Par Osku le vendredi, août 24 2007, 16:36 - Php, Css, JavaScript, etc.

C'est le nom du thème qui habille actuellement le blog.
Ce thème était en travaux depuis un bon moment et j'espère être arrivé à truc sympathique. Vous me direz :-) .

Mini screenshot :

Mini Screenshot Wsuper

Quelques Features :

  • Du jquery sur les classes .message et .error - çe me fait penser que les couleurs sont assez violentes.
  • L'utilisation de la fameuse pre2ol.js d' Olivier - bien pratique pour ceux qui codent beaucoup dans les billets dotclear.
  • Accès à la feuille de style du thème via les paramètres des thèmes : onglet Configuration du thème disponible après la sélection du thème.
  • Si vous êtes intéressés, une version 3 colonnes est également disponible.


Ce thème est livré sous licence libre GPL

Mise à jour du 28/09/07

  • La feuille de style du package a été mise à jour avec la css utilisée actuellement sur le site.

Mise à jour du 07/01/08

  • Ajout de 3 gabarits (layout). Accéder à la configuration du thème pour plus d'informations.

Mise à jour du 18/06/08

Mise à jour du 07/07/08

  • Mise à disposition de la version 1.5beta3
    • Compatible Menu Freshy, Subscribe to Comments
    • Ajout de la description du blog dans le _top.html
    • Plusieurs bugs corrigés

23 commentaires aucun rétrolien 6 annexes

- page 2 de 3 -