Шаблонизатор категорий + анимация


Для того, чтобы у вас работал скрипт, вам необходимо установить jQuery плагин:

Code
(function($) {  
  $.cats = function(gcat, scat, opt){  
  if(!gcat || !scat) return alert('Error #1');  
   
  var settings = $.extend({  
  loader: "Загрузка..",  
  animate: 0,  
  timeout: 0  
  }, opt);  
   
  var gid = $('<div/>', {id: 'catsM'}).insertAfter('.catsTable'); // Добавляем новый узел  
   
  $('.catsTable').find('.catsTd').each(function(i, v){ // Ищем все категории  
  var id = $('<div/>', {id: $(v).attr('id'), class: 'catsMc'}).appendTo(gid);  
  id.append(gcat.replace(/\{TITLE\}/g, $(v).find('a').text())  
  .replace(/\{COUNT\}/g, $(v).find('span').text().match(/\[(\w+)\]/)[1])  
  .replace(/\{CATS\}/g, '<div id="catsM'+$(v).attr('id')+'" class="catsMids" style="display: none"></div>')  
  .replace(/\{LINK\}/g, $(v).find('a').attr('href')  
  )); // Генерация HTML  
   
  }).parents('.catsTable').remove(); // Удаляем не нужные DOM элементы  

  gid.find('a').click(function(){  
  var r = $(this).parents('.catsMc').attr('id');  
  var sid = $('#catsM'+r);  
  var url = $(this).attr('href'); // Запоминаем url  
   
  if(!sid.html()){  
  $('<div/>', {id: 'catsMload'+r}).html(settings.loader).insertAfter(sid); // Устанавливаем loader  
  setTimeout(function(){  
  $.get(url, function(d){  
  $('.catsTable', d).find('.catsTd').each(function(i, v){ // Ищем все категории  
  sid.append(scat.replace(/\{TITLE\}/g, $(v).find('a').text())  
  .replace(/\{COUNT\}/g, $(v).find('span').text().match(/\[(\w+)\]/)[1])  
  .replace(/\{LINK\}/g, $(v).find('a').attr('href')));  
  });  
  delete d; // Очищаем память  
  $('#catsMload'+r).remove(); // Удаляем loader из DOM  
  });  
  }, settings.timeout); // Таймаут  
  }  
  switch(settings.animate){ // Виды анимации  
  case 1:  
  $('.catsMids').slideUp();  
  sid.slideDown();  
  break;  
  case 0:  
  default:  
  sid.fadeToggle();  
  break;  
  }  
   
  return false;  
  });  
  };  
  })(jQuery);


На странице с категорией перед вставляем:

Code
<script>  
$.cats('$1', '$2', {PARAMS});  
</script>


где:
$1 - html код для раздела категории, доступные переменные:
{TITLE} - название раздела
{COUNT} - кол-во постов в разделе
{LINK} - ссылка на раздел
{CATS} - выводит все категории данного раздела
$2 - html код для самой категории, доступные переменные:
{TITLE} - название категории
{COUNT} - кол-во постов в категории
{LINK} - ссылка на категорию
PARAMS - список параметров:
loader: предварительная загрузка (по умол.: Загрука..)
animate: режимы анимаций, доступно пока две анимации: 0 и 1 (по умол.: 0)
timeout: таймер загрузки категорий в миллисекундах (по умол.: 0)

Вот так должно у вас примерно получиться:

Code
$.cats('<a href="{LINK}">{TITLE}</a><span>{COUNT}</span><div class="cats">{CATS}</div>', '<a href="{LINK}">{TITLE}: ({COUNT})</a>', {loader: 'Загрузка...', animate: 1, timeout: 1000});

  • FalleN

  • 1230

  • 1

  • 0

Ссылки на статью:

Похожие статьи: