1001informer
Информеры для вас и ваших проектов
Стильные Информеры 2.0 by Apocalypse для uCoz
Качаем крутой мультибар "Тикно" для вашего рабочего стола! - Скачать
Очередной блок информеров, выполненный в
оригинальном стиле. Использован плагин verticaltabs для осуществления
плавного перехода между информерами. Также применены эффекты плавного
появления и исчезания информерами с затемнением заднего плана. Надеюсь,
вам понравится.
Установка:
Для начала настроим информеры:
А) [ Комментарии · Материалы · Дата добавления материала D · Материалы: 5 · Колонки: 1 ]
Шаблон информера:
Code
<code><style> <br> .td_b {border:1px dashed #888;background:#fff;} <br> .text {width:100%;height:60px;background:#fff;white-space: nowrap; overflow: hidden;} <br> .text:hover {height:60px;border:0;color:#888;background:#fff;} <br> .avatar {opacity:0.5} <br> .avatar:hover {opacity:1} <br> </style> <br><br> <table width="100%" cellspacing="0"> <br> <tr> <br> <td width="15" class="td_b">$NUMBER$</td> <br> <td width="45" class="td_b"> <br> <a href="$PROFILE_URL$" title="$USERNAME$"> <br> <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"> <br> </a> <br> </td> <br> <td class="td_b"> <br> <a href="$ENTRY_URL$" title="Клик для перехода к материалу $ENTRY_TITLE$"> <br> <div class="text" disabled>$MESSAGE$</div> <br> </a> <br> </td> <br> </tr> <br> </table>
class="avatar" width="45"
src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://www.apo-ucoz.com/images/noavatar.png<?endif?>"
border="0"> <br> </a> <br> </td> <br> <td class="td_b"> <br> <a href="$ENTRY_URL$" title="Клик для перехода к материалу $ENTRY_TITLE$"> <br> <div class="text" disabled>$MESSAGE$</div> <br> </a> <br> </td> <br> </tr> <br> </table>
Б) [ Форум · Материалы · Последние обновленные темы · Материалы: 10 · Колонки: 1 ]
Шаблон информера:
Code
<code><style> <br> img {cursor:pointer;} <br> .td_b {border:1px dashed #888;background:#fff;} <br> </style> <br><br> <table height="50pxpx" cellspacing="0"> <br> <tr> <br> <td width="20px" class="td_b" align="center"> <br> $NUMBER$ <br> </td> <br> <td title="Оставил последнее сообщение" width="120px" class="td_b" align="center"> <br> $POST_USER$ <br> </td> <br> <td width="360px" class="td_b"> <br> <a
href="$LAST_POST_URL$"><img width="16px" border="0"
src="/images/apoI/ftitle.png" title="Название форума: $THREAD_TITLE$"
/></a> <br> <img width="16px" border="0" src="/images/apoI/time.png" title="Тема создана: $DATE$, $WDAY$ в $TIME$" /> <br> <img width="16px" border="0" src="/images/apoI/posts.png" title="Всего ответов: $REPLIES$" /> <br> <a
href="javascript://" onclick="javascript:lLoad$NUMBER$();"><img
width="16px" border="0" src="/images/apoI/view.png" title="Подгрузить
последнее сообщение" /></a> <br> </td> <br> </tr> <br> </table> <br><br> <script> <br> function lLoad$NUMBER$() { <br> 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>'); <br> } <br> function lbtn$NUMBER$() { <br> $('#lhere$NUMBER$').load('$LAST_POST_URL$ #test:last', function () { <br> this.innerHTML = this.innerHTML.slice(0, 3000); <br> }); <br> } <br> </script></code>
href="$LAST_POST_URL$"><img width="16px" border="0"
src="/images/apoI/ftitle.png" title="Название форума: $THREAD_TITLE$"
/></a> <br> <img width="16px" border="0" src="/images/apoI/time.png" title="Тема создана: $DATE$, $WDAY$ в $TIME$" /> <br> <img width="16px" border="0" src="/images/apoI/posts.png" title="Всего ответов: $REPLIES$" /> <br> <a
href="javascript://" onclick="javascript:lLoad$NUMBER$();"><img
width="16px" border="0" src="/images/apoI/view.png" title="Подгрузить
последнее сообщение" /></a> <br> </td> <br> </tr> <br> </table> <br><br> <script> <br> function lLoad$NUMBER$() { <br> 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>'); <br> } <br> function lbtn$NUMBER$() { <br> $('#lhere$NUMBER$').load('$LAST_POST_URL$ #test:last', function () { <br> this.innerHTML = this.innerHTML.slice(0, 3000); <br> }); <br> } <br> </script></code>
В) [ Пользователи · Материалы · Репутация · Материалы: 5 · Колонки: 1 ]
Шаблон информера:
Code
<code><style> <br> .td_b {border:1px dashed #888;background:#fff;} <br> </style> <br><br> <table width="100%" cellspacing="0"> <br> <tr> <br> <td width="15" class="td_b">$NUMBER$</td> <br> <td width="45" class="td_b"> <br> <a href="$PROFILE_URL$" title="Клик для просмотра профиля $USERNAME$"> <br> <img
width="45"
src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>http://www.apo-ucoz.com/images/noavatar.png<?endif?>"
border="0"> <br> </a> <br> </td> <br> <td class="td_b" width="340" height="60"> <br> <table> <br> <tr><td width="120px"><b>ID пользователя:</b></td><td>$USER_ID$</td></tr> <br> <tr><td width="120px"><b>Репутация:</b></td><td>$REPUTATION$</td></tr> <br> <tr><td width="120px"><b>Группа:</b></td><td>$GROUP_NAME$</td></tr> <br> <tr><td width="120px"><b>Ранг:</b></td><td>$RANK_NAME$</td></tr> <br> <tr><td width="120px"><b>Зарегистрирован:</b></td><td>$REG_DATE$</td></tr> <br> </table> <br> </td> <br> </tr> <br> </table></code>
width="45"
src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>http://www.apo-ucoz.com/images/noavatar.png<?endif?>"
border="0"> <br> </a> <br> </td> <br> <td class="td_b" width="340" height="60"> <br> <table> <br> <tr><td width="120px"><b>ID пользователя:</b></td><td>$USER_ID$</td></tr> <br> <tr><td width="120px"><b>Репутация:</b></td><td>$REPUTATION$</td></tr> <br> <tr><td width="120px"><b>Группа:</b></td><td>$GROUP_NAME$</td></tr> <br> <tr><td width="120px"><b>Ранг:</b></td><td>$RANK_NAME$</td></tr> <br> <tr><td width="120px"><b>Зарегистрирован:</b></td><td>$REG_DATE$</td></tr> <br> </table> <br> </td> <br> </tr> <br> </table></code>
Г) [ Пользователи · Материалы · Дата регистрации D · Материалы: 5 · Колонки: 1 ]
Шаблон информера:
Code
<code><style> <br> .td_b {border:1px dashed #888;background:#fff;} <br> </style> <br><br> <table width="100%" cellspacing="0"> <br> <tr> <br> <td width="15" class="td_b">$NUMBER$</td> <br> <td width="45" class="td_b"> <br> <a href="$PROFILE_URL$" title="Клик для просмотра профиля $USERNAME$"> <br> <img
width="45"
src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>http://www.apo-ucoz.com/images/noavatar.png<?endif?>"
border="0"> <br> </a> <br> </td> <br> <td class="td_b" width="340" height="60"> <br> <table> <br> <tr><td width="120px"><b>ID пользователя:</b></td><td>$USER_ID$</td></tr> <br> <tr><td width="120px"><b>Репутация:</b></td><td>$REPUTATION$</td></tr> <br> <tr><td width="120px"><b>Группа:</b></td><td>$GROUP_NAME$</td></tr> <br> <tr><td width="120px"><b>Ранг:</b></td><td>$RANK_NAME$</td></tr> <br> <tr><td width="120px"><b>Зарегистрирован:</b></td><td>$REG_DATE$</td></tr> <br> </table> <br> </td> <br> </tr> <br> </table></code>
width="45"
src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>http://www.apo-ucoz.com/images/noavatar.png<?endif?>"
border="0"> <br> </a> <br> </td> <br> <td class="td_b" width="340" height="60"> <br> <table> <br> <tr><td width="120px"><b>ID пользователя:</b></td><td>$USER_ID$</td></tr> <br> <tr><td width="120px"><b>Репутация:</b></td><td>$REPUTATION$</td></tr> <br> <tr><td width="120px"><b>Группа:</b></td><td>$GROUP_NAME$</td></tr> <br> <tr><td width="120px"><b>Ранг:</b></td><td>$RANK_NAME$</td></tr> <br> <tr><td width="120px"><b>Зарегистрирован:</b></td><td>$REG_DATE$</td></tr> <br> </table> <br> </td> <br> </tr> <br> </table></code>
форума, чтобы он мог у нас цеплять и выводить последние сообщения. Для
этого иди те в Вид материалов форума и замените там $MESSAGE$ на:
Code
<code><span id="test">$MESSAGE$</span></code>
Следующий код вставляйте в то место, где должна быть ссылка на открытие блока информеров:
Code
<code><script type="text/javascript" src="/js/verticaltabs.pack.js"></script> <br> <link rel="stylesheet" href="/css/verticaltabs.css" /> <br> <script type="text/javascript"> <br> $(document).ready(function(){ <br> $("#textExample").verticaltabs({speed: 500,slideShow: false,activeIndex: 2}); <br> }); <br> </script> <br><br> <a href="javascript://" onclick="inApo();">[ Показать информеры ]</a> <br><br> <style> <br> .infoApo {opacity:0.8;display:none;position:absolute;left:50%;margin-left:-375px;z-index:100;top:50%;margin-top:-250px;} <br> .infoApoBack {display:none;position:fixed;width:100%;height:100%;background:#000;opacity:0.8;z-index:50;top:0px;left:0px;} <br> </style> <br><br> <div class="infoApoBack"></div> <br><br> <div class="infoApo"> <br> <div class="verticalslider" id="textExample"> <br> <ul class="verticalslider_tabs"> <br> <li><a href="#">Новички</a></li> <br> <li><a href="#">Ветераны</a></li> <br> <li><a href="#">Комментарии</a></li> <br> <li><a href="#">Форум</a></li> <br> </ul> <br> <ul class="verticalslider_contents"> <br> <li>$MYINF_5$</li> <br> <li>$MYINF_4$</li> <br> <li>$MYINF_2$</li> <br> <li>$MYINF_3$</li> <br> </ul> <br> </div> <br> </div> <br><br> <script> <br> function inApo() { <br> var apo1 = $('.infoApoBack');apo2 = $('.infoApo'); <br> apo1.click(function() { <br> $(this).fadeOut(100); <br> apo2.fadeOut(500); <br> }); <br> apo1.fadeIn(100); <br> apo2.fadeIn(500); <br> } <br> </script></code>
Не забудьте заменить переменные информеров на свои
Осталось лишь залить скрипт из прикреплённого архива в папку js, стиль в папку css и все картинки в папку apoIСкачать: http://1001informer.ucoz.ru/1227_apo.rar
Качаем крутой мультибар "Тикно" для вашего рабочего стола! - Скачать
