WeTables v.1.0

Представляем вашему вниманию новый плагин для uCoz под названием «WeTables». Идея табличек пришла мне в голову с официального форума сообщества uCoz. Плагин представляет собой возможность добавления на страницы красивых и информативных табличек с различными уведомлениями. Таблички вызываются простыми BB-кодами, которые могут быть вставлены в любое место сайта. Также вы можете указать определенные контейнеры, в которых эти коды будут действовать. В дополнение ко всему этому идет кнопка с BB-кодом таблиц. Скрипт легко подстроить под себя, вся опции настроек находятся в одном массиве.
Внимание: Используйте кнопку с BB-кодом на форуме крайне осторожно, пользователи сайта могут не закрыть тег таблицы, что повлечет за собой искажение дизайна. Рекомендуется разрешить данную функцию только для проверенных пользователей.
В разработке:
  • Уникальные названия для каждой таблички
  • Новые функции для работы с табличками
  • 5 новых табличек

Идеи по улучшению скрипта, а также наброски новых табличек просьба присылать мне в ЛС
1) ПУ -> Все страницы: Перед /body вставляем код:
Code
<script type="text/javascript">
  $.getScript('http://web41k.ru/Scripts_files/WeTables/1/tables.js');
  var options = ['tableArea','true','RedTable','GreenTable','YellowTable','BlueTable','GrayTable'];
  </script>

2) Здесь же: Нужный участок кода оборачиваем в div. То есть:
Code
<div class="tableArea">Место, где потом будут отображаться таблички</div>

3) ПУ -> Управление дизайном -> Вид материалов форума: Оборачиваем $MESSAGE$ в этот же див, только с условием::
Code
<?if($GROUP_ID$ != 'Название группы, которой запрещено использовать таблички' && 'Вторая группа, которой запрещено использовать таблички')?><div class="tableArea">$MESSAGE$</div><?endif?>

4) ПУ -> Управление дизайном -> Таблица стилей (CSS): Вставляем стили:
Code
/* ==== Таблички v.1.0 by Web41k.ru ==== */
.web41kta_red {background: #fff5f0; border:1px solid #e89b88;}
.web41kta_blue {background: #f0f5ff; border: 1px solid #9dbdff;}
.web41kta_green {background: #f0ffeb; border: 1px solid #0c0;}
.web41kta_yellow {background: #fefbeb; border:1px solid #eed31f;}
.web41kta_gray {background: #efefef; border:1px solid #bdbdbd;}
[class^="web41kta"] {font-family: Verdana; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255, 0.3), 0 0 0 1px rgba(0,0,0,0.03), inset 0 0 5px 2px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.7); border-radius:3px; margin:5px;}
[class^="web41kta"]:hover {box-shadow:0 0 3px 0 rgba(0,0,0,0.2);}
.image_table {display:table-cell;width:32px;padding:5px;}
.web41kt_text {display:table-cell;vertical-align:top; padding:7px; width:100%;}
.web41kt_name {display:block; width:100%; font-size:13pt; font-weight:bold;}
/* ==== Таблички v.1.0 by Web41k.ru ==== */

Установка завершена!
Настройка скрипта

1) В первом коде меняем:
Code
<script type="text/javascript">
  $.getScript('http://web41k.ru/Scripts_files/WeTables/1/tables.js');
  var options = ['tableArea','true','RedTable','GreenTable','YellowTable','BlueTable','GrayTable'];
  </script>

tableArea - Название класса, в котором будут работать таблички
true - Добавлять ли кнопку с BB-кодом? true = да, false = нет.
RedTable - Название красной таблички
GreenTable - Название зеленой таблички
YellowTable - Название желтой таблички
BlueTable - Название синей таблички
GrayTable - Название серой таблички.
Если вы измените первое значение (tableArea), то во втором и третьем пункте установки поменяйте class="tableArea" на class="Значение", иначе скрипт работать не будет.
Просмотры: 1223 · Комментарии: 4 · Добавил: Kelin · Категория: Рецепты JavaScript
Комментарии к материалу
16.03.2013 в 13:45
Kelin
Что-то вы совсем все перепутали.
15.03.2013 в 11:42
RockVanDoom
Здравствуйте!
"Таблички вызываются простыми BB-кодами, которые могут быть вставлены в любое место сайта."
Какие ББ-коды имеются ввиду? [ББ-код]таблички[/ББкод] Я, в статье не нашел! Если, кто поможет, с меня наградки! smile
15.03.2013 в 14:39
Kelin
[redtable] - Красная табличка 
[greentable] - Зеленая табличка 
[yellowtable] - Желтая табличка 
[bluetable] - Синяя табличка 
[graytable] - Серая табличка
Насколько я помню, так))
Доступ запрещен
Войдите или Зарегистрируйтесь