[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Шаблонизатор категорий + анимация для ucoz
offtop
Дата: Воскресенье, 19.05.2013, 07:18 | Сообщение # 1
Оффлайн
Пользователи
Сообщений: 216
IP: Скрытная информация


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

Код
(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);


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

Код
<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)

Вот так должно у вас примерно получиться:
Код
$.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});


.
Прикрепления: 4509280.png (3.1 Kb)
  • Страница 1 из 1
  • 1
Поиск: