17.12.2012, 22:57 | |||||
Шаблонизатор категорий + анимацияДанный скрипт помогает быстро настроить внешний вид категорий, а также прикрутить анимацию. Для того, чтобы у вас работал скрипт, вам необходимо установить 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}); Материал взят с сайта infoscript.ru
| |||||
Категория: Скрипты uCoz | Просмотров: 1215 | Добавил: sold93 | Рейтинг: 0.0/0 | | |||||
Теги: |
Пока комментариев нет. Ты можешь быть первым! | |
Кроме того, материал перепечатывали с сайта на сайт, ставили... файл можно найти на Вэбочке (название tables_tablichki_dli_foruma.js).