Главная » 2012 » Март » 16 » Скрипты uCoz: Выбора, цвета, размера и шрифта в форме добавления...
19:02
Скрипты uCoz: Выбора, цвета, размера и шрифта в форме добавления...

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


Советуем посмотреть:




Давно хотелось иметь у себя на сайте удобный выбор цвета, размера и шрифта. И эта мечта сбылась. Хочу поделиться и с вами. В этом скрипте нет ничего сложного.

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

В 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, т.к код очень большой

Теперь идем в Форму добавления сообщений форума и после

Code
<tr id="frM56"><td class="gTableLeft" id="frM57" valign="top" width="25%">Текст сообщения:<div class="smilesPart">$SMILES$</div></td><td class="gTableRight" id="frM58">$BBCODES$ $_MESSAGE$</td></tr>


вставляем это:

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 --->


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

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


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

Все!

Заливаем картинки, скрипт, прописываем в css правильно пути к ним и наслаждаемся скриптом.
Материал взят с сайта infoscript.ru

Теги: Скачать Выбора, цвета, размера и шрифта в форме добавления ответа
Скачать "Выбора, цвета, размера и шрифта в форме добавления ответа"












Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Просмотров: 790 | Добавил: Ahmed | Теги: размера, добавления..., шрифта, выбора, цвета, форме, UCOZ:, Скрипты | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: