Страница 1 из 10123910»
Модератор форума: JonMagon 
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » jQuery » TabControl (Реализация блока с вкладками на jQuery)
TabControl
JonMagon
Модератор форума
Сообщений: 2291

Сообщение # 1 | 16:17:30


Предисловие
Недавно понадобился плагин вкладок, лазая по сети, наткнулся на эту замечательную вещь.
Найдя еще несколько подобных штук, выбор остался именно на этом плагине.

Описание
Данный скрипт на jQuery реализует TabControl (для тех, кто не знает: TabControl - блок с вкладками, в каждой вкладке свое содержимое). Очень прост в использовании и имеет кучу других полезных качеств, и одно из них - кроссбраузерность (в IE 6 тоже работает).

Установка
1. Загружаем прикрепленный файл tables.js в папку js на своем сайте.

2. Переходим в режим редактирование CSS кода (ПУ » Управление дизайном » Редактирование шаблонов » Таблица стилей (CSS)), в самое начало вставляем следующий код
Код
/* TabControl Start */
p {padding: 7px 0;}
.sectiontable {
           width: 100%;
           background: #EFEFEF;
           margin: 0 0 30px;
}
ul.tabs {
           height: 28px;
           line-height: 25px;
           list-style: none;
           border-bottom: 1px solid #DDD;
           background: #FFF;
}
.tabs li {
           float: left;
           display: inline;
           margin: 0 1px -1px 0;
           padding: 0 13px 1px;
           color: #777;
           cursor: pointer;
           background: #F9F9F9;
           border: 1px solid #E4E4E4;
           border-bottom: 1px solid #F9F9F9;
           position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
           color: #F70;
           padding: 0 13px;
           background: #FFFFDF;
           border: 1px solid #FFCA95;
}
.tabs li.current {
           color: #444;
           background: #EFEFEF;
           padding: 0 13px 2px;
           border: 1px solid #D4D4D4;
           border-bottom: 1px solid #EFEFEF;
}
.box {
           display: none;
           border: 1px solid #D4D4D4;
           border-width: 0 1px 1px;
           background: #EFEFEF;
           padding: 0 12px;
}
.box.visible {
           display: block;
}

.section.vertical {
           width: 440px;
           border-left: 160px solid #FFF;
}
.vertical .tabs {
           width: 160px;
           float: left;
           display: inline;
           margin: 0 0 0 -160px;
}
.vertical .tabs li {
           padding: 0 13px;
           margin: 0 0 1px;
           border: 1px solid #E4E4E4;
           border-right: 1px solid #F9F9F9;
           width: 132px;
           height: 25px;
}
.vertical .tabs li:hover {
           width: 131px;
}
.vertical .tabs li.current {
           width: 133px;
           color: #444;
           background: #EFEFEF;
           border: 1px solid #D4D4D4;
           border-right: 1px solid #EFEFEF;
           margin-right: -1px;
}
.vertical .box {
           border-width: 1px;
}
/* TabControl End */

Сохраняем.

3. В шаблоне, где собираетесь использовать TabControl, перед вставляете приведенный ниже код
Код
<script type="text/javascript" src="/js/tables.js"></script>


4. В нужно месте вставляете следующий код
Код
<div class="sectiontable">
           <ul class="tabs">
            <li class="current">Первая вкладка</li>
            <li>Вторая вкладка</li>
           </ul>

           <div class="box visible">
            <p>Содержимое вкладки #1</p>
           </div>

           <div class="box">
            <p>Содержимое вкладки #2</p>
           </div>
</div>


4. Классы:
current - показывает вкладку активной
box visible - показывает содержимое нужной вкладки

Заключение
Если у вас что-то не заработало, убедитесь, что вы полностью выполнили все пункты и на вашем сайте нет конфликта скриптов.

Источник с оригинальной информацией: http://dimox.name/
Прикрепления: 4391996.png(19Kb) · tables.js(0Kb)

Не оказываю поддержку посредством ЛС/ICQ/Skype/AIM/XMPP/E-mail.
JonMagon
Модератор форума
Сообщений: 2291

Сообщение # 2 | 15:06:33
Реализация TabControl с помощью BB кодов


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

Реализация

1. Переходим в ПУ » Управление дизайном » Редактирование шаблонов » Форум » Общий вид страниц форума и перед вставляем следующий код
Код
<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">
/*
    * Автор: JonMagon
    */
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".

Примечание: На сайте должен быть установлен скрипт из первого сообщения.

Не оказываю поддержку посредством ЛС/ICQ/Skype/AIM/XMPP/E-mail.
FeniX_kz
Сообщений: 1642
Репутация: 971

Сообщение # 3 | 15:40:38
Все отлично работает! ;) Полезная табличка))

.::I'll be back::.
Выбор за тобой!
KARyzhkov
Сообщений: 6
Репутация: 0

Сообщение # 4 | 23:14:47
есть еще один вариант:
Статья: http://www.html.by/archive....3.html?

стили


HTML
Сообщение отредактировал webanet - Понедельник, 27 Авг 2012, 23:55:27
webanet
Личный менеджер
Сообщений: 22686
Репутация: 4844

Сообщение # 5 | 23:17:37

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
Rostislav
Сообщений: 2394
Репутация: 591

Сообщение # 6 | 23:21:41
webanet, %)

заработалась, видимо...

Сообщение отредактировал ERUDIT - Понедельник, 27 Авг 2012, 23:22:01
webanet
Личный менеджер
Сообщений: 22686
Репутация: 4844

Сообщение # 7 | 23:33:28
ERUDIT, нет не заработалась. терпеть не могу когда просто тупо кидают ссылки

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
JonMagon
Модератор форума
Сообщений: 2291

Сообщение # 8 | 08:55:41
KARyzhkov, не везде работать будет.

Не оказываю поддержку посредством ЛС/ICQ/Skype/AIM/XMPP/E-mail.
Deadshot
Сообщений: 412
Репутация: 524

Сообщение # 9 | 09:19:34
JonMagon, полезная чтука спасиб, посмотрю и сам скриптик :)

Пум-пурум-пурум-пум-пум!
Rostislav
Сообщений: 2394
Репутация: 591

Сообщение # 10 | 15:43:26
Я один тыкал по вкладкам на картинке, чтобы посмотреть как работает? :D

DimoNGR
Сообщений: 26
Репутация: 0

Сообщение # 11 | 18:33:14
JonMagon, помоги пожалуйста! Я хочу добавить эту table в новосозданную страницу, но выводит

  • Первая вкладка
  • Вторая вкладка


Содержимое вкладки

Содержимое вкладки

Так же и когда я хочу добавить материал, и в содержимое материала встроить эту табличку!
Как решить?

Добавлено (19-Сен-2012, 18:33:14)
---------------------------------------------
обязательно ли вставлять css в начало, а не в конец?


Требуются «добавляторы фильмов» на сайт
Писать в ЛС
JonMagon
Модератор форума
Сообщений: 2291

Сообщение # 12 | 18:52:33
DimoNGR, ссылку на страницу в студию.

Не оказываю поддержку посредством ЛС/ICQ/Skype/AIM/XMPP/E-mail.
DimoNGR
Сообщений: 26
Репутация: 0

Сообщение # 13 | 20:05:56
JonMagon, http://www.kinoxum.ru/index/14/0-8
Код поставил такой
Code
<div class="sectiontable">   
          <ul class="tabs">   
           <li class="current">Первая вкладка</li>   
           <li>Вторая вкладка</li>   
          </ul>   

          <div class="box visible">   
           <p>Содержимое вкладки #1</p>   
          </div>   

          <div class="box">   
           <p>Содержимое вкладки #2</p>   
          </div>   
</div>


вот JavsScript http://www.kinoxum.ru/js/tables.js

Code
<script type="text/javascript" src="/js/tables.js"></script>

этот код поставлен в шаблон Страницы сайта перед </body> (как описано)

Требуются «добавляторы фильмов» на сайт
Писать в ЛС
Сообщение отредактировал DimoNGR - Среда, 19 Сен 2012, 20:06:21
JonMagon
Модератор форума
Сообщений: 2291

Сообщение # 14 | 20:21:23
DimoNGR, все у вас отображается.


Почистите кеш браузера.
Прикрепления: 8258369.png(87Kb)

Не оказываю поддержку посредством ЛС/ICQ/Skype/AIM/XMPP/E-mail.
DimoNGR
Сообщений: 26
Репутация: 0

Сообщение # 15 | 21:51:54
а можно сделать прозрачным эту table?

Требуются «добавляторы фильмов» на сайт
Писать в ЛС
Сообщение отредактировал DimoNGR - Среда, 19 Сен 2012, 21:59:59
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » jQuery » TabControl (Реализация блока с вкладками на jQuery)
Страница 1 из 10123910»
Поиск: