Вид комментариев благодаря вкладкам


Вид комментариев благодаря вкладкам

1168
7.4 из 10
Проголосовало: 3






Шаг-1 Устанавливаем скрипт:

Незабываем, что в систему uCoz уже вшита библиотека jQuery (версия 1.3.2 и 1.6.1), поэтому прописывать дополнительные библиотеки нам не нужно, всё что мы пропишем, так это основной скрипт табов, который устанавливаем в конце вашей страницы, перед тегом </body>:

JS

Code
<script src="http://webo4ka.ru/Ucoz4/vid_kommentarievtab_coment.js" type="text/javascript"></script>


Шаг-2 Создаём информер:

Теперь нам нужно создать два одинаковых информера, но с разным кодом в шаблоне, для этого заходим в

Админ панель => Инструменты => Информеры => Создать информер

и создаём информеры для комментариев:

Модуль: Все модули
Количество материалов: 8
Количество колонок: 1

отлично, теперь в шаблон информера №1, устанавливаем следующий html код:

HTML-Code

Code
<li><a href="#DM_$NUMBER$"><?if($USERNAME$)?><?if($USER_AVATAR_URL$)?> <img alt="Аватар $USERNAME$" title="$USERNAME$" src="$USER_AVATAR_URL$" /><?else?><img src="http://webo4ka.ru/Ucoz4/vid_kommentarievno_avatar.jpg" title="$NAME$" alt="аватар отсутствует" /><?endif?><?else?><img src="http://webo4ka.ru/Ucoz4/vid_kommentarievno_avatar.jpg" title="$NAME$" alt="аватар отсутствует" /><?endif?></a></li>


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

теперь в шаблон информера №2, устанавливаем следующий html код:

HTML-Code

Code
<div id="DM_$NUMBER$" class="tab_content_c"><a href="$ENTRY_URL$" target="_blank">$MESSAGE$</a></div>


данный код будет отвечать за отображение последнего комментария пользователя, как многие могли заметить в 1-м и 2-м информере, мы будем использовать системную переменную $NUMBER$, которая будет служить якорем:
Шаг-3 Устанавливаем конечный код:

Теперь нам следует разместить данный html код в том месте, где вы хотите видеть последние комментария пользователей:

HTML-Code

Code
<!-- Начало тегов табы -->  
  <div id="tabs-coment-1">  
  <div class="tabs_c transparency_i">  
  <ul class="center_dm_ru_tabs">  
  $MYINF_1$  
  </ul>  
  $MYINF_2$  
  </div>  
  </div>  
  <!-- /Конец тегов табы -->


А вот и наши с вами информеры, которые мы прописываем именно системной переменно $MYINF_1$ , а не прямой ссылкой.
Шаг-4 Устанавливаем css стили:

Наш вывод последних комментарий почти готов, всё что осталось сделать, так это прописать css стили:

Code
/* Табы комментарий  
  ------------------------------------------*/  
  #tabs-coment-1{  
  width:500px;  
  margin: 15px 0px;  
  }  
   
  .center_dm_ru_tabs {  
  list-style:none;  
  margin:0;  
  padding:0;  
  }  

  .center_dm_ru_tabs li {  
  display: inline;  
  }  

  .center_dm_ru_tabs li a {  
  padding: 14px 5px 14px 5px;  
  }  

  .center_dm_ru_tabs li a.selected,ul  
  .center_dm_ru_tabs li a.selected:hover {  
  background:transparent url('http://webo4ka.ru/Ucoz4/vid_kommentarievfon_tab_ugol_verx.png') no-repeat center bottom;  
  border-bottom: 1px solid #F4F8F9;  
  }  

  .center_dm_ru_tabs li a:focus {  
  outline: 0;  
  }  

  .center_dm_ru_tabs li img {  
  width:40px;  
  height:40px;  
  background:#F4F8F9;  
  border:1px solid #B6D4E1;  
  padding: 3px;  
  }  
   
  .tab_content_c {  
  overflow: hidden;  
  text-align:justify;  
  border-top: 1px solid #cecece;  
  padding: 10px 10px 10px 10px;  
  margin-top: 13px;  
  border:1px solid #B6D4E1;  
  background:#F4F8F9;  
  }  

  .tab_content_c a:link,  
  .tab_content_c a:visited {text-decoration:none; color:#333;}  
  .tab_content_c a:hover {text-decoration:none; color:#777;}  
   
  .transparency_i a:hover img {  
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=70);  
  -moz-opacity: 0.7;  
  opacity: 0.7;  
  filter: alpha(opacity=70);  
  }  
  /*------------------------------------------*/


В данном решении использовано небольшое PNG изображение уголка, которое отображается вверху основного контейнера с комментарием, поэтому если вы захотите изменить в css стилях цветовую гамму данного контейнера, то вам придётся перерисовать изображение уголка, например в Фотошопе.

На этом всё...
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://www.center-dm.ru
  • Всего комментариев: 1

DJ_FORWARD
0
DJ_FORWARD написал: Написано 03 Июля 2011 в 21:31
Комментарий №1
хах смотрится неплохо...

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    404
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 12
    Гостей: 11
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: