Новый вид выбора, цвета, размера и шрифта в форме добавления отве...

1281
6 из 10
Проголосовало: 2




  • Скачать с сервера
  • Скачать
  • Смотреть демо


Доработанная версия данного скрипта.
Список изменений:
1. Плавное открытие и сворачивание содержимого.
2. Добавлен цвет фона шрифта
3. Увеличено количество цветов выбора цвета
4. Не требует места в форме добавления ответов

Итак, приступим.

Для начала нужно в общих настройках выбрать версию Jquery 1.6.1, иначе скрипт будет нерабочим (не будет открывать панель)

В CSS вставляем следующее:

Code
.DisplayTeleport {display:none}
.BG-codes {background: url('/bbbg.png'); padding:5px; border:1px dashed #555555}
.pointer {cursor:pointer}
#TextBackground {z-index:40; display: none; position:absolute;}
.BackgroundTable {bottom: 170px; left: 0px; width: 100%;}
.BackgroundSelect {height:20px;}
.frameBackground {background:url('/BBTSettings0.png') -75px 0 no-repeat;width:24px;height:22px; border:none;}
#TextSize {z-index:40; display: none; position:absolute;}
.SizeTable {bottom: 170px; left: 0px; width: 100%;}
.SizeSelect {height:20px;}
.frameSize {background:url('/BBTSettings0.png') no-repeat;width:24px;height:22px; border:none; opacity:0.7;}
#TextFamily {z-index:40; display: none; position:absolute;}
.FamilyTable {bottom: 170px; left: 0px; width: 100%;}
.FamilySelect {height:20px;}
.frameFamily {background:url('/BBTSettings0.png') -25px 0 no-repeat;width:24px;height:22px; border:none; opacity:0.7;}
#TextColor {z-index:40; display: none; position:absolute;}
.ColorTable {bottom: 170px; left: 0px; width: 100%;}
.colorSelect {width:13px; height:13px; border: none;}
.colorSelect:hover {border:1px solid #f60000;}
.frameColor {background:url('/BBTSettings0.png') -50px 0 no-repeat;width:24px;height:22px; border:none;}


Теперь создаем глобальный блок BBPANEL и в него вставляем все с файла GLOBAL_BBPANEL.txt, т.к код очень большой smile

Идем в форму добавления ответов и вместо старого кода (если качали прошлую версию) вставляем этот.

Code
<!--- BB TEXT PANEL --->
<td class="gTableLeft">Опции шрифта</td>
<td class="gTableRight"><table align="right"><tbody><tr><td>
   
<div onclick="$ ('#TextBackground').fadeOut(500)"><div onclick="$ ('#TextSize').fadeOut(500)"><div onclick="$ ('#TextFamily').fadeOut(500)">
  <span class="bbcodes"></span><table style="width: 24px; height: 24px;" class="BackgroundTable" align="" border="0" cellpadding="0" cellspacing="0" width="">
  <tbody><tr><td class="frameColor" title="Цвет текста" onclick="$ ('#TextColor').fadeToggle(500);" settimeout(off,="" 100);="" return="" false;="">
  </td>
  </tr>
  </tbody></table></div></div></div>
   
<div id="TextColor" onclick="$ ('#TextColor').fadeOut(500)">  
<span class="Teleported1"></span>
  </div>
  </td><td>
<div onclick="$ ('#TextColor').fadeOut(500)"><div onclick="$ ('#TextSize').fadeOut(500)"><div onclick="$ ('#TextFamily').fadeOut(500)">
  <span class="bbcodes"></span><table style="width: 24px; height: 24px;" class="BackgroundTable" align="" border="0" cellpadding="0" cellspacing="0" width="">
  <tbody><tr><td class="frameBackground" title="Цвет заливки" onclick="$ ('#TextBackground').fadeToggle(500);" settimeout(off,="" 100);="" return="" false;="">
  </td>
  </tr>
  </tbody></table></div></div></div>
   
<div id="TextBackground" onclick="$ ('#TextBackground').fadeOut(500)">
  <span class="Teleported2"></span>
  </div>
  </td><td>
   
<div onclick="$ ('#TextBackground').fadeOut(500)"><div onclick="$ ('#TextSize').fadeOut(500)"><div onclick="$ ('#TextColor').fadeOut(500)">
<span class="bbcodes"></span><table style="width: 24px; height: 24px;" class="FontTable" align="" border="0" cellpadding="0" cellspacing="0" width="">
  <tbody><tr><td class="frameFamily" title="Шрифт" onclick="$ ('#TextFamily').fadeToggle(500);" settimeout(off,="" 100);="" return="" false;="">
  </td>
  </tr>
  </tbody></table></div></div></div>

<div id="TextFamily" onclick="$ ('#TextFamily').fadeOut(500)">
  <span class="teleported4"></span>
  </div>
  </td><td>
   
<div onclick="$ ('#TextFamily').fadeOut(500)"><div onclick="$ ('#TextColor').fadeOut(500)">
<span class="bbcodes"></span><table style="width: 24px; height: 24px;" class="SizeTable" align="" border="0" cellpadding="0" cellspacing="0" width="">
  <tbody><tr><td class="frameSize" title="Размер" onclick="$ ('#TextSize').fadeToggle(500);" settimeout(off,="" 100);="" return="" false;="">
  </td>
  </tr>
  </tbody></table></div></div>

<div id="TextSize" onclick="$ ('#TextSize').fadeOut(500)">
  <span class="teleported4"></span>
  </div>
  </td></tr></tbody></table>
</td>  
  <!--- END BB TEXT PANEL --->


Идем в общий вид страниц форума и вставляем следующее

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

Там же вставляем после $GLOBAL_AHEADER$ или в другом месте $GLOBAL_BBPANEL$

Все!

Какие картинки к чему...
BBBt.png-фон панели
BBTSettings0.png-кнопки. Старый удалите, новый залейте.

Заливаем картинки, скрипт, прописываем в css правильно пути к ним и наслаждаемся скриптом.
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://Apollo_440
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Радио не стоит на месте новая версия вам 1.5:
    Что нового:
    1. Media Session - позволит вам переключать из бара браузера радио, а также на блоке экрана.
    2. Новые радиостанции.
    3. Новый API код.

    Демо: fiddle
    Реальная полная версия: woobl
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
    Последние темы
    Опрос
    470
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: