[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Рекламный блок Форума
Реклама
  • Страница 1 из 1
  • 1
Архив - только для чтения
Всё для веб мастера. Скрипты для сайта uCoz » Скрипты для ucoz » Другие скрипты » Вид комментариев благодаря вкладкам
Вид комментариев благодаря вкладкам
PDA Дата: Понедельник, 04.07.2011, 14:12 | Сообщение # 1
Новичёк в ucoz
Сообщений: 52
Награды: 0
Репутация: 284


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

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

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);    
    }    
    /*------------------------------------------*/

Источник: center-dm.ru


ляля
Всё для веб мастера. Скрипты для сайта uCoz » Скрипты для ucoz » Другие скрипты » Вид комментариев благодаря вкладкам
  • Страница 1 из 1
  • 1
Поиск:

 
Ваш логин: Ваш пароль: