Гость !!! | RSS
Сегодня на сайте
Новые сообщения Участники Правила форума Поиск RSS
Страница 1 из 11
Модератор форума: Khufu 
Форум » Скрипты » Эффекты..., трюки... » Универсальный jQuery-скрипт для блоков с вкладками (табами)
Универсальный jQuery-скрипт для блоков с вкладками (табами)
« Voland » Дата: Вторник, 12 Февраль 2013, 00:03:33 | Сообщение # 1
Барон
Voland
«Чистильщик»
Сообщений: 64
Замечания: ±
Статус Настроения: [редактировать]
Отсутствует

Смайл настроения
Почему скрипт для jQuery-вкладок универсальный:
  • Он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов, как это было сделано в старом варианте;
  • Можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
  • Содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,4 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок, как это было в старом варианте, при этом размер нового варианта скрипта не больше размера скрипта для одного блока с вкладками из старого варианта.


Переходим к сути.

Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами head и /head):
Код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Предпочтительнее "брать" его с Гугле, поскольку, (во-первых, велика вероятность, что у посетителя, который зайдет на сайт, jQuery уже закэширован в браузере (значит страница загрузится быстрее),
во-вторых, скорость серверов Гугла стабильна и быстра,
в-третьих, Гугл отдает его в сжатом виде (gzip), и, например, для версии 1.4.2 размер составляет всего 24 килобайта по сравнению с несжатым файлом (70 Кб).).

Вот такой получился скрипт (обратите внимание, что для него нужно использовать jQuery не ниже версии 1.4.2):
Код
<script type="text/javascript">
(function($) {
$(function() {

     $('ul.tabs').delegate('li:not(.current)', 'click', function() {
       $(this).addClass('current').siblings().removeClass('current')
         .parents('div.section').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide();
     })

})
})(jQuery)
</script>

Для тех, кто не знает, как подключать этот скрипт - Создайте файл с расширением .js, вставить в него код скрипта и подключить по аналогии c jQuery (см. выше), естественно, заменив ссылку на адрес скрипта.

[indent]Кстати, в этом скрипте реализован эффект плавного появления переключаемых блоков.[/indent]

HTML-код, который нужно использовать для скрипта
Код
<div class="section">
     <ul class="tabs">
       <li class="current">1-я вкладка</li>
       <li>2-я вкладка</li>
     </ul>
     <div class="box visible">
       Содержимое первого блока
     </div>
     <div class="box">
       Содержимое второго блока
     </div>
</div>
Обратите внимание, что структура HTML-кода строго привязана к скрипту, поэтому, если вы пожелаете изменить названия используемых классов, не забывайте их поменять и в скрипте.

Обязательные CSS-стили для вышеуказанного HTML-кода (к Demo - не относится)
Код
.box {
     display: none; /* по умолчанию прячем все блоки */
}
.box.visible {
     display: block; /* по умолчанию показываем нужный блок */
}

Если, например, необходимо, чтобы по умолчанию отображался второй блок, тогда нужно переместить класс .visible во второй блок div.box, а также переместить класс .current во второй элемент в списке вкладок.

Примеры:
1-й пример;

2-й пример, в котором запоминается активная вкладка после перезагрузки страницы (с помощью cookie).

3-й пример, в котором запоминается активная вкладка после перезагрузки страницы (с помощью localStorage, меньше кода по сравнению с cookie).

4-й пример, в котором при переходе по ссылке с якорем, указывающим на номер таба, активируется соответствующий таб.




Здесь - нет ничего. У тебя - глюки!
 
« Voland » Дата: Вторник, 12 Февраль 2013, 04:11:42 | Сообщение # 2
Барон
Voland
«Чистильщик»
Сообщений: 64
Замечания: ±
Статус Настроения: [редактировать]
Отсутствует

Смайл настроения
Реализация TabControl с помощью BB кодов


Отличия BB реализации от HTML
[indent]1. BB код могут использовать все пользователи сайта[/indent]
[indent]2. Не нужно пихать HTML код в сообщение, где необходимо вывести вкладки[/indent]
[indent]3. Очень удобно использовать[/indent]

Реализация

1. Переходим в ПУ » Управление дизайном » Редактирование шаблонов » Форум » Общий вид страниц форума и перед /body вставляем следующий код
Код
<script type="text/javascript">
  $('td.posttdMessage').each(function(){
  $(this).html($(this).html().split('[tables]').join('<div class="sectiontable">').split('[/tables]').join('</div>').split('[tablesnames]').join('<ul class="tabs">').split('[/tablesnames]').join('</ul>').split('[table visible]').join('<li class="current">').split('[table]').join('<li>').split('[/table]').join('</li>').split('[content visible]').join('<div class="box visible"><p>').split('[content]').join('<div class="box"><p>').split('[/content]').join('</p></div>'));
});
</script>

2. Переходим в ПУ » Управление дизайном » Редактирование шаблонов » Форум » Форма добавления материалов и в самое начало вставляем нижеследующий код
Код
<script type="text/javascript">
function tabControl()
    {
     i = 1;
     var tables = '';
     var contents = '';
     while(true)
    {
    table = prompt('Введите название вкладки', 'Вкладка #' + i);
    if (table == null)
   {
    break;
   }
   else
   {
    content = prompt('Введите содержимое вкладки', 'Содержимое вкладки #' + i);
    if (content == null)
   {
    break;
   }
   else
   {
    var visible = '';
   if (i == 1)
   {
    visible = ' visible';
   }
  i = i + 1;
    tables += '[table' + visible + ']' + table + '[/table]';
    contents += '[content' + visible + ']' + content + '[/content]';
    }
   }
  }
   if (i != 1)
  {
   $('#message').focus().val($('#message').val() + '[tables][tablesnames]' + tables + '[/tablesnames]' + contents + '[/tables]');
  }
}
</script>

Тут же ищем код $BBCODES$ и вставляем после него нижеприведенный код
Код