Вкладки пользовательского интерфейса Jquery — кнопки «Далее» и «Назад»

Я просматриваю учебник Криса Койера по созданию динамических кнопок «Далее» и «Назад» для вкладок пользовательского интерфейса Jquery. Кнопки показываются/скрываются в зависимости от того, указывают ли они на первую или последнюю вкладку. Он отлично работает на его примере, который с 2009 года. Fastforward до 2011 года, навигация, к сожалению, не работает с новыми версиями jquery (в частности, jquery-1.6.4).

Для справки, оригинальный учебник: http://css-tricks.com/2361-jquery-ui-tabs-with-nextprevious/

Скрипт Coyier корректно добавляет кнопки «Далее»/«Назад» в панель ui-tabs. Однако ссылки либо: 1) не переходят ни на что, 2) первая ссылка "Далее" ведет сразу на последнюю вкладку, а ссылка Предыдущая не работает, или 3) ссылки Далее/Предыдущая идут только на первая и последняя вкладки, пропуская все между ними.

Что мне нужно, так это показать и скрыть следующую или предыдущую кнопку, в зависимости от того, смотрит ли зритель на первую или последнюю вкладку.

Код, который у меня есть до сих пор,...

$j = jQuery.noConflict();
$j(function() {

    var jQuery$tabs = $j('#tabs').tabs();
    $j(".events-navnext, .events-navprev").hide();

    $j(".ui-tabs-panel").each(function(i){

        var totalSize = $j(".ui-tabs-panel").size() - 1;

        if (i != totalSize) {
        next = i + 2;
            $j(".events-navnext").show();
        }
        if (i != 0) {
        prev = i;
            $j(".events-navprev").show();
        }
    });
    $j('.events-navnext').click(function(){ 
        var $tabs = $j('#tabs').tabs();
        var selected = $tabs.tabs('option', 'selected');
        $tabs.tabs('select', selected+1);
        return false;
    });
    $j('.events-navprev').click(function(){ 
        var $tabs = $j('#tabs').tabs();
        var selected = $tabs.tabs('option', 'selected');
        $tabs.tabs('select', selected-1);
        return false;
    });

});

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

Я пробовал использовать скрипт jquery-custom, который использовал Койер, но он все равно не работал. Таким образом, я предполагаю, что современная версия Jquery вызывает проблемы с исходным учебником. Я тоже новичок в jquery. Любые подсказки или указатели наиболее ценятся. Спасибо!

(Примечания: эти вкладки используются в среде разработки, защищенной паролем, поэтому я не могу предоставить рабочий пример. В этом случае требуется режим jQuery.noConflict, который нельзя удалить.)


jquery jquery-ui-tabs jquery-tabs
person quiet0ne    schedule 28.09.2011    source источник

Ответы (3)


arrow_upward
0
arrow_downward

В примере Coyier он добавляет следующую и предыдущую ссылки к каждой панели на основе текущей панели и totalSize. Вот почему предыдущий не отображается на панели 1, а следующий не отображается на последней панели. Ваш код вызывает .show() все элементы с именем класса «events-navprev».

Вы пробовали использовать его код?:

      if (i != totalSize) {
          next = i + 2;
              $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
      }


      if (i != 0) {
          prev = i;
              $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
      }

Другой вариант: измените .show так, чтобы отображалась только ссылка на текущую панель:

$j(this).find(".events-navnext").show();

а также

$j(this).find(".events-navprev").show();

РЕДАКТИРОВАТЬ:

Вот фрагмент кода Койера прямо из учебника, и он отлично работает: http://jsfiddle.net/fehays/apRrq/

Я бы посоветовал начать с этого, а затем выяснить, что вы сделали по-другому.

person fehays    schedule 28.09.2011
comment
Да, я пытался использовать код Койера прямо из коробки. Ссылки отображаются хорошо, но на самом деле они не работают. Вот почему я иду по пути Франкенкода! Я попробовал сценарий, который вы добавили в качестве другого варианта, который дает мне те же результаты, что и материал, который я опубликовал. Однако, спасибо! - person quiet0ne; 28.09.2011
comment
Можете ли вы опубликовать часть html? То, как вы это делаете, не сработает, поскольку вы вызываете .show() для всех ссылок. Может быть, у вас нет ссылки «следующая/предыдущая» внутри каждой панели? - person fehays; 28.09.2011
comment
Смотрите мою правку. Я разместил скрипт, который отлично работает, используя код из css-tricks. - person fehays; 28.09.2011

arrow_upward
0
arrow_downward

Я думаю, вы можете решить эту проблему, преобразовав индекс в int, используя parseInt, как показано ниже.

$tabs.tabs('select', parseInt($(this).attr("rel")));

Функция ожидает целое число, а не строку, а также неправильный следующий и обратный индексы, см. исправленный код ниже.

var $tabs = $('#tabs').tabs();
$(".ui-tabs-panel").each(function(i) {
        var totalSize = $(".ui-tabs-panel").size() - 1;

        if (i != totalSize) {
            var next = i + 1;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
        }

        if (i != 0) {
            var prev = i-1;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
        }

    });

    $('.next-tab, .prev-tab').click(function() {
       $tabs.tabs('select', parseInt($(this).attr("rel")));
       return false;
   });
person sawe    schedule 10.02.2012

arrow_upward
0
arrow_downward

проверьте, что это нужно немного исправить

 $(document).ready(function () {
    var $tabs = $('#tabs').tabs();

    $(".ui-tabs-panel").each(function (i) {

        var totalSize = $(".ui-tabs-panel").size() - 1;

        if (i != totalSize) {
            next = i + 1;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
        }

        if (i != 0) {
            prev = i-1;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
        }

    });

    $('.next-tab, .prev-tab').click(function () {
        var cc = $(this).attr("rel");

        $('#tabs').tabs({ active: parseInt(cc) });
        //  $('#tabs').tabs({active:1})
        return false;
    });
});
person Seeker    schedule 20.04.2013