Чат uSite
Загрузка чата..
Все новости
Новости uSite
19.05.2012
Открыли «Оповещения» (β).
29.04.2012
Сделан до конца вид материалов форума.
Пользователи онлайн
Загрузка списка...
Уникальные скрипты » Комментарии » Вид комментариев
Очень хороший вид комментариев, "свёрстанный" мною три года назад... лежит без дела.

Особенности:
- jQuery
- Вёрстка на div
- Простой, компактный, приятный вид
- Скрытие и "упрозрачнивание" плохих комментариев.
- Меню при наведении на комментарий (Блок модератора, профиль, лс, цитирование, ответ)
- При наличии highslide.js открытие лс и профиля в изящном окошке (см. https://www.dropbox.com/s/ix1ks2son2kadaw/shot_130223_035609.png)

HTML (вид комментариев)
Код
<div class="<?if($COMMENT_RATING$='-1')?>commneg1 <?endif?><?if($COMMENT_RATING$='-2')?>commneg2 <?endif?><?if($COMMENT_RATING$='-3')?>commneg3 <?endif?><?if($COMMENT_RATING$='-4')?>commneg4 <?endif?><?if($COMMENT_RATING$<='-5')?>commneg5 <?endif?>comm $CLASS$">

  <div class="commava">
  <a class="commun" href="javascript:emoticon('[b]$USERNAME$[/b],','message');void(0)">$USERNAME$</a>
  <div <?if($COMMENT_RATING$<='-5')?>class="closedComment"<?endif?> style="padding-top:6px;"><img alt="" src="$USER_AVATAR_URL$" width="64" border="0" class="middle" /></div>
  </div>

<?if($COMMENT_RATING$<='-5')?><div class="closedComment"><?endif?>
  <div class="commtop">
   
  <div class="cRaiting" id="cRating$ID$">
  <a href="javascript://" <?if($GOOD_COMMENT_URL$)?>onclick="comVote(false, $ID$)"<?endif?> <?if($IS_OWN$)?>onclick="_uWnd.alert('You can't rate your comments!','',{w:230,h:80,tm:4000})"<?endif?> class="RateDn<?if(!$GOOD_COMMENT_URL$)?> inactive<?endif?>"><img alt="" src="http://www.hl2dm.pro/img/cppics/badc.png" class="middle" border="0" title="Bad comment"></a>
   
  <span id="comRate$ID$" class="<?if($COMMENT_RATING$<0)?>cRnegative"><?else?><?if($COMMENT_RATING$=0||!$COMMENT_RATING$)?>cRzero"><?else?>cRpositive">+<?endif?><?endif?><?if(!$COMMENT_RATING$)?>0<?else?>$COMMENT_RATING$<?endif?></span>
   
  <a href="javascript://" <?if($GOOD_COMMENT_URL$)?>onclick="comVote(true, $ID$)"<?endif?> <?if($IS_OWN$)?>onclick="_uWnd.alert('You can't rate your comments!','',{w:230,h:80,tm:4000})"<?endif?> class="RateUp<?if(!$GOOD_COMMENT_URL$)?> inactive<?endif?>"><img alt="" src="http://www.hl2dm.pro/img/cppics/goodc.png" class="middle" border="0" title="Good comment"></a>
   
  </div>
   
  <div class="commtopl"><span style="color:#666;">#<a href="#ent$ID$" onclick="if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$" style="color:#666;">$NUMBER$</a></span> ($DATE$ $TIME$)
<?if($ENTRY_URL$)?>[<a href="$ENTRY_URL$" target="_blank">Source</a>]<?endif?>
</div>
<div class="clearfloat"></div></div>
  <div class="commcontent"><div class="commhint"><?if($MODER_PANEL$)?><span style="display:none;">$MODER_PANEL$</span><span id="moderp$ID$" style="display:none;">
<a onclick="new _uWnd('Ie',' ',-600,-200,{autosize:1,closeonesc:1,resize:0},{url:'/index/37-$ID$'});return false;" rel="nofollow" href="javascript://"><img border="0" src="http://www.hl2dm.pro/img/cppics/edit_profile.png" tooltip="Edit" alt=""></a> <?if($CUR_GROUP_ID$=4)?><a onclick="del_item($ID$);return false;" rel="nofollow" href="javascript://"><img border="0" src="http://www.hl2dm.pro/img/cppics/delete.png" tooltip="Delete" alt=""></a><?endif?></span> <img width="6" height="16" border="0" src="http://s15.ucoz.net/img/fr/EmnAR.gif" onclick="if(document.getElementById('moderp$ID$').style.display=='none'){document.getElementById('moderp$ID$').style.display='';this.src='http://s15.ucoz.net/img/fr/EmnAR_.gif';this.title='Close';}else{document.getElementById('moderp$ID$').style.display='none';this.src='http://s15.ucoz.net/img/fr/EmnAR.gif';this.title='Open';}" style="cursor: pointer;" tooltip="Open" title="Open"> <?endif?><a href="$PROFILE_URL$" onclick="return hs.htmlExpand(this, { objectType: 'iframe',width: 600,height: 400, headingText: '$USERNAME$ - User Profile',width:618, wrapperClassName: 'titlebar' } )"><img src="http://www.hl2dm.pro/img/cppics/userprofile.png" border="0" alt="" title="User profile" /></a><?if($IS_OWN$)?><?else?> <a href="http://www.hl2dm.pro/index/14-<?substr($PROFILE_URL$,39,len($PROFILE_URL$)-55)?>-0-1" onclick="return hs.htmlExpand(this, { objectType: 'iframe',width: 600,height: 400, headingText: '$USERNAME$ - Send PM', wrapperClassName: 'titlebar' } )"><img src="http://www.hl2dm.pro/img/cppics/pm.png" border="0" alt="" title="Send primary message" /></a><?endif?> <a href="javascript:Insert('#$NUMBER$, $USERNAME$',selection);" onMouseOver="get_selection()"><img src="http://www.hl2dm.pro/img/cppics/quote.png" border="0" alt="" title="Quote" /></a><?if($ANSWER_URL$)?> <a href="$ANSWER_URL$" onMouseOver="get_selection()"><img src="http://www.hl2dm.pro/img/cppics/reply.png" border="0" alt="" title="Reply" /></a><?endif?></div>$MESSAGE$
  <?if($ANSWER$)?><div class="commanswer"><b>Reply</b>: $ANSWER$</div><?endif?>
  </div>
  <?if($COMMENT_RATING$<='-5')?></div>
  <div id="shc$ID$" class="commhide"> Click <a href="javascript://" onclick="$('#comEnt$ID$ .closedComment').fadeIn('slow');$('#comEnt$ID$ #shc$ID$').css({'display': 'none'});">here</a>, to show bad comment.</div><?endif?>
  <div class="clearfloat"></div>
</div>

Используйте
$COMMENT_RATING$ - для настройки "скрываемости" комментариев
<?if($CUR_GROUP_ID$=id)?> - для установки групп, которые могут видеть значок "удалить комментарий"

<img src="http://www.hl2dm.pro/img/cppics/**.png" ... пути к иконкам, если хотите заменить их на свои
для отключения прозрачности, оставить в первом и главном div в class только ="comm $CLASS$"
...

CSS:
Код
/* Comments */
.comm {border:1px solid #999;margin-top:16px;}
.commava {float:left;width:88px;font-size:8pt;text-align:center;padding:4px;}
.commun {display:block;font-weight:bold;}
.commtop {margin:0 0 0 96px;padding:2px;border-left:1px solid #CCC;height:18px;font-size:8pt;}
.commtopl {font-size:8pt;border-bottom:1px dashed #CCC;height:18px;padding:2px 0 0 2px;}
.commcontent {margin:0 0 0 96px;padding:4px 4px 16px;border-left:1px solid #CCC;min-height:64px;height:auto !important;height:64px;position:relative;}
.commcontent ul {margin-left:10px;padding-left:0px;}
.commcontent li {margin-left:10px;padding-left:0px;list-style-type:circle;}
.commhide {margin:0 0 0 96px;padding:4px;border-left:1px solid #CCC;font-size:8pt;}
.commhint {position:absolute;display:none;text-align:right;right:4px;bottom:4px;width:200px;}
.commanswer {padding-left:15px;padding-top:4px;font-style:italic;text-align:left;clear:both;border-top:1px solid #CCC;}

.cRaiting {float:right;height:18px;padding:2px 0 0 2px;}

.commneg1 {opacity: 0.8;-moz-opacity: 0.8;filter: alpha(opacity=80);}
.commneg2 {opacity: 0.7;-moz-opacity: 0.7;filter: alpha(opacity=70);}
.commneg3 {opacity: 0.6;-moz-opacity: 0.6;filter: alpha(opacity=60);}
.commneg4 {opacity: 0.5;-moz-opacity: 0.5;filter: alpha(opacity=50);}
.commneg5 {opacity: 0.4;-moz-opacity: 0.4;filter: alpha(opacity=40);}

.closedComment {display:none;}
.clearfloat {clear:both;margin:0;padding:0;}

Разбирайтесь.

Если что-то из js тут не работает, значит я что-то забыл, пишите в комменты..
Всего 2 комментария и 1891 просмотр
Паходу твой первый работа!
Фигово, uSite. Говноскриптики и коды выкладываете, пфф
uSite.su © 2010-2024
Все права защищены.
Лишь самые новые разработки для системы uCoz, среди которых находятся уникальные скрипты и великолепные части дизайна, совокупность которых порождает любимый многими сайт — uSite.su.
01RSS
Хостинг от uCozПользовательское соглашение и прочая информация