Как добавить fadeIn и fadeOut в фрагмент JS плагина idTabs? - PullRequest
Новая
       5

Как добавить fadeIn и fadeOut в фрагмент JS плагина idTabs?

0 голосов
/ 31 декабря 2010

Я использую плагин jQuery idTabs [[www.sunsean.com/idTabs][1]], и он позволяет мне выравнивать вкладки и содержимое вкладок через элемент # id и элемент href = "# id"

Хорошо, я использую этот фрагмент: 

<script type="text/javascript">
$(document).ready(function() {
 $("#requestPool").idTabs();
 $(".tabs").idTabs();
 $(".miniTabs").idTabs(".active"); 
 $(".switchers").idTabs(".activePanel");
});
</script>

Для запуска плагина в двух разных областях: div#requestPool у него есть свои вкладки и собственный контент вкладок, а также div.tabs, который является другим местом и имеет свои собственные вкладки и собственный контент вкладок.

div.miniTabs и div.switchers - это div, которые включают ссылки вкладок (заголовки вкладок), и я поместил их во фрагмент, чтобы изменить выбранный класс вкладок по умолчанию с .selected на .active и .activePanel

Теперь я хотел бы добавить хорошие эффекты fadeIn и fadeOut для содержимого моих вкладок при просмотре их.

Спасибо

Вот код HTML для одной из областей с вкладками: 

<div id="requestPool">
 <!-- The tabs heads -->
 <div class="miniTabs">
  <a href="#today" class="active">Today</a> <!-- First active tab -->
  <a href="#tomorrow">Tomorrow</a>
  <a href="#friday">Friday</a>
  <a href="#saturday">Saturday</a>
  <a href="#sunday">Sunday</a>
  <a href="#monday">Monday</a>
  <a href="#tuesday">Tuesday</a>                                  
 </div>

 <!-- The tabs contents (the ones that I want them to fade in and out while browsing through them using the tabs above) -->
 <div id="today"class="miniTab"></div>
 <div id="tomorrow"class="miniTab"></div>
 <div id="friday"class="miniTab"></div>
 <div id="saturday"class="miniTab"></div>
 <div id="sunday"class="miniTab"></div>
 ...etc the week days
</div>

Большое спасибо (опять же, вкладки работают очень хорошо, но без эффекта затухания, который я хочу иметь).

1 Ответ

0 голосов
/ 31 декабря 2010

Я проверил страницу, которую вы упомянули, там есть решение в разделе Advanced -> Animation. Я немного его модифицировал и протестировал, вроде нормально:

В <head>: 

<script type="text/javascript">
$(function(){
    $(".miniTabs").idTabs(function(id,list,set){ 
        $("a",set).removeClass("active").filter("a[href='"+id+"']").addClass("active"); 
        for(i in list)$(list[i]).hide();
        $(id).fadeIn(); 
        return false; 
    }); 
});
</script>

В <body>: 

<div id="requestPool">
 <div class="miniTabs">
  <a href="#today" class="active">Today</a>
  <a href="#tomorrow">Tomorrow</a>
  <a href="#friday">Friday</a>
  <a href="#saturday">Saturday</a>
  <a href="#sunday">Sunday</a>
 </div>
 <div id="today"class="miniTab">Today</div>
 <div id="tomorrow"class="miniTab">Tomorrow</div>
 <div id="friday"class="miniTab">Friday</div>
 <div id="saturday"class="miniTab">Saturday</div>
 <div id="sunday"class="miniTab">Sunday</div>
</div>

Приветствия

G.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...