Вид комментариев благодаря вкладкам - Форум общения - Logical-portal

Время:

Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.146.152.119

Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.

Страница 1 из 1
1

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

Dndz	Сообщение оставлено 03.07.2011 в 19:38:34 \| Сообщение #1

3377

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

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

JS

Code

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

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

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

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

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

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

HTML-Code

Code

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

теперь в шаблон информера №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 стилях цветовую гамму данного контейнера, то вам придётся перерисовать изображение уголка, например в Фотошопе.

На этом всё...

Dndz	Сообщение оставлено 03.07.2011 в 19:38:34 \| Сообщение #1
Пользователь Ребенок моё счастье Сообщения: 2324 3377	Шаг-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 стилях цветовую гамму данного контейнера, то вам придётся перерисовать изображение уголка, например в Фотошопе. На этом всё...
	Профиль Цитата Вверх

Bonako

Сообщение оставлено 03.07.2011 в 23:17:33 | Сообщение #2

1077

Красиво, спасибо cool

Продам Steam-аккаунты по низким ценам, писать в ЛС

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

Страница 1 из 1
1