Всем доброго дня, сегодня мы будем создавать одно очень маленькое но удобное с точки зрения юзабилити решение.
Многие из вас знают, а кто-то нет, что в настройках формы добавление комментариев, существует системная переменная, отвечающая за отображение смайлов.
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 в лучшую сторону, согласитесь, что мелочь, а приятно!
На этом всё, спасибо за внимание!
· 
10:01
