Сценарий с основными вкладками jQuery - несколько экземпляров? - PullRequest
Новая
       29

Сценарий с основными вкладками jQuery - несколько экземпляров?

2 голосов
/ 04 июля 2010

У меня на сайте есть следующий скрипт jQuery для переключения вкладок без перезагрузки страницы.Я использую ядро ​​jQuery v1.3.2 (НЕ jQuery UI) 

<!-- JS -->
<script type="text/javascript">
    $(function() {
        var tabify = function () {
            var id = $('#content > div').hide().attr('aria-hidden', 'true').filter(window.location.hash || ':first').show().attr('aria-hidden', 'false').attr('id');
            $('#content > ul > li').removeClass('selected').find('a[href=#' + id + ']').parent().addClass('selected');
        }
        setInterval(tabify, 100);
        tabify();
    });
</script>

<!-- HTML -->
<div id="content">

  <ul>
    <li><a href="#blog" role="tab">Blog</a></li>
    <li><a href="#videos" role="tab">Videos</a></li>
    <li><a href="#photos" role="tab">Photos</a></li>
  </ul>            

  <div id="blog" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">Blog Content</div>
  <div id="videos" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">Videos Content</div>
  <div id="photos" role="tabpanel" aria-labelledby="tab3" aria-hidden="true">Photos Content</div>                       

</div>

Я хочу добавить другой экземпляр этого скрипта на той же странице, но просто скопировать / вставить его с разными именами переменныхРабота.Есть идеи?

РЕДАКТИРОВАТЬ: Вот мой HTML и JS для второго экземпляра.Проблема в том, что когда я нажимаю на вкладку во втором экземпляре, она скрывает все div содержимого в первом экземпляре, и наоборот.Я хочу, чтобы они были независимы друг от друга. 

<!-- JS -->
<script type="text/javascript">
    $(function() {
        var tabifyplayer = function () {
            var idplayer = $('#discography > div').hide().attr('aria-hidden', 'true').filter(window.location.hash || ':first').show().attr('aria-hidden', 'false').attr('idplayer');
            $('#discography > ul > li').removeClass('selected').find('a[href=#' + idplayer + ']').parent().addClass('selected');
        }
        setInterval(tabifyplayer, 100);
        tabifyplayer();
    });
</script>

<!-- HTML -->
<div id="discography">
  <ul>
    <li><a href="#cor-player" role="tab">Chance of Rain (2009)</a></li>
    <li><a href="#debutcd-player" role="tab">Debut CD (2007)</a></li>
  </ul>

  <div id="cor-player" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">Content Goes Here</div>
  <div id="debutcd-player" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">Content Goes Here</div>
</div>

Ответы [ 2 ]

1 голос
/ 04 июля 2010

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

<script type="text/javascript">
  $(function() {
    var tabify = function () {
      var id = $('#content > div') // Hard Coded content container.
                .hide()
                .attr('aria-hidden', 'true')
                .filter(window.location.hash || ':first')
                .show()
                .attr('aria-hidden', 'false')
                .attr('id');
      $('#content > ul > li') // Hard Coded tab elements.
        .removeClass('selected')
        .find('a[href=#' + id + ']')
        .parent()
        .addClass('selected');
    }
    setInterval(tabify, 100);
    tabify();
  });
</script>

На самом деле, вам, вероятно, лучше обслужить, немного подкорректировав все так, чтобы вы не полагались на интервал. 

$(function () {
  var mine = $('#content > ul > li > a').click(function () {
    $(this)
      .parent()
      .addClass('selected')
      .siblings('li')
      .removeClass('selected');

    $('#content > div')
      .filter($(this).attr('href') || ':first')
      .show().attr('aria-hidden', 'false')
      .siblings('div')
      .hide().attr('aria-hidden', 'true');
  });

  if (window.location.hash != undefined) {
    mine.filter('[href=' + window.location.hash + ']').click();
  } else {
    mine.filter(':first').click();
  }
});

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

0 голосов
/ 05 июля 2010

На этой странице я нашел хорошее решение: Вкладки jQuery - несколько наборов на странице

В этом случае также меньше дублирования кода. (Единственное, что он не делает, это позволяет вам использовать кнопку «назад», но я могу с этим жить.) 

jQuery.fn.minitabs = function(speed,effect) {
  var id = "#" + this.attr('id')
  $(id + ">div:gt(0)").hide();
  $(id + ">ul>li>a:first").addClass("selected");
  $(id + ">ul>li>a").click(
    function(){
      $(id + ">ul>li>a").removeClass("selected");
      $(this).addClass("selected");
      $(this).blur();
      var re = /([_\-\w]+$)/i;
      var target = $('#' + re.exec(this.href)[1]);
      var old = $(id + ">div");
      old.hide();
      target.show()
      return false;
    }
 );
}
$('#tabset1').minitabs();
$('#tabset2').minitabs();
...