|
« Voland »
|
Дата: Вторник, 12 Февраля 2013, 00:03:33 | Сообщение # 1
|
|
Барон
|
Сообщений: 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>
во-вторых, скорость серверов Гугла стабильна и быстра,
в-третьих, Гугл отдает его в сжатом виде (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>
Обязательные 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
|
|
Барон
|
|
Сообщений: 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$ и вставляем после него нижеприведенный кодКод <span style="padding-right:1px;"><input type="button" class="codeButtons" onclick="tabControl();" value="tab" id="info" title="tab"></span>
Сохраняем!
Теперь рядом с стандартными BB кодами появилась новая кнопка "tab".
Примечание: На сайте должен быть установлен скрипт из Прикрепления первого сообщения!
Здесь - нет ничего. У тебя - глюки!
|
|
|
|
|
Новости
Блог
Статьи
Фото
Видео
Муз
Игры
ТВ
Радио
Форум
Чат
CSS
К-сайта
FAQ
E
Tagis 
