Стильные Информеры 2.0 by Apocalypse для uCoz


Стильные Информеры 2.0 by Apocalypse для uCoz

1171
10 из 10
Проголосовало: 1




Очередной блок информеров, выполненный в оригинальном стиле. Использован плагин verticaltabs для осуществления плавного перехода между информерами. Также применены эффекты плавного появления и исчезания информерами с затемнением заднего плана. Надеюсь, вам понравится.

Установка:

Для начала настроим информеры:

А) [ Комментарии · Материалы · Дата добавления материала D · Материалы: 5 · Колонки: 1 ]

Шаблон информера:

Code
<style>  
  .td_b {border:1px dashed #888;background:#fff;}  
  .text {width:100%;height:60px;background:#fff;white-space: nowrap; overflow: hidden;}  
  .text:hover {height:60px;border:0;color:#888;background:#fff;}  
  .avatar {opacity:0.5}  
  .avatar:hover {opacity:1}  
  </style>  

  <table width="100%" cellspacing="0">  
  <tr>  
  <td width="15" class="td_b">$NUMBER$</td>  
  <td width="45" class="td_b">  
  <a href="$PROFILE_URL$" title="$USERNAME$">  
  <img class="avatar" width="45" src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://www.apo-ucoz.com/images/noavatar.png<?endif?>" border="0">  
  </a>  
  </td>  
  <td class="td_b">  
  <a href="$ENTRY_URL$" title="Клик для перехода к материалу $ENTRY_TITLE$">  
  <div class="text" disabled>$MESSAGE$</div>  
  </a>  
  </td>  
  </tr>  
  </table>

Б) [ Форум · Материалы · Последние обновленные темы · Материалы: 10 · Колонки: 1 ]

Шаблон информера:

Code
<style>  
  img {cursor:pointer;}  
  .td_b {border:1px dashed #888;background:#fff;}  
  </style>  

  <table height="50pxpx" cellspacing="0">  
  <tr>  
  <td width="20px" class="td_b" align="center">  
  $NUMBER$  
  </td>  
  <td title="Оставил последнее сообщение" width="120px" class="td_b" align="center">  
  $POST_USER$  
  </td>  
  <td width="360px" class="td_b">  
  <a href="$LAST_POST_URL$"><img width="16px" border="0" src="/images/apoI/ftitle.png" title="Название форума: $THREAD_TITLE$" /></a>  
  <img width="16px" border="0" src="/images/apoI/time.png" title="Тема создана: $DATE$, $WDAY$ в $TIME$" />  
  <img width="16px" border="0" src="/images/apoI/posts.png" title="Всего ответов: $REPLIES$" />  
  <a href="javascript://" onclick="javascript:lLoad$NUMBER$();"><img width="16px" border="0" src="/images/apoI/view.png" title="Подгрузить последнее сообщение" /></a>  
  </td>  
  </tr>  
  </table>  

  <script>  
  function lLoad$NUMBER$() {  
  new _uWnd('name','Последнее сообщение форума «$THREAD_TITLE$»', 400, 200, {alert:1, autosize: 0, fixed: 1, resize: 1, fadetype: 2, fadespeed: 500, fadeclosetype: 2, fadeclosespeed: 500} , '<a href="javascript://" onclick="javascript:lbtn$NUMBER$();">Подгрузить сообщение</a><br><br><div id="lhere$NUMBER$"></div>');  
  }  
  function lbtn$NUMBER$() {  
  $('#lhere$NUMBER$').load('$LAST_POST_URL$ #test:last', function () {  
  this.innerHTML = this.innerHTML.slice(0, 3000);  
  });  
  }  
  </script>

В) [ Пользователи · Материалы · Репутация · Материалы: 5 · Колонки: 1 ]

Шаблон информера:

Code
<style>  
  .td_b {border:1px dashed #888;background:#fff;}  
  </style>  

  <table width="100%" cellspacing="0">  
  <tr>  
  <td width="15" class="td_b">$NUMBER$</td>  
  <td width="45" class="td_b">  
  <a href="$PROFILE_URL$" title="Клик для просмотра профиля $USERNAME$">  
  <img width="45" src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>http://www.apo-ucoz.com/images/noavatar.png<?endif?>" border="0">  
  </a>  
  </td>  
  <td class="td_b" width="340" height="60">  
  <table>  
  <tr><td width="120px"><b>ID пользователя:</b></td><td>$USER_ID$</td></tr>  
  <tr><td width="120px"><b>Репутация:</b></td><td>$REPUTATION$</td></tr>  
  <tr><td width="120px"><b>Группа:</b></td><td>$GROUP_NAME$</td></tr>  
  <tr><td width="120px"><b>Ранг:</b></td><td>$RANK_NAME$</td></tr>  
  <tr><td width="120px"><b>Зарегистрирован:</b></td><td>$REG_DATE$</td></tr>  
  </table>  
  </td>  
  </tr>  
  </table>

Г) [ Пользователи · Материалы · Дата регистрации D · Материалы: 5 · Колонки: 1 ]

Шаблон информера:

Code
<style>  
  .td_b {border:1px dashed #888;background:#fff;}  
  </style>  

  <table width="100%" cellspacing="0">  
  <tr>  
  <td width="15" class="td_b">$NUMBER$</td>  
  <td width="45" class="td_b">  
  <a href="$PROFILE_URL$" title="Клик для просмотра профиля $USERNAME$">  
  <img width="45" src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>http://www.apo-ucoz.com/images/noavatar.png<?endif?>" border="0">  
  </a>  
  </td>  
  <td class="td_b" width="340" height="60">  
  <table>  
  <tr><td width="120px"><b>ID пользователя:</b></td><td>$USER_ID$</td></tr>  
  <tr><td width="120px"><b>Репутация:</b></td><td>$REPUTATION$</td></tr>  
  <tr><td width="120px"><b>Группа:</b></td><td>$GROUP_NAME$</td></tr>  
  <tr><td width="120px"><b>Ранг:</b></td><td>$RANK_NAME$</td></tr>  
  <tr><td width="120px"><b>Зарегистрирован:</b></td><td>$REG_DATE$</td></tr>  
  </table>  
  </td>  
  </tr>  
  </table>

Настройка информеров закончена. Осталось только доработать информер для форума, чтобы он мог у нас цеплять и выводить последние сообщения. Для этого иди те в Вид материалов форума и замените там $MESSAGE$ на:

Code
<span id="test">$MESSAGE$</span>

Следующий код вставляйте в то место, где должна быть ссылка на открытие блока информеров:

Code
<script type="text/javascript" src="/js/verticaltabs.pack.js"></script>  
  <link rel="stylesheet" href="/css/verticaltabs.css" />  
  <script type="text/javascript">  
  $(document).ready(function(){  
  $("#textExample").verticaltabs({speed: 500,slideShow: false,activeIndex: 2});  
  });  
  </script>  

  <a href="javascript://" onclick="inApo();">[ Показать информеры ]</a>  

  <style>  
  .infoApo {opacity:0.8;display:none;position:absolute;left:50%;margin-left:-375px;z-index:100;top:50%;margin-top:-250px;}  
  .infoApoBack {display:none;position:fixed;width:100%;height:100%;background:#000;opacity:0.8;z-index:50;top:0px;left:0px;}  
  </style>  

  <div class="infoApoBack"></div>  

  <div class="infoApo">  
  <div class="verticalslider" id="textExample">  
  <ul class="verticalslider_tabs">  
  <li><a href="#">Новички</a></li>  
  <li><a href="#">Ветераны</a></li>  
  <li><a href="#">Комментарии</a></li>  
  <li><a href="#">Форум</a></li>  
  </ul>  
  <ul class="verticalslider_contents">  
  <li>$MYINF_5$</li>  
  <li>$MYINF_4$</li>  
  <li>$MYINF_2$</li>  
  <li>$MYINF_3$</li>  
  </ul>  
  </div>  
  </div>  

  <script>  
  function inApo() {  
  var apo1 = $('.infoApoBack');apo2 = $('.infoApo');  
  apo1.click(function() {  
  $(this).fadeOut(100);  
  apo2.fadeOut(500);  
  });  
  apo1.fadeIn(100);  
  apo2.fadeIn(500);  
  }  
  </script>

Не забудьте заменить переменные информеров на свои

Осталось лишь залить скрипт из прикреплённого архива в папку js, стиль в папку css и все картинки в папку apoI

Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://apo-ucoz.com
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 9
    Гостей: 7
    Пользователей: 2
    0
    Сегодня были
    Топ пользователей: