Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Помогите переписать скрипт.

Автор: Garese 14.8.2012, 22:54

Есть такой скрипт табов:

Код


jQuery(document).ready(function(){
  jQuery('ul.tabs').delegate('li:not(.current)', 'click', 
  function() {
    jQuery(this).addClass('current').siblings().removeClass('current')
      .parents('div.slider_news').find('table').eq(jQuery(this)
      .index()).fadeIn(150).siblings('table').hide();
  });
});

для его работы требуется jQuery 1.4.2, помогите ему заработать на jQuery 1.3.2.

В программировании полный ноль, буду очень признателен.

Автор: serezhka1986 14.8.2012, 22:58

Цитата(Garese @ 14.8.2012, 22:54

)

для его работы требуется jQuery 1.4.2, помогите ему заработать на jQuery 1.3.2.

Ого

Извините за нескромный вопрос, а почему такой старый jquery надо? Сейчас же уже 1.8.0 появился.

Автор: Garese 14.8.2012, 23:14

Сайт разрабатывался под Drupal 7, там jQuery 1.4.4. Заказчик затребовал Drupal 6, там 1.3.2 максимум. Можно конечно подгрузить более свежий и использовать jQuery.noConflict(), но не хотелось бы утяжелять страницу на 70КБ.

Автор: serezhka1986 14.8.2012, 23:21

Было бы неплохо еще опубликовать html-разметку табов.

Автор: Garese 14.8.2012, 23:27

Код


  <div class="slider_news">
    <ul class="tabs">
      <li class="current"><span>Таб 1</span></li>
      <li><span>Таб 2</span></li>
    </ul>
    <div class="clear"></div>
    <div class="contents">
      <table border="0" cellpadding="0" cellspacing="0" class="visible">
        <tr><td width="19px"></td>
          <td><div style="width:454px; overflow:hidden;">
              <div class="tabscontent visible">
                контент 1
                <div class="clear"></div>
              </div>
            </div></td>
          <td width="19px"></td></tr>
      </table>
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="19px"></td>
          <td><div class="tabscontent">
              <div style='marign:0 auto;' align='center'>
                контент 2
            </div></td>
          <td width="19px"></td>
        </tr>
      </table>
    </div>
  </div>

Вот такая разметка.

Вот еще нашел, а как приделать не знаю:

Код


$("a.offsite").live("click", function(){ alert("Goodbye!"); });  // jQuery 1.3              
$(document).delegate("a.offsite", "click", function(){ alert("Goodbye!"); }); // jQuery 1.4

Автор: нуп 14.8.2012, 23:57

$('ul.tabs').live('click', function() {});

Автор: Garese 15.8.2012, 00:13

Цитата(нуп @ 14.8.2012, 23:57)

$('ul.tabs').live('click', function() {});

Не работает так

Автор: нуп 15.8.2012, 00:27

Ну так значит вешайте функцию, после создания табов.

Автор: serezhka1986 15.8.2012, 09:09

Проблема, походу не в delegate, а где-то внутри самой исполняющейся функции. Код, переписанный под live работает на 1.4 (http://jsfiddle.net/H36db/1/), но не работает на 1.3 (http://jsfiddle.net/H36db/).

Автор: serezhka1986 15.8.2012, 09:39

.index() походу был додан только в версии 1.4

Добавлено @ 09:52
Так вроде работает: http://jsfiddle.net/H36db/2/

Код


<div class="slider_news">
    <ul class="tabs">
      <li class="current"><span>Таб 1</span></li>
      <li><span>Таб 2</span></li>
    </ul>
    <div class="clear"></div>
    <div class="contents">
      <table border="0" cellpadding="0" cellspacing="0" class="visible">
        <tr><td width="19px"></td>
          <td><div style="width:454px; overflow:hidden;">
              <div class="tabscontent visible">
                контент 1
                <div class="clear"></div>
              </div>
            </div></td>
          <td width="19px"></td></tr>
      </table>
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="19px"></td>
          <td><div class="tabscontent">
              <div style='marign:0 auto;' align='center'>
                контент 2
              </div></div></td>
          <td width="19px"></td>
        </tr>
      </table>
    </div>
  </div>

Код


jQuery(document).ready(function(){
   $("ul.tabs li:not(.current)").live('click', 
  function() {
    jQuery(this).addClass('current').siblings().removeClass('current')
      .parents('div.slider_news').find('table').eq($(this).prevAll().length).fadeIn(150).siblings('table').hide();
  }); });

Автор: Garese 15.8.2012, 15:55

serezhka1986, спасибо огромное работает отлично) выручил очень