HTML/CSS/jQuery: Табличные данные и миниатюры

Question

Есть ли быстрый/простой способ иметь табличные данные и кнопка, которая превращает их в миниатюры (вид системы с двумя представлениями, таблица/большой палец) м не ищу изображения миниатюр ...

Любые идеи оцениваются! :)

Примеры:

Answer 1

Если вы хотите, чтобы сделать стандартную таблицу, а затем использовать JQuery для создания эскизов, то вот пример:

Вынесено 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(); 
}); 

на самом деле вы можете сократить J Код запроса немного, привязывая некоторые из операторов.

Вот рабочий пример: http://jsfiddle.net/2PCnL/1/

Answer 2

Я хотел бы использовать механизм на стороне клиента структуронаправляющий для достижения этой цели.

Вы бы определили два шаблона - один из которых будет представлением «список», а другой - представлением «миниатюры». Данные, объединенные с двумя шаблонами, будут одинаковыми.

Я бы рекомендовал использовать шаблонную библиотеку Resig (в JQuery плагин) - http://github.com/jquery/jquery-tmpl

Очень простой, но исполняет то, что вам нужно.

Пример:

шаблон Эскиз:

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

шаблон списка:

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

Если данные, которые вы бы сливаться с может выглядеть следующим образом:

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

Для Appl у шаблон для контейнера DIV на странице с идентификатором: «divContainer»:

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