Смайлы в форме комментариев uCoz в один ряд
827материалов
228тем на форуме
3004комментария
6158пользователей

Смайлы в форме комментариев uCoz в один ряд


Всем доброго дня, сегодня мы будем создавать одно очень маленькое но удобное с точки зрения юзабилити решение.

Многие из вас знают, а кто-то нет, что в настройках формы добавление комментариев, существует системная переменная, отвечающая за отображение смайлов.

HTML
Код
<?if($SMILES$)?>$SMILES$<?endif?>

Которая преобразуется на странице контента и комментариев к ним в html код:

HTML
Код
<script type="text/javascript">function emoticon(code,nm){if (code != ""){var txtarea=document.getElementById(nm);code = ' ' + code + ' ';if (document.selection) {txtarea.focus();var txtContent = txtarea.value;var str = document.selection.createRange();if (str.text == ""){str.text = code;} else if (txtContent.indexOf(str.text) != -1){str.text = code + str.text;} else {txtarea.value = txtContent + code;}}else{txtarea.value = txtarea.value + code;}}}</script>   
     
   <table class="smiles" onmouseover="document.getElementById('asmltr6e5dN').style.display='';" onmouseout="document.getElementById('asmltr6e5dN').style.display='none';" border="0" cellpadding="2">   
   <tbody>   
   <tr>   
   <td class="sml1" align="center"><a href="javascript://" rel="nofollow" onclick="emoticon('>(','message');return false;"><img alt="" style="margin:0;padding:0;border:0;" src="http://s59.ucoz.net/sm/1/angry.gif" title="angry"></a></td>   
   <td class="sml1" align="center"><a href="javascript://" rel="nofollow" onclick="emoticon(':D','message');return false;"><img alt="" style="margin:0;padding:0;border:0;" src="http://s59.ucoz.net/sm/1/biggrin.gif" title="biggrin"></a></td>   
   <td class="sml1" align="center"><a href="javascript://" rel="nofollow" onclick="emoticon('B)','message');return false;"><img alt="" style="margin:0;padding:0;border:0;" src="http://s59.ucoz.net/sm/1/cool.gif" title="cool"></a></td>   
   </tr>   
     
   <tr>   
   <td class="sml1" align="center"><a href="javascript://" rel="nofollow" onclick="emoticon(':\'(','message');return false;"><img alt="" style="margin:0;padding:0;border:0;" src="http://s59.ucoz.net/sm/1/cry.gif" title="cry"></a></td>   
   <td class="sml1" align="center"><a href="javascript://" rel="nofollow" onclick="emoticon('<_<','message');return false;"><img alt="" style="margin:0;padding:0;border:0;" src="http://s59.ucoz.net/sm/1/dry.gif" title="dry"></a></td>   
   <td class="sml1" align="center"><a href="javascript://" rel="nofollow" onclick="emoticon('^_^','message');return false;"><img alt="" style="margin:0;padding:0;border:0;" src="http://s59.ucoz.net/sm/1/happy.gif" title="happy"></a></td>   
   </tr>   
     
   <tr>   
   <td class="sml1" align="center"><a href="javascript://" rel="nofollow" onclick="emoticon(':(','message');return false;"><img alt="" style="margin:0;padding:0;border:0;" src="http://s59.ucoz.net/sm/1/sad.gif" title="sad"></a></td>   
   <td class="sml1" align="center"><a href="javascript://" rel="nofollow" onclick="emoticon(':)','message');return false;"><img alt="" style="margin:0;padding:0;border:0;" src="http://s59.ucoz.net/sm/1/smile.gif" title="smile"></a></td>   
   <td class="sml1" align="center"><a href="javascript://" rel="nofollow" onclick="emoticon(':o','message');return false;"><img alt="" style="margin:0;padding:0;border:0;" src="http://s59.ucoz.net/sm/1/surprised.gif" title="surprised"></a></td>   
   </tr>   
     
   <tr>   
   <td class="sml1" align="center"><a href="javascript://" rel="nofollow" onclick="emoticon(':p','message');return false;"><img alt="" style="margin:0;padding:0;border:0;" src="http://s59.ucoz.net/sm/1/tongue.gif" title="tongue"></a></td>   
   <td class="sml1" align="center"><a href="javascript://" rel="nofollow" onclick="emoticon('%)','message');return false;"><img alt="" style="margin:0;padding:0;border:0;" src="http://s59.ucoz.net/sm/1/wacko.gif" title="wacko"></a></td>   
   <td class="sml1" align="center"><a href="javascript://" rel="nofollow" onclick="emoticon(';)','message');return false;"><img alt="" style="margin:0;padding:0;border:0;" src="http://s59.ucoz.net/sm/1/wink.gif" title="wink"></a></td>   
   </tr>   
     
   <tr id="asmltr6e5dN" style="display:none;">   
   <td colspan="3" id="allSmiles" align="center" nowrap="">   
   <a href="javascript://" rel="nofollow" onclick="new _uWnd('Sml',' ',-250,-350,{autosize:0,closeonesc:1,resize:0},{url:'/index/35-1-0'});return false;">Все смайлы</a>   
   </td>   
   </tr>   
     
   </tbody>   
   </table>

как вы понимаете снова много кода с нужными нам классами и иденддификатарами, которые помогут решить нашу задачу.

А задача проста как дважды два:

- нам следует поместить данную системную переменную смайлов в контейнер div
- а сам контейнер div необходимо поместить в html каркас формы добавление комментариев, над полем для добавление комментария

HTML
Код
<?if($SMILES$)?><div class="comment-smiles">$SMILES$</div><?endif?>

а теперь самое главное, нам необходимо благодаря css стилям прописать содержимое контейнера div в один ряд:

CSS
Код
/* Смайлы   
------------------------------------------*/   
.comment-smiles .smiles {border-collapse:collapse;}   
.comment-smiles .smiles img {float:left!important; margin-right: 5px!important; }   
.comment-smiles .smiles tr {float:left;}   
.comment-smiles #allSmiles {float:left; margin: 3px 0px 0px 5px; font-weight:bold;}

Вуаля наша с вами задача решена, мы установили таблицу и её данные, а это изображение смайликов и ссылку на все смайлы в один ряд, тем самым увеличили восприимчивость формы добавление комментарий на ucoz в лучшую сторону, согласитесь, что мелочь, а приятно!

На этом всё, спасибо за внимание!

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 24.08.2013 в 01:17
Материал просмотрен: 974 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта