Next Generation CMS :: Форум поддержки

Заинтересовала наша система? Тогда этот форум для Вас!

rss

Вы не зашли.

Объявление

  • Список
  •  » FAQ
  •  » Делаем нормальную форму с выборкой цветов в редакторе

#1 2010-01-30 23:46:23

mittus
Пользователь
Зарегистрирован: 2010-01-24
Сообщений: 155
Рейтинг :   
Профиль

Делаем нормальную форму с выборкой цветов в редакторе

Описание
Форма отображается при наведении на нее курсором мыши, в моей версии можно выбрать 18 цветов шрифта. Постарался сделать её предельно адаптированно под движку, чтобы Виталик добавил её в SVN. Проверенно мной работает без глюков в IE7, FireFox и в опере последних версий.

К сообщению прикреплен скрин, где вы можете посмотреть результат.

Установка

1. Открываем файл ..../engine/skins/default/tpl/qt_news.tpl

В самом верху страницы добавляем

Код:

<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>
<style>
#tags {display:block; padding:0;}
#tags ul {margin:0;}
#tags li {display:inline;}
#tags li#nav {position:relative;}
#tags li#nav ul {position:absolute;display:none;background:#FFF;width:108px;padding:2px;border:1px solid #CCC;height:54px;text-align:left;top:16px;right:-90px;}
#tags li#nav:hover ul li a{height:16px;width:16px;float:left;margin:1px;}
#tags li#nav:hover ul li a:hover{border:1px solid #eee;margin:0;}
#tags li#nav:hover ul {display:block;}
</style>

Далее берем все ссылки в список <ul>, т.е. выглядеть должно примерно так:

Код:

<ul>
<li>
<a onclick="insertext('[b]','[/b]', {area})" title='{l_tags.bold}'><img src="{skins_url}/tags/bold.gif" height="16" width="16" alt="{l_tags.bold}" /></a>
</li>
<li>
<a onclick="insertext('[u]','[/u]', {area})" title='{l_tags.underline}'><img src="{skins_url}/tags/underline.gif" width="16" height="16" alt="{l_tags.underline}" /></a>
</li>
.........
</ul>

Картинки, которые будут встречаться по-пути оставляем между тегами </li><li> так, чтобы они не входили в список.

Код:

<img src="{skins_url}/tags/sep.gif" width="1" height="16" alt="" />
Должно получиться
</li><img src="{skins_url}/tags/sep.gif" width="1" height="16" alt="" /><li>

Когда подошли к концу, увидели тег </div> и вставили перед ним </ul>, копируем следующий фрагмент кода и вставляем его перед тегом </ul>

Код:

  <li id="nav"><a onclick="insertext('[color=]','[/color]', {area})" title='{l_tags.color}'><img src="{skins_url}/tags/color.gif" hspace="5" vspace="5" alt="{l_tags.color}" /></a> 
    <ul> 
      <li><a onclick="insertext('[color=#ff0000]','[/color]', {area})" style="background:#ff0000" title='{l_tags.color_red}'></a></li>
      <li><a onclick="insertext('[color=#a0af20]','[/color]', {area})" style="background:#a0af20" title='{l_tags.color_ogold}'></a></li>
      <li><a onclick="insertext('[color=#6666cc]','[/color]', {area})" style="background:#6666cc" title='{l_tags.color_rblue}'></a></li>
      <li><a onclick="insertext('[color=#b06a00]','[/color]', {area})" style="background:#b06a00" title='{l_tags.color_ohra}'></a></li>
      <li><a onclick="insertext('[color=#269088]','[/color]', {area})" style="background:#269088" title='{l_tags.color_teal}'></a></li>
      <li><a onclick="insertext('[color=#5c832f]','[/color]', {area})" style="background:#5c832f" title='{l_tags.color_odrab}'></a></li>
      <li><a onclick="insertext('[color=#842b61]','[/color]', {area})" style="background:#842b61" title='{l_tags.color_mauve}'></a></li>
      <li><a onclick="insertext('[color=#000080]','[/color]', {area})" style="background:#000080" title='{l_tags.color_nblue}'></a></li>
      <li><a onclick="insertext('[color=#808080]','[/color]', {area})" style="background:#808080" title='{l_tags.color_gray}'></a></li>
      <li><a onclick="insertext('[color=#0f79d3]','[/color]', {area})" style="background:#0f79d3" title='{l_tags.color_kblue}'></a></li>
      <li><a onclick="insertext('[color=#d85e23]','[/color]', {area})" style="background:#d85e23" title='{l_tags.color_boran}'></a></li>
      <li><a onclick="insertext('[color=#007000]','[/color]', {area})" style="background:#007000" title='{l_tags.color_grass}'></a></li>
      <li><a onclick="insertext('[color=#b00000]','[/color]', {area})" style="background:#b00000" title='{l_tags.color_bfur}'></a></li>
      <li><a onclick="insertext('[color=#7b5f43]','[/color]', {area})" style="background:#7b5f43" title='{l_tags.color_pbrou}'></a></li>
      <li><a onclick="insertext('[color=#eeae40]','[/color]', {area})" style="background:#eeae40" title='{l_tags.color_grod}'></a></li>
      <li><a onclick="insertext('[color=#000000]','[/color]', {area})" style="background:#000000" title='{l_tags.color_black}'></a></li>
      <li><a onclick="insertext('[color=#ffffff]','[/color]', {area})" style="background:#ffffff" title='{l_tags.color_white}'></a></li>
      <li><a onclick="insertext('[color=#ffc0cb]','[/color]', {area})" style="background:#ffc0cb" title='{l_tags.color_pink}'></a></li>
    </ul> 
  </li>

2. открываем файл ..../engine/lang/russian/common.ini

Вставляем туда следующие переменные:

Код:

tags.color_red    =    "Red"
tags.color_ogold    =    "Old Gold"
tags.color_rblue    =    "Royal Blue"
tags.color_ohra    =    "Ohra"
tags.color_teal    =    "Teal"
tags.color_odrab    =    "Olive Drab"
tags.color_mauve    =    "Mauve"
tags.color_nblue    =    "Navy blue"
tags.color_gray    =    "Gray"
tags.color_kblue    =    "Klein Blue"
tags.color_boran    =    "Burnt Orange"
tags.color_grass    =    "Grass"
tags.color_bfur    =    "Bismarck-furious"
tags.color_pbrou    =    "Pale brown"
tags.color_grod    =    "Goldenrod"
tags.color_black    =    "Black"
tags.color_white    =    "White"
tags.color_pink    =    "Pink"

Повторяем 2-й пункт для других языков, если ваш сайт поддерживает мультиязычность.

Буду делать тоже самое в комментариях, если там что-то будет отличаться, то выложу апдейт к этой инструкции.


Прикрепленные файлы:
color1.jpg, Размер: 37,624 байт, Скачано: 491

Неактивен

 

#2 2010-01-31 00:23:11

Wolverine
Модератор
Откуда: Домодедово
Зарегистрирован: 2008-10-13
Сообщений: 3538
Рейтинг :   160 
Профиль  Вебсайт

Re: Делаем нормальную форму с выборкой цветов в редакторе

Симпатично

Неактивен

 

#3 2010-01-31 11:34:01

infinity237
Модератор
Откуда: Russia, Moscow
Зарегистрирован: 2008-11-09
Сообщений: 2674
Рейтинг :   176 
Профиль  Вебсайт

Re: Делаем нормальную форму с выборкой цветов в редакторе

Неактивен

 
  • Список
  •  » FAQ
  •  » Делаем нормальную форму с выборкой цветов в редакторе

Board footer

Powered by FluxBB

[ Generated in 0.004 seconds, 10 queries executed ]