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


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

1188
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 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • sasha2016tv написал:
  • Хороший скрипт
    Ох. Вижу, что обсуждение очень старое. Но!
    На других CMS так же будет все это реализовано. На нормальных CMS.
    Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

    Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
    Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
    Последние темы
    Опрос
    229
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 2
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: