TabControl - Сообщество uCoz
TabControl
JonMagon
Сообщений: 2291
Сообщение # 1 |
16:17:30
22 Авг 2012
Предисловие Недавно понадобился плагин вкладок, лазая по сети, наткнулся на эту замечательную вещь.
Найдя еще несколько подобных штук, выбор остался именно на этом плагине.
Описание Данный скрипт на 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/
Не оказываю поддержку посредством ЛС/ICQ/Skype/AIM/XMPP/E-mail.
JonMagon
Сообщений: 2291
Сообщение # 2 |
15:06:33
23 Авг 2012
Реализация 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
Сообщение # 3 |
15:40:38
23 Авг 2012
Все отлично работает! Полезная табличка))
KARyzhkov
Сообщений: 6
Сообщение # 4 |
23:14:47
27 Авг 2012
есть еще один вариант: Статья: http://www.html.by/archive....3.html? стили
Code
#tabControl { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 50%; height: 50%; margin: auto; } #tabControlHeadersRow { background: #333333; } .tabItemHeader { -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; vertical-align: bottom; display: inline-block; margin: 5px 0px 0px 0px; border-width: 5px; padding: 4px; border-style: solid; border-radius:10px 10px 0 0; border-color: #666666; background: #666666; } .tabItemHeader:hover { border-color: #AAAAAA; background: #AAAAAA; } .tabItemHeader:target { border-bottom-width: 0px; border-color: #DDDDDD; background: #DDDDDD; } .tabItemHeader, .tabItemHeader:target ~ #item3 { -webkit-transition: all 0.3s ease-in; vertical-align: bottom; display: inline-block; margin: 5px 0px 0px 0px; border-width: 5px; padding: 4px; border-style: solid; border-radius:10px 10px 0 0; border-color: #666666; background: #666666; } #item3, .tabItemHeader:target { border-bottom-width: 0px; border-color: #DDDDDD; background: #DDDDDD; } .tabItemHeader a { color: inherit; text-decoration: none; } #tabControlContent { width: 600px; height: 200px; padding: 10px; background: #DDDDDD; border-width: 0px 3px 3px 3px; border-radius: 0 10px 10px 10px; border-color: #333333; } .tabItemContent { display: none; } .tabItemContent:target { display: block; }
HTML
Code
<div id="tabControl"> <div id="tabControlHeadersRow"> <div class="tabItemHeader"> <a href="#item1">Item1</a> </div> <div class="tabItemHeader"> <a href="#item2">Item2</a> </div> <div class="tabItemHeader"> <a href="#item3">Item3</a> </div> <div class="tabItemHeader"> <a href="#item4">Item4</a> </div> </div> <div id="tabControlContent"> <div class="tabItemContent" id="item1"> 111111111111 111111111111 111111111111 111111111111 </div> <div class="tabItemContent" id="item2"> 222222222222 222222222222 222222222222 222222222222 </div> <div class="tabItemContent" id="item3"> 333333333333 333333333333 333333333333 333333333333 </div> <div class="tabItemContent" id="item4"> 444444444444 444444444444 444444444444 444444444444 </div> </div> </div>
Сообщение отредактировал webanet - Понедельник, 27 Авг 2012, 23:55:27
webanet
Сообщений: 24067
Сообщение # 5 |
23:17:37
27 Авг 2012
Rostislav
Сообщений: 2396
Сообщение # 6 |
23:21:41
27 Авг 2012
webanet , заработалась, видимо...
Сообщение отредактировал ERUDIT - Понедельник, 27 Авг 2012, 23:22:01
webanet
Сообщений: 24067
Сообщение # 7 |
23:33:28
27 Авг 2012
ERUDIT , нет не заработалась. терпеть не могу когда просто тупо кидают ссылки
JonMagon
Сообщений: 2291
Сообщение # 8 |
08:55:41
28 Авг 2012
KARyzhkov , не везде работать будет.
Не оказываю поддержку посредством ЛС/ICQ/Skype/AIM/XMPP/E-mail.
Deadshot
Сообщений: 412
Сообщение # 9 |
09:19:34
28 Авг 2012
JonMagon , полезная чтука спасиб, посмотрю и сам скриптик
Пум-пурум-пурум-пум-пум!
Rostislav
Сообщений: 2396
Сообщение # 10 |
15:43:26
28 Авг 2012
Я один тыкал по вкладкам на картинке, чтобы посмотреть как работает?
DimoNGR
Сообщений: 26
Сообщение # 11 |
18:33:14
19 Сен 2012
JonMagon , помоги пожалуйста! Я хочу добавить эту table в новосозданную страницу, но выводит Первая вкладка Вторая вкладка Содержимое вкладки Содержимое вкладки Так же и когда я хочу добавить материал, и в содержимое материала встроить эту табличку! Как решить?Добавлено (19-Сен-2012, 18:33:14) --------------------------------------------- обязательно ли вставлять css в начало, а не в конец?
Требуются «добавляторы фильмов» на сайт Писать в ЛС
JonMagon
Сообщений: 2291
Сообщение # 12 |
18:52:33
19 Сен 2012
DimoNGR , ссылку на страницу в студию.
Не оказываю поддержку посредством ЛС/ICQ/Skype/AIM/XMPP/E-mail.
DimoNGR
Сообщений: 26
Сообщение # 13 |
20:05:56
19 Сен 2012
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
19 Сен 2012
DimoNGR , все у вас отображается. Почистите кеш браузера.
Не оказываю поддержку посредством ЛС/ICQ/Skype/AIM/XMPP/E-mail.
DimoNGR
Сообщений: 26
Сообщение # 15 |
21:51:54
19 Сен 2012
а можно сделать прозрачным эту table?
Требуются «добавляторы фильмов» на сайт Писать в ЛС
Сообщение отредактировал DimoNGR - Среда, 19 Сен 2012, 21:59:59
ООО “Юкоз Медиа”
Copyright © 2005-2024
Используются технологии uCoz