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


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

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




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


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

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

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

Code
#fcolor {display:none}
#fsize {display:none}
#ffont {display:none}
.pointer {cursor:pointer}
#TextSize {z-index:40; display: none; position:absolute;}
.SizeTable {bottom: 170px; left: 0px; width: 100%;}
.SizeSelect {height:20px;}
.frameSize {background:url('/BBTSettings.png') no-repeat;width:24px;height:22px; border:none; opacity:0.7;}
.frameSize:hover {opacity:1.0}
#TextFamily {z-index:40; display: none; position:absolute;}
.FamilyTable {bottom: 170px; left: 0px; width: 100%;}
.FamilySelect {height:20px;}
.frameFamily {background:url('/BBTSettings.png') -25px 0 no-repeat;width:24px;height:22px; border:none; opacity:0.7;}
.frameFamily:hover {opacity:1.0}
#TextColor {z-index:40; display: none; position:absolute;}
.ColorTable {bottom: 170px; left: 0px; width: 100%;}
.colorSelect {width:13px; height:13px; border:1px solid #555555;}
.frameColor {background:url('/BBTSettings.png') -50px 0 no-repeat;width:24px;height:22px; border:none; opacity:0.7;}
.frameColor:hover {opacity:1.0}


Где "/BBTSettings.png"

-путь к картинке

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

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="$ ('#TextSize').fadeOut(1)"><div onclick="$ ('#TextFamily').fadeOut(1)">
<table style="width: 24px; height: 24px;" class="ColorTable" align="" border="0" cellpadding="0" cellspacing="0" width="">
  <tbody><tr>
<td class="frameColor" title="Цвет" onclick="$ ('#TextColor').toggle();" settimeout(off,="" 100);="" return="" false;=""></td><br> </tr></tbody></table></div></div>
<div id="TextColor" onclick="$ ('#TextColor').fadeOut(1)">
<table style="width: 92px; height: 92px; background: #FFFFFF" align="" cellpadding="0" cellspacing="3" width=""><tbody><tr>
<td onclick="javascript:alterfont('#F60000','color','message','')" class="colorSelect" style="background: #F60000"></td>
<td onclick="javascript:alterfont('#FFF0F5','color','message','')" class="colorSelect" style="background: #FFF0F5"></td>  
<td onclick="javascript:alterfont('#000000','color','message','')" class="colorSelect" style="background: #000000"></td>
<td onclick="javascript:alterfont('#696969','color','message','')" class="colorSelect" style="background: #696969"></td>
<td onclick="javascript:alterfont('#708090','color','message','')" class="colorSelect" style="background: #708090"></td></tr><tr>  
<td onclick="javascript:alterfont('#87CEFA','color','message','')" class="colorSelect" style="background: #87CEFA"></td>
<td onclick="javascript:alterfont('#4682B4','color','message','')" class="colorSelect" style="background: #4682B4"></td>
<td onclick="javascript:alterfont('#B0E0E6','color','message','')" class="colorSelect" style="background: #B0E0E6"></td>
<td onclick="javascript:alterfont('#AFEEEE','color','message','')" class="colorSelect" style="background: #AFEEEE"></td>
<td onclick="javascript:alterfont('#40E0D0','color','message','')" class="colorSelect" style="background: #40E0D0"></td></tr><tr>
<td onclick="javascript:alterfont('#7FFF00','color','message','')" class="colorSelect" style="background: #7FFF00"></td>
<td onclick="javascript:alterfont('#ADFF2F','color','message','')" class="colorSelect" style="background: #ADFF2F"></td>
<td onclick="javascript:alterfont('#228B22','color','message','')" class="colorSelect" style="background: #228B22"></td>
<td onclick="javascript:alterfont('#F0E68C','color','message','')" class="colorSelect" style="background: #F0E68C"></td>
<td onclick="javascript:alterfont('#EEE8AA','color','message','')" class="colorSelect" style="background: #EEE8AA"></td></tr><tr>
<td onclick="javascript:alterfont('#D2B48C','color','message','')" class="colorSelect" style="background: #D2B48C"></td>
<td onclick="javascript:alterfont('#D2691E','color','message','')" class="colorSelect" style="background: #D2691E"></td>
<td onclick="javascript:alterfont('#FA8072','color','message','')" class="colorSelect" style="background: #FA8072"></td>
<td onclick="javascript:alterfont('#FFA07A','color','message','')" class="colorSelect" style="background: #FFA07A"></td>
<td onclick="javascript:alterfont('#FFA500','color','message','')" class="colorSelect" style="background: #FFA500"></td></tr><tr>
<td onclick="javascript:alterfont('#EE82EE','color','message','')" class="colorSelect" style="background: #EE82EE"></td>
<td onclick="javascript:alterfont('#DDA0DD','color','message','')" class="colorSelect" style="background: #DDA0DD"></td>
  <td onclick="javascript:alterfont('#A020F0','color','message','')" class="colorSelect" style="background: #A020F0"></td>
<td onclick="javascript:alterfont('#83BE2C','color','message','')" class="colorSelect" style="background: #83BE2C"></td>
<td onclick="javascript:alterfont('#5C5CED','color','message','')" class="colorSelect" style="background: #5C5CED"></td></tr></tbody></table></div></td><td>
<div onclick="$ ('#TextSize').fadeOut(1)"><div onclick="$ ('#TextColor').fadeOut(1)">
<table style="width: 24px; height: 24px;" class="FontTable" align="" border="0" cellpadding="0" cellspacing="0" width="">
<tbody><tr><td class="frameFamily" title="Шрифт" onclick="$ ('#TextFamily').toggle()" settimeout(off,="" 100);="" return="" false;=""></td></tr><br> </tbody></table></div></div>

<div id="TextFamily" onclick="$ ('#TextFamily').fadeOut(1)">
<table style="width: 130px; background: #FFFFFF" align="" border="0" cellpadding="0" cellspacing="3" width=""><tbody>
<tr>
<td class="pointer" onclick="javascript:alterfont('Arial','font','message','')" style="font-family: Arial; font-size: 12px;">Arial</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('Arial Black','font','message','')" style="font-family: Arial Black; font-size: 12px;">Arial Black</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('Mistral','font','message','')" style="font-family: Mistral; font-size: 12px;">Mistral</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('Consolas','font','message','')" style="font-family: Consolas; font-size: 12px;">Consolas</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('Monotype Corsiva','font','message','')" style="font-family: Monotype Corsiva; font-size: 12px;">Monotype Corsiva</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('Symbol','font','message','')" style="font-family: Symbol; font-size: 12px;">Symbol</td></tr><tr>
  <td class="pointer" onclick="javascript:alterfont('Courier New','font','message','')" style="font-family: Courier New; font-size: 12px;">Courier New</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('MS Serif','font','message','')" style="font-family: MS Serif; font-size: 12px;">MS Serif</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('MS Sans Serif','font','message','')" style="font-family: MS Sans Serif; font-size: 12px;">MS Sans Serif</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('Times','font','message','')" style="font-family: Times; font-size: 12px;">Times</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('Courier','font','message','')" style="font-family: Courier; font-size: 12px;">Courier</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('Impact','font','message','')" style="font-family: Impact; font-size: 12px;">Impact</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('Geneva','font','message','')" style="font-family: Geneva; font-size: 12px;">Geneva</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('Optima','font','message','')" style="font-family: Optima; font-size: 12px;">Optima</td></tr>
</tbody></table>
</div>
</td><td>

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

<div id="TextSize" onclick="$ ('#TextSize').fadeOut(1)">
<table style="background: #FFFFFF" align="" border="0" cellpadding="0" cellspacing="3" width=""><tbody>
<tr>
<td class="pointer" onclick="javascript:alterfont('8','size','message','')" style="font-size: 8px;">8pt</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('9','size','message','')" style="font-size: 9px;">9pt</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('10','size','message','')" style="font-size: 10px;">10pt</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('11','size','message','')" style="font-size: 11px;">11pt</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('12','size','message','')" style="font-size: 12px;">12pt</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('13','size','message','')" style="font-size: 13px;">13pt</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('14','size','message','')" style="font-size: 14px;">14pt</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('16','size','message','')" style="font-size: 16px;">16pt</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('17','size','message','')" style="font-size: 17px;">17pt</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('18','size','message','')" style="font-size: 18px;">18pt</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('20','size','message','')" style="font-size: 20px;">20pt</td></tr><tr>
<td class="pointer" onclick="javascript:alterfont('22','size','message','')" style="font-size: 22px;">22pt</td></tr><tr>
</tr></tbody></table>
</div>
</td></tr></tbody></table>
</td>
  <!--- END BB TEXT PANEL --->


Заливаем картинки, прописываем в css правильно пути к ним и наслаждаемся скриптом. Необходимые вам цвета вставьте.

Для того, чтобы вернуть стандартные селекторы уберите с css следующее:
#fcolor {display:none}

#fsize {display:none}

#ffont {display:none}

Чтобы изменить фон, необходимо с форме добавления сообщений заменить во всех трех селекторах
background: #FFFFFF" на свой.
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://Apollo_440
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 7
    Гостей: 6
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: