Главная » Файлы » Скрипты для uCoz » Пользователи

Стильные Информеры 2.0 by Apocalypse для uCoz
23.06.14, 14:39:15

Скачать файл












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

Установка:

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

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

Шаблон информера:
Код
<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 ]

Шаблон информера:
Код
<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 ]

Шаблон информера:
Код
<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 ]

Шаблон информера:
Код
<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>


Настройка информеров закончена. У меня получились информеры: $MYINF_2$, $MYINF_3$, $MYINF_4$, $MYINF_5$. Осталось только доработать информер для форума, чтобы он мог у нас цеплять и выводить последние сообщения. Для этого иди те в Вид материалов форума и замените там $MESSAGE$ на:
Код
<span id="test">$MESSAGE$</span>


Следующий код вставляйте в то место, где должна быть ссылка на открытие блока информеров:
Код
<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

Материал подготовлен Apocalypse

Категория: Пользователи | Добавил: Apocalypse | Теги: 2.0, Информеры, Apocalypse, Стильные, ucoz, для, by
Просмотров: 312 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: