Changez de mise en page à la volée avec jQuery

Pour sa liste de Followers, Twitter propose des options très sympa de mises en page variables. Il est possible de présenter cette liste de manière simple ou plus détaillée. Et ce, sans avoir à changer de page. L'idée est enfantine à réaliser, je m'en suis inspiré pour ce tutoriel. En route.

Voir la démo

Ce que je veux

Je veux pouvoir changer la présentation d'une liste d'images sans avoir à recharger la page. Le procédé est très simple. Lorsqu'un bouton est cliqué, un script jQuery ajoute ou supprime une classe de notre liste. Une classe applique la mise en page simple, l'autre détaillée.

Le HTML

Voici le code HTML de la liste d'images et de la barre de boutons.

<ul id="buttons">
    <li><a id="switchToList" href="#">Liste</a></li>
    <li><a id="switchToThumbs" href="#">Miniatures</a></li>
</ul>

<ul id="block">
    <li>
        <img src="images/minou0.jpg" />
        <h3>Photo 1</h3>
        <p>Aliquam convallis sollicitudin purus. Nulla nec felis…</p>
    </li>
    <li>
        <img src="images/minou1.jpg" />
        <h3>Photo 2</h3>
        <p>Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis…</p>
    </li>
    <li>
        <img src="images/minou2.jpg" />
        <h3>Photo 3</h3>
        <p>Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing…</p>
    </li>
    <li>
        <img src="images/minou3.jpg" />
        <h3>Photo 4</h3>
        <p>Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed…</p>
    </li>
    <li>
        <img src="images/minou4.jpg" />
        <h3>Photo 5</h3>
        <p>Aliquam euismod libero eu enim. Nulla nec felis sed leo…</p>
    </li>
    <li>
        <img src="images/minou5.jpg" />
        <h3>Photo 6</h3>
        <p>Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod…</p>
    </li>
</ul>

La liste se nomme #block, la barre de bouton #buttons et les deux liens portent respectivement les id #switchToList et #switchToThumbs. Ces identifiants nous permettrons de mieux styler chacun d'eux et de finalement les contrôler par le script.

La feuille de style

L'intérêt de ce tutorial n'est pas dans l'aspect graphique puisqu'il varie selon les besoins de votre projet. Pour que le tutorial soit complet, je donne tout de même ici ce qui fonctionne dans la démonstration.

Commençons par donner l'aspect de boutons aux deux liens.

Les boutons

#buttons {
    width:410px;
    list-style:none;
    margin:10px auto;
    overflow:hidden;
    list-style:none;
}    
#buttons li {
    float:right;
    margin:1px;
}
#buttons a {
    display:block;
    width:27px; height:22px;
    text-indent:-9999px;
    outline:0;
}

Nous aurons besoin de ces deux images pour en finir la transformation :

#buttons a#switchToList {
    background:url(images/icon-list.png);
}
#buttons a#switchToThumbs {
    background:url(images/icon-thumbs.png);
}

La technique employée pour remplacer un lien texte par une image est expliquée plus en détail dans cet article.

Occupons-nous à présent de la mise en forme de la liste d'images. Sont définis ici les éléments communs aux deux mises en forme, par liste détaillée ou simplifiée par miniatures.

La mise en forme globale

#block {
    width:400px;
    padding:5px;
    list-style:none;
    margin:10px auto;
    overflow:hidden;
    background:#FFF;
    border:1px solid #09F;
}
#block img {
    -ms-interpolation-mode:bicubic;
}
#block h3 {
    color:#0099FF;
}
#block p {
    color:#777;
}

Le overflow:hidden s'explique car certains des éléments fils de #block seront flottants. L'article précédemment cité s'attarde aussi sur cette astuce.

L'étrange -ms-interpolation-mode:bicubic permet un redimensionnement d'image sans perte de qualité sur Internet Explorer. Les autres navigateurs gérent ça très bien sans rien ajouter. Référez-vous à cet autre article pour plus d'informations.

Intéressons-nous à la liste détaillée lorsque la classe .list sera appliquée à #block.

La mise en forme détaillée

#block.list img {
    float:left;
    margin-right:10px;
    width:75px;
}
#block.list li {
    border-bottom:1px dotted #777;
    height:65px;
    margin:10px;
}
#block.list h3 {
    font-size:15px;
}

Les images sont ici de petite taille (75px de largeur) alignées à gauche tandis que le titre et la descriptions seront placés dans l'espace disponible à droite de l'image.

Mise en forme simplifiée

La classe .thumbs sera appliquée à la liste pour y appliquer la mise en page simplifiée sous forme de miniatures seulement. Nous modifions ici quelques éléments et en supprimons d'autres.

#block.thumbs img {
    width:194px;
}
#block.thumbs li {
    float:left;
    margin:3px;
    text-align:center;
}
#block.thumbs h3 {
    font-size:11px;
}
#block.thumbs p {
    display:none;
}

Cette fois les images sont plus grosses (194px de largeur) puis disposées côte à côte en rendant les éléments li flottants (float:left). La description ne nous intéresse plus, on la masque avec display:none.

La Javascript simplifié par jQuery

Nos deux mises en forme sont maintenant disponibles. Il faut dynamiquement appliquer l'une ou l'autre des classes selon le bouton cliqué. L'opération est rendue encore plus simple par jQuery.

/**
 * Changez de mise en page à la volée avec jQuery
 * par Jay Salvat - http://blog.jaysalvat.com/
 */
function switchToList() {
    $('#switchToThumbs').css('opacity', 1);
    $('#switchToList').css('opacity', 0.5);
    $('#block').addClass('list').removeClass('thumbs');
}

function switchToThumbs() {
    $('#switchToThumbs').css('opacity', 0.5);
    $('#switchToList').css('opacity', 1);
    $('#block').addClass('thumbs').removeClass('list');
}

$(function() {
    $('#switchToList').click(function() {
        switchToList();
        return false;
    });

    $('#switchToThumbs').click(function() {
        switchToThumbs();
        return false;
    });
    
    switchToList();
});

Quelques explications :

$('#switchToList').click(function() {
    switchToList();
    return false;
});

$('#switchToThumbs').click(function() {
    switchToThumbs();
    return false;
});

Lorsque les boutons #switchToList ou #switchToThumbs sont cliqués, la fonction du même nom est appelée. Le comportement par défaut du lien est stoppé net par return:false.

function switchToList() {
    $('#switchToThumbs').css('opacity', 1);
    $('#switchToList').css('opacity', 0.5);
    $('#block').addClass('list').removeClass('thumbs');
}

function switchToThumbs() {
    $('#switchToThumbs').css('opacity', 0.5);
    $('#switchToList').css('opacity', 1);
    $('#block').addClass('thumbs').removeClass('list');
}

Les fonctions switchToList() et switchToThumbs() sont faites sur le même modèle. Elles agissent à l'opposé l'une de l'autre. Elles mettent le bouton cliqué en légère transparence et applique la classe adéquate à #block. La classe inutile est supprimé et l'autre bouton est à nouveau rendu opaque.

    switchToList()

Enfin, l'aspect de liste détaillée est appliqué par défaut dès le lancement de la page.

Pour les plus étourdis : n'oubliez bien évidemment pas d'inclure la librairie jQuery avant le script.