Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Информер топовиков со вкладками
Информер топовиков со вкладками
AndreyДата: Пятница, 14.03.2014, 15:18:51 | Сообщение # 1
Технарь
Offline
3

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

И так начнём установку. Сначала создадим четыре информера

Первый
Пользователи · Материалы · Кол. файлов · Материалы: 10 · Колонки: 1 и в шаблон информера сохраняем код:
Код
<table> <tbody><tr> <td width="70%"><a href="$PROFILE_URL$" target="_blank">$USERNAME$</a></td> <td style="text-align: right;" width="30%">$NEWS_POSTS$</td> </tr> </tbody></table>


Второй
Пользователи · Материалы · Кол. сообщений в форуме · Материалы: 10 · Колонки: 1 в шаблон информера сохраняем код:
Код
<table> <tbody><tr> <td width="70%"><a href="$PROFILE_URL$" target="_blank">$USERNAME$</a></td> <td style="text-align: right;" width="30%">$FORUM_POSTS$</td> </tr> </tbody></table>


Третий
Пользователи · Материалы · Кол. комментариев · Материалы: 10 · Колонки: 1 в шаблон информера сохраняем код:
Код
<table> <tbody><tr> <td width="70%"><a href="$PROFILE_URL$" target="_blank">$USERNAME$</a></td> <td style="text-align: right;" width="30%">$COM_POSTS$</td> </tr> </tbody></table>


И четвёртый
Пользователи · Материалы · Репутация · Материалы: 10 · Колонки: 1 в шаблон информера сохраняем код:
Код
<table> <tbody><tr> <td width="70%"><a href="$PROFILE_URL$" target="_blank">$USERNAME$</a></td> <td style="text-align: right;" width="30%">$REPUTATION$</td> </tr> </tbody></table>


В CSS пропишем стиль нашего информера:
Код
/* TOPOVIKI ========================*/   
   .tabs-form{height: 240px;}   
   .tab_content table {border-bottom: 1px dotted #6f6f6f;padding: 0 0 1px 0; margin: 0 0 2px 0;width: 100%;}   
   .tab_container{border-top: none; clear: both;float: left;width: 100%; }   
   .tab_content{border-top:1px solid #ccc; padding: 6px;font-size: 11px;}   
   .tab_content a{text-decoration:none;}   
   .tab_content a:hover{text-decoration:underline;}   
   table.form {margin-bottom:20px;margin-top:20px;}   
   table.form, table.form td {border:1px solid #ccc;}   
   table.form td {padding:1px;}   
   ul.tabs {list-style:none;margin:0;padding:0;}   
   ul.tabs li {float:left;padding:3px 6px;}   
   ul.tabs li.active {background:#e5e5e5; border-radius: 5px 5px 0px 0px;}   
   #tab1, #tab2,#tab3,#tab4 {display:none;}


Теперь там где хотите видеть нформер топовиков, прописываем:
Код
<div class="tabs-form">   
   <ul class="tabs">   
   <li class=""><a href="#tab1">Файлы</a></li>   
   <li class=""><a href="#tab2">Форум</a></li>   
   <li class=""><a href="#tab3">Комен</a></li>   
   <li class=""><a href="#tab4">Репа</a></li>   
   </ul>   
   <div class="tab_container">   
   <div style="display: block;" id="tab1" class="tab_content">$MYINF_1$</div>   
   <div style="display: none;" id="tab2" class="tab_content">$MYINF_2$</div>   
   <div style="display: none;" id="tab3" class="tab_content">$MYINF_3$</div>   
   <div style="display: none;" id="tab4" class="tab_content">$MYINF_4$</div>   
   </div></div>

Информеры $MYINF_1$, $MYINF_2$, $MYINF_3$, $MYINF_4$ меняем на свои

И нам осталось только подключить два JS скрипта которые и будут переключать наши вкладки
После </body>, (можно сразу после информеров) прописываем:
Код
<script type="text/javascript">   
   $(document).ready(function(){   
   $('.splLink').click(function(){   
   $(this).parent().children('div.splCont').toggle('normal');   
   return false;   
   });   
   });   
   </script>   
   <script type="text/javascript">   

   $(document).ready(function() {   
   $(".tab_content").hide();   
   $("ul.tabs li:first").addClass("active").show();   
   $(".tab_content:first").show();   
     
   $("ul.tabs li").click(function() {   
   $("ul.tabs li").removeClass("active");   
   $(this).addClass("active");   
   $(".tab_content").hide();   
   var activeTab = $(this).find("a").attr("href");   
   $(activeTab).fadeIn();   
   return false;});});
</script>


Вот и всё, наши информеры топовиков установлены

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Информер топовиков со вкладками
Страница 1 из 11
Поиск: