О нас Форум Баннеры RSS картинка Нас уже 577, Присоединяйся
Пожаловаться

Данный скрипт помогает быстро настроить внешний вид категорий,
А также прикрутить анимацию.


Для того, чтобы у вас работал скрипт, вам необходимо установить jQuery плагин
Вставить его нужно после <body> (например в Верхнюю часть сайта):
Code
<script>(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);
</script>


На странице с категорией перед </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
<script>
$.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});
</script>


То есть этот скрипт нужно подстроить под свои категории..

Готово - Удачи.
Автор: faforty


Спонсор :



Источник: http://usite.su
Всего голосов: ... | ... | ...

Нет комментариев

Информация


Посетители, находящиеся в группе Гость, не могут оставлять комментарии к данной публикации.
Пожалуйста войдите на сайт как пользователь или зарегистрируйтесь.

Логотип сайта:
Навигация
Мини-чат
Витрина Активистов
Опрос
Нужно ли модернизировать сайт?

Всего ответов: 205
Последние комментарии
  • Fatal1ti
    Оставлен 05.02.2013
    50+ качественных анимированных иконок загрузки для сайта
    Автор комментария: Fatal1ti
    Оставлен 05.02.2013 в 16:19
    Тема: 50+ качественных анимированных иконок загрузки для сайта
    Это просто gif картинки,
    А чтобы при загрузке страницы крутилась анимация, нужен скрипт
  • sasha26
    Оставлен 04.02.2013
    Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Автор комментария: sasha26
    Оставлен 04.02.2013 в 12:43
    Тема: Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    С цветами разобрался, пришлось путь к файлу zvetaf.xml полностью писать.
  • sasha26
    Оставлен 04.02.2013
    Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Автор комментария: sasha26
    Оставлен 04.02.2013 в 12:32
    Тема: Новый, светлый мини-чат как на Zagruzka-Plus для uCoz
    Что-то окно с цветами начинает открываться и сразу же пропадает.
    А как можно чат растянуть по высоте с 300рх до 500рх, где это меняется?
  • Mihail
    Оставлен 01.02.2013
    Замена alert на ajax окно с прямой ссылки к сообщению на форуме
    Автор комментария: Mihail
    Оставлен 01.02.2013 в 17:12
    Тема: Замена alert на ajax окно с прямой ссылки к сообщению на форуме
    А вот это супер )
  • Fatal1ti
    Оставлен 31.01.2013
    Форма добавления комментариев как на dle для uCoz
    Автор комментария: Fatal1ti
    Оставлен 31.01.2013 в 18:23
    Тема: Форма добавления комментариев как на dle для uCoz
    Должно работать, у некоторых файл zvetaf.xml
    Повреждается при загрузке, попробуй его перезалить

    Если ничего не изменяется, то ищи в коде такую строчку:
    Код
    <img src="http:/bbcodes/color.gif" id="kmn" title="Выбрать цвет" onclick="openLayerB('sda',0,'/bbcodes/zvetaf.xml','Выбор цвета',190,200,'1','','',0,'justify');return false;">


    И меняй на эту:
    Код
    <script type="text/javascript" src="http:/serv/zvet.js"></script>
    <img src="http:/bbcodes/color.gif" id="kmn" title="Выбрать цвет" onclick="viewzvet()">

    Должно заработать..
  • Fatal1ti
    Оставлен 27.01.2013
    Зелёное меню как на we-place для uCoz
    Автор комментария: Fatal1ti
    Оставлен 27.01.2013 в 15:05
    Тема: Зелёное меню как на we-place для uCoz
    DevilShadow, извини что сразу не ответил
    Чтобы счетчики были справа нужно в css найти такую строчку:
    Код
    .coole div {position: relative;margin-left: 173px;z-index: 1;}

    И заменить на эту
    Код
    .coole div {position: relative;margin-left: 219px;z-index: 1;}


    А чтобы и фото счетчик был, нужно после этой строчки:
    Код
    <script type="text/javascript" src="http://worldinfo.my1.ru//informer/6"></script>

    Добавить эту:
    Код
    <script type="text/javascript" src="http://worldinfo.my1.ru//informer/7"></script>


    И после скрипта, который находится снизу после меню, добавь ещё скрипт:
    Код
    <script type="text/javascript">  
      function setCatNumEnt(){  
      if(!window.uCatsOut)return;  
      $('div.naviglot a').each(function(){  
      var a=this,ah=a.href,cArr=window.uCatsOut;  
      if(!/\/photo\//.test(ah))return;  
      var t=ah.split('/'),id=t[t.length-1]||t[t.length-2],a=$(a).parent();  
      if(!isNaN(id)){  
      $.each(cArr,function(j){  
      if(cArr[j][0]==id){  
      a.prepend('</span><div class="coole"><div><span class="vnav-subnav2">'+cArr[j][6]+'</span></div></div>');  
      }  
      });  
      };  
      });  
      };setCatNumEnt();
      </script>
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сегодня зашли на сайт
0 пользователя

Новых пользователей:
За месяц: 17
За неделю: 6
Вчера: 0
Сегодня: 0
У нас нашли
Загрузка...
Друзья сайта
Наш Баннер
Всё для новичков
Всё для новичков