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

8725
7 из 10
Проголосовало: 11





Для того, чтобы у вас работал скрипт, вам необходимо установить 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);


На странице с категорией перед </body> вставляем:
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});
Автор публикации: Загрузка
Загрузка
k43, это его n материал
Источник: http://usite.su/
  • Всего комментариев: 4

image-pc
0
image-pc написал: Написано 06 Декабря 2014 в 09:00
Комментарий №4
Не пашет (((
Куда и как установить jQuery плагин?

MonaX
0
MonaX написал: Написано 12 Декабря 2012 в 13:44
Комментарий №3
Точно с провеббера.

PheonixICQ
-1
PheonixICQ написал: Написано 10 Декабря 2012 в 17:56
Комментарий №2
Краденное. Фигов рип

ST[1]le
-1
ST[1]le написал: Написано 10 Декабря 2012 в 17:39
Комментарий №1
С провеббера же)

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
  • waak написал:
  • Почему у меня он перелистывает в верх а не вниз и если это первая песня на стр то он её по кругу гоняет а не переходит к последней
    и как сделать стоп по клику на трек который играет?
  • Acht написал:
  • Тест
    Последние темы
    Опрос
    255
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: