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


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

1178
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 25
Скрипты и модификации для Ucoz 2110
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • LeKcUs написал:
  • В самый конец просто добавьте вот такие теги... И у Вас не будет больше возникать вопросов! cry

    <!-- </popup> -->$POWERED_BY$<!-- <popup> -->
  • invitesystem написал:
  • Скачал архив, залил сайт, но проблема с кодом для вставки в конструктор шаблонов. Какие-то в нём знаки вопроса и без обязательного $POWERED_BY$
  • Marishka написал:
  • Можно, включите фантазию. Бесплатно никто ничего делать не будет.... Данный скрипт то написали так как попросили happy
  • BLAzER написал:
  • А на условных операторах это не сделать?
  • Вовчик написал:
  • Кто-то недавно об этом спрашивал
    Последние темы
    Опрос
    224
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 1
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: