Регистрация    Войти
Авторизация

Вид комментариев в стиле Facebook для ucoz

Вид комментариев в стиле Facebook для ucoz

Вид комментариев в стиле Facebook для ucoz. Очередная наработка в стиле социальной сети "Facebook". Очень красивые и функциональные комментарии, которые подойдут под любой светлый дизайн.

Исправлены uWnd окошки со ссылками на комментарии.
Отправка сообщений в браузере Opera подправлена.
Подправил недочёты

Особенности:
1. Красивые кнопки удаления комментария.
Вид комментариев в стиле Facebook для ucoz

2. Красивые формы добавления комментариев.
Вид комментариев в стиле Facebook для ucoz

3. Отправка комментария клавишей Enter.
4. Вывод ошибок в uWnd окошке в углу.

Установка.
1. В css вставляем это:
/*--------------------- FacebookCommStyle start ---------------------*/
.aurComm {background:#edeff4;border-bottom:1px solid #d2d9e7;margin-bottom:1px;padding:5px;}
.aurCommBody {margin:0 17 0 37px;font-size:11px;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;color:#333;line-height:1.28;}
.aurCommUser {color:#3b5998;font-weight:bold;text-decoration:none;}
.aurCommLink {color:#3b5998;text-decoration:none;}
.aurCommTime {color:#808080;text-decoration:none;}
.aurCommUser:hover,.aurCommTime:hover,.aurCommLink:hover {text-decoration:underline;}
.aurCommAva {float:left;width:37px;height:32px;}
.aurCommAva img {width:32px;height:32px;}
.aurCommDel {display:none;float:right;width:15px;height:15px;background:url(/aurComm/aurCommDel.png);background-position:0 0px;}
.aurCommDel:hover {background:url(/aurComm/aurCommDel.png);background-position:0 16px;}
.aurCommTopugol {width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #edeff4;margin-left:14px;}
.aurCommInput {width:100%;height:22px;border:1px solid #bdc7d8 !important;}
.aurCommText {font-size:9px;color:#808080;}
.aurCommSecurity {padding-left:5px;}
.aurCommSecurity .securityCode {width:78px;height:22px;color:#000;text-transform:uppercase;font-size:11px !important;padding:3 0 0 0px;position:absolute;border:1px solid #bdc7d8 !important;background:rgba(255,255,255,0.5)}
.aurCommSecurity #secuImgC {height:22px;}
.aurCommInputName {width:91px;height:22px;padding:3 0 0 0px;border:1px solid #bdc7d8 !important;}
/*--------------------- FacebookCommStyle end ---------------------*/

2. Заменяем всё содержимое вида комментариев на это:
<div class="aurComm" style="min-height:32px;" id="$ID$"<?if($MODER_PANEL$)?> onmouseover="$('div[name=del$ID$]').show()" onmouseout="$('div[name=del$ID$]').hide()"<?endif?>> 
<?if($MODER_PANEL$)?><a href="javascript://" rel="nofollow" onclick="del_item($ID$);return false;" id="di$ID$"><div class="aurCommDel" name="del$ID$"></div></a><?endif?>
<div class="aurCommAva"><?if($PROFILE_URL$)?><a href="$PROFILE_URL$"><?endif?><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>/aurComm/aurCommAva.png<?endif?>"><?if($PROFILE_URL$)?></a><?endif?></div>
<div class="aurCommBody"><?if($PROFILE_URL$)?><a href="$PROFILE_URL$" class="aurCommUser">$USERNAME$</a><?else?><a class="aurCommUser">$NAME$</a><?endif?> $MESSAGE$<br><script type="text/javascript">function aurCommLink$ID$() {new _uWnd('ajax','Ссылка на комментарий','350','70',{autosize:false,modal: true,close:true,header:true,nomove: true,fixed:true},'<input type="text" onclick="this.select()" style="width:100%;" value="' + location.href + '#$ID$" />')}</script><a href="javascript://" onclick="aurCommLink$ID$()" class="aurCommTime">$DATE$ в $TIME$</a><?if($MODER_PANEL$)?> <a href="javascript://" rel="nofollow" onclick="new _uWnd('Ie',' ',-600,-200,{autosize:1,closeonesc:1,resize:0},{url:'/index/37-$ID$'});return false;" class="aurCommLink">Редактировать</a><?endif?></div>
</div>

3. Заменяем всё содержимое формы добавления комментариев на это:
<div class="aurComm"> 
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="37" rowspan="2" id="aurHide"><div class="aurCommAva"><img
class="aurCommAvaImg" src=""></div></td>
<?if($USER_LOGGED_IN$)?><?else?><td width="96" id="aurHide2"><input
class="aurCommInputName" id="aciname" type="text" name="name" value="$NAME$" maxlength="20" placeholder="Меня зовут"></td><?endif?>
<td height="22"><input class="aurCommInput" name="message" id="message"
placeholder="Оставить комментарий..."></td>
<?if($SECURITY_CODE$)?><td width="96" id="aurHide2" class="aurCommSecurity">
$SECURITY_CODE$</td><?endif?>
</tr>
<tr>
<td height="10" id="aurHide" class="aurCommText" colspan="3"><div>Нажмите
клавишу ввод, чтобы опубликовать свой комментарий.</div></td>
</tr>
</table>
</div>
<script type="text/javascript">
$('td#aurHide, td#aurHide2').hide();
$('#message').bind('click', function (e){  
  $('td#aurHide').show();
});
$('#message').keyup(function() {  
  if ($('#message').val().length > 0) {  
  $('td#aurHide2').show()
  }
  else {
  $('td#aurHide2').hide()
  }
});  
$('body').bind('click', function (e){
  if (e.target.id != 'message' && $('#message').val().length < 1) {  
  $('td#aurHide').hide();
}
});

$('input').keypress(function(e) {  
  if(e.which == 13) {  
  _uWnd.alert('$ERROR$','',{w:200,h:40,tm:5000});
}  
});  

$('#secuImgC').next('img').attr('src','/aurComm/aurCommRe.png');
</script>

4. На странице материала и комментариев к нему нужного вам модуля ищем $COM_BODY$ и перед ним ставим это:
<div class="aurCommTopugol"></div><div class="aurComm"><img src="/aurComm/aurCommComm.png" style="float:left;padding-right:5px;"><script type="text/javascript">function aurCommLink() {new _uWnd('ajax','Ссылка на комментарии','350','70',{autosize:false,modal: true,close:true,header:true,nomove: true,fixed:true},'<input type="text" onclick="this.select()" style="width:100%;" value="' + location.href + '#comments" />')}</script><a href="javascript://" onclick="aurCommLink()" class="aurCommLink"><?if($COMMENTS_NUM$)?>Всего $COMMENTS_NUM$ комментар<?if($COMMENTS_NUM$%10=1&&$COMMENTS_NUM$%100!=11)?>ий<?else?><?if($COMMENTS_NUM$%10>=2&&$COMMENTS_NUM$%10<=4&&($COMMENTS_NUM$%100<10||$COMMENTS_NUM$%100>=20))?>ия<?else?>иев<?endif?><?endif?><?else?>Нет комментарие<?endif?></a></div>

5. На странице материала и комментариев к нему нужного вам модуля перед закрывающим тегом ставим это:
<script type="text/javascript"> 
$('input').keypress(function(e) {  
  if(e.which == 13) {  
<?if($USER_AGENT$='opera')?> addcom();<?else?><?if($GROUP_ID$=4||$GROUP_ID$=3||
$GROUP_ID$=2||$GROUP_ID$=251)?><?else?> addcom();<?endif?><?endif?>
  $('#message').blur();
  setTimeout("$('#message').focus()",1000);
}  
});  

$('.aurCommAvaImg').attr('src','<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?
else?>/aurComm/aurCommAva.png<?endif?>');
</script>

6. Загружаем к себе на сайт содержимое архива, чтобы путь был такой:
http://ваш_сайт/aurComm/aurCommAva.png
http://ваш_сайт/aurComm/aurCommComm.png
http://ваш_сайт/aurComm/aurCommDel.png
http://ваш_сайт/aurComm/aurCommRe.png

[hide=0,1]
Скачать: aurcomm.rar [14,29 Kb] (cкачиваний: 149)
[/hide]

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  12-03-2012, 10:49   Просмотров: 6743   
Facebook, наработка, сети, светлый, красивые, которые, любой, функциональные, подойдут, Очень, ucoz,
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Пользователь offline Kongressman 12 марта 2012 11:40
Это очень интересно!

          1
Пользователь offline Symp 12 марта 2012 11:59
выглядит очень красиво

          2
Пользователь offline artemka1 13 марта 2012 02:38
Все красиво сделано. Круто!

          3
Пользователь offline Kelin 13 марта 2012 09:32
biggrin_mini2
Кругом одни риперы, о-о-ой, че в мире творится xDD

          4
Пользователь offline DARK 13 марта 2012 19:03
Кул я себе поставил)

          5
Пользователь offline Jetance 18 марта 2012 14:05
Нормальненька... вот толька у мя поставилось кривовато... а так симпатично... Спасибо...

          6
Пользователь offline Fancor 18 марта 2012 19:16
Полезный скрипт

          7
Пользователь offline Posternakd 29 марта 2012 11:50
спасибо!!! ok_mini

          8
Пользователь offline xrumer 29 марта 2012 18:14
Классно будет смотреть на кино-порталах со светлым шаблоном:)

          9
Пользователь offline sandra8012 30 марта 2012 04:53
полезная статейка

          10
Пользователь offline kemtron 1 апреля 2012 22:50
Со стороны выглядет красиво. Сейчас установлю.

          11
Пользователь offline kemtron 1 апреля 2012 23:22
Очень криво, не так как на скинах...удалил.

          12
Пользователь offline lazara 2 апреля 2012 23:31
Очень криво, не так как на скинах...удалил.

          13
Пользователь offline Mentos 5 апреля 2012 10:28
Я пишу этот комент для того чтобы скачать а вы?

          14
Пользователь offline Гапонов Максим 7 апреля 2012 06:09
Во на что гаразды народные умельцы good_mini drink_mini

          15
Пользователь offline paskaties 15 апреля 2012 23:56
спасибо!!! dance_mini

          16
Пользователь offline Sasha-wins 17 апреля 2012 05:29
Куртой скрипт)

          17
Пользователь offline nigez 19 апреля 2012 16:52
очень пригодился!

          18
Пользователь offline 1234servo 30 июня 2012 22:04
РЕбят помогите пожалуйста ! У меня гдето видать в стилях шаблона прописана тень для текста (( И в поле, точнее в виде комментов эта тень накладывает свой отпечаток - слова деляются не читабельными, размазанными и не резчкими. Подскажите, как это исправить ? Спасибо !

          19
Пользователь offline chestr 1 июля 2012 12:43
Цитата: 1234servo
РЕбят помогите пожалуйста ! У меня гдето видать в стилях шаблона прописана тень для текста (( И в поле, точнее в виде комментов эта тень накладывает свой отпечаток - слова деляются не читабельными, размазанными и не резчкими. Подскажите, как это исправить ? Спасибо !

6. Загружаем к себе на сайт содержимое архива, чтобы путь был такой:
ваш_сайт/aurComm/aurCommAva.png
ваш_сайт/aurComm/aurCommComm.png
ваш_сайт/aurComm/aurCommDel.png
ваш_сайт/aurComm/aurCommRe.png

          20

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.