Проблема с эффектом затухания вкладок Ajax - jQuery Tools - PullRequest
Новая
       35

Проблема с эффектом затухания вкладок Ajax - jQuery Tools

0 голосов
/ 17 августа 2011

Мне не удается заставить работать вкладки Ajax с эффектом затухания при использовании библиотеки jQuery Tools. Он показывает только эффект для первого элемента, вызванного Ajax, но ничего больше.

Вы можете увидеть тестовый URL на www.excellenthost (точка) com / beta / test.php или посмотреть код ниже:

JS: 

<script type="text/javascript">
$(document).ready(function(){
        $("ul.features-tabs").tabs(".features-panes > div.features", {
        effect: 'fade',
        history: true,
        onBeforeClick: function(event, i) {
            loaddetails(this.getTabs().eq(i).attr("id"));
    function loaddetails(type) { var query = "details=" + type; 
    $.post("shared/details.php", query , function( data ) {
     $(".features").html(data); return false;}); return false;
   }; }});
   });
</script>

HTML: 

   <div class="hostingFeatures-shadow"></div>
      <div class="hostingFeatures-bg">
      <div class="wrap"> 
          <ul class="features-tabs">
            <li><a id="core" href="#core">Core</a></li>
            <li><a id="email" href="#email">Email</a></li>

        </ul>

        <div class="features-panes">
            <ul class="packages-bar">
                <li class="features-title">&nbsp;</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>

            <!-- First Slide -->
      <div class="features">
        </div>
    </div>
</div></div>

Содержание AJAX: общий / details.php 

<ul class="features-list"> 
 <? if($_POST['details']=='core'){ ?>
            <li class="features-name">Premium Disk Space</li>
                        <li>1000MB</li>
                        <li>2500MB</li>
                        <li>3500MB</li>
 <? } if($_POST['details']=='email'){ ?>
                       <li class="features-name">Email Accounts</li>
                        <li>35</li>
                        <li>45</li>
                        <li>65</li>
<? } ?>
</ul>

Как видно из примера, при нажатии на вкладку «электронная почта» ничего не загружается. Когда я делаю предупреждение об отладке (данные); данные Ajax отображаются правильно, поэтому нет проблем с получением правильных данных. Это всего лишь проблема размещения на главной странице

Может кто-нибудь помочь? Brian

Ответы [ 2 ]

0 голосов
/ 22 августа 2011

Оказывается, что решение jQuery Tools Tabs не очень подходит для этого, поэтому я сделал для вас специальный скрипт:

DEMO 

$("ul.features-tabs").find('a').each(function(i) {

  $(this).click(function(event){
    event.preventDefault();
    var clickedPane = $("div.features > div").eq(i);
    if (clickedPane.is(':visible')) return;

    $(this).closest('ul').find('a').removeClass('current').end().end().addClass('current');

    if (clickedPane.hasClass('contentLoaded') || clickedPane.hasClass('contentLoading')) {
      clickedPane.siblings().fadeOut( function(){ clickedPane.fadeIn(); } );
    } else {
      clickedPane.addClass('contentLoading').load($(this).attr("href"),function(){
        $(this).removeClass('contentLoading').addClass('contentLoaded').siblings().fadeOut( function(){ clickedPane.fadeIn(); } );
      });
    }
  });

  // Load & show the initial tabbed pane
  if (i==0) $(this).click();
});

Он полностью избавляется от jQuery Tools и выполняет все затухание и загрузку Ajax, которые вам нужны.

Чтобы это работало, вам нужно немного изменить HTML: 

<div class="hostingFeatures-bg">
  <div class="wrap">

    <ul class="features-tabs">
      <li><a href="/hosting/shared/details.php?details=core">Core</a></li>
      <li><a href="/hosting/shared/details.php?details=email">Email</a></li>
    </ul>

    <div class="features-panes">
      <ul class="packages-bar">
        <li class="features-title">&nbsp;</li>
        <li>ER-1</li>
        <li>ER-2</li>
        <li>ER-3</li>
      </ul>
      <div class="features">
        <div></div>
        <div></div>
      </div>
    </div>

  </div>
</div>

И сделайте одно дополнение к вашему CSS: 

<style type="text/css">
  .features > div { display: none; }
</style>
0 голосов
/ 17 августа 2011

Если вы действительно хотите эффект «исчезновения», вы можете сделать это: 

<ul class="features-tabs">
  <li><a href="/hosting/shared/details.php?details=core">Core</a></li>
  <li><a href="/hosting/shared/details.php?details=email">Email</a></li>
</ul>
(...)
<div class="features">
    <!-- Two divs to keep the content panes separated -->
    <div></div>
    <div></div>
</div>

И использовать этот Javascript: 

$("ul.features-tabs").tabs("div.features > div", {
  effect: 'fade',
  onBeforeClick: function(event, i) {
    var pane = this.getPanes().eq(i);
    if (pane.is(":empty")) {
      pane.load(this.getTabs().eq(i).attr("href"));
    }
  }
});

Это должно работать!

...