HTML/CSS/jQuery: Données tabulaires & miniatures

Question

Existe-t-il un moyen rapide/facile d'avoir des données tabulaires et d'avoir un bouton qui les transforme en miniatures (sorte de système à 2 vues, table/pouce) - I ' m ne cherche pas les images miniatures ...

Toutes les idées sont appréciées! :)

Exemples:

Answer 1

Si vous souhaitez rendre une table standard, puis utiliser jQuery pour construire la vue miniature, alors voici un exemple:

Rendus HTML:

<a href="#" id="changeview">Change view</a> 
<table id="theTable"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Description</th> 
     <tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Item 1</td> 
      <td>Description 1</td> 
     </tr> 
     <tr> 
      <td>Item 2</td> 
      <td>Description 2</td> 
     </tr> 
     ... 
    </tbody> 
</table>​ 

jQuery:

var thumbnails = $('<ul></ul>').attr('id', 'theThumbnails').insertAfter('#theTable').hide(); 
$('#theTable tbody tr').each(function() { 
    var cells = $(this).find('td'); 
    var thumbnail = $('<li></li>').addClass('thumbnail'); 
    $('<h3></h3>').text($(cells[0]).text()).appendTo(thumbnail); 
    $('<p></p>').text($(cells[1]).text()).appendTo(thumbnail); 
    thumbnail.appendTo(thumbnails); 
}); 

$('#changeview').live('click', function() { 
    $('#theTable, #theThumbnails').toggle(); 
}); 

En fait, vous pouvez raccourcir le j Interrogez un peu le code en enchaînant certaines des instructions.

Voici un exemple de travail: http://jsfiddle.net/2PCnL/1/

Answer 2

J'utiliser un mécanisme de templating du côté client pour ce faire.

Vous devez définir deux modèles - un qui serait la vue «liste» et un autre qui serait la vue «miniature». Les données fusionnées avec les deux modèles seraient les mêmes.

Je vous conseille d'utiliser la bibliothèque de templating de Resig (plugin jQuery) - http://github.com/jquery/jquery-tmpl

Très simple mais accomplirai ce que vous avez besoin.

Exemple:

modèle Miniature:

{{each}} 
    <div style="float: left;"> 
    <img src="${{thumbnailUrl}}" alt="${{description}}" /> 
    </div> 
{{/each}} 

Liste modèle:

<ul> 
    {{each}} 
    <li>${{description}}</li> 
    {{/each}} 
</ul> 

Lorsque les données vous fusionner avec pourrait ressembler à:

arrData = 
[ { thumnailUrl: "/image.gif", description: "Some image" }, 
    { thumbnailUrl: "another.gif", description: "Another image" } 
] 

Pour appl y le modèle à un conteneur div sur votre page avec id: « divContainer »:

$("#divContainer").append(templateContents, arrData);