Вывод последних комментариев с помощью вкладок - Форум - Act-Cs.Ru - CS | CSS | CS:GO | Photoshop
Вывод последних комментариев с помощью вкладок
Master Дата: Пятница, 05.10.2012, 18:28 | Сообщение # 1
Горизонтальный вывод последних комментарий пользователей с помощью информеров uCoz, html-css и библиотеки jquery. В данном скрипте, комментарий выдается по нажатию на аватар автора коммента, который выдается в информере. 1. Перед тегом
поставьте:
Code
<script src="http://www.center-dm.ru/ucoz/tab_coment/tab_coment.js" type="text/javascript"></script>
2. Теперь нам нужно создать два одинаковых информера, но с разным кодом в шаблоне, для этого заходим в Админ панель => Инструменты => Информеры => Создать информер и создаём информеры для комментариев:
Code
Модуль: Все модули Количество материалов: 8 Количество колонок: 1
отлично, теперь в шаблон информера №1, устанавливаем следующий html код:
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://www.center-dm.ru/site/no_avatar.jpg" title="$NAME$" alt="аватар отсутствует" /><?endif?><?else?><img src="http://www.center-dm.ru/site/no_avatar.jpg" title="$NAME$" alt="аватар отсутствует" /><?endif?></a></li>
данный код, отвечает за отображения в списках аватара пользователя который оставил комментарий. теперь в шаблон информера №2, устанавливаем следующий html код:
Code
<div id="DM_$NUMBER$" class="tab_content_c"><a href="$ENTRY_URL$" target="_blank">$MESSAGE$</a></div>
данный код будет отвечать за отображение последнего комментария пользователя. 3. Теперь разместите данный html код в том месте, где вы хотите видеть последние комментария пользователей:
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> <!-- /Конец тегов табы -->
ID информеров поменяйте на свои. 4. В 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://www.center-dm.ru/ucoz/tab_coment/fon_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); } /*------------------------------------------*/
Banik Дата: Пятница, 04.01.2013, 19:01 | Сообщение # 2
Прикольно виглядає!! Нада буде собі поставити,тільки ше не придумав куди, напевно підійде в футер. Спасибі!
Администрация ответственности за содержание материала не несет.
Все файлы размещенные на нашем портале, принадлежат исключительно их владельцам.
При копировании материала, ссылка на сайт обязательна!
ACT-CS.ru 2012 - 2013 |
Хостинг от uCoz |
Карта сайта |
Карта форума |
Robots.txt |
RSS