Вкладки пользовательского интерфейса Jquery - кнопки «Следующая» и «Предыдущая» - PullRequest
Новая
       42

Вкладки пользовательского интерфейса Jquery - кнопки «Следующая» и «Предыдущая»

0 голосов
/ 28 сентября 2011

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

Для справки, исходное руководство:http://css -tricks.com / 2361-jquery-ui-tabs-with-nextprevious /

Сценарий Coyier правильно добавляет кнопки «Следующая / Предыдущая» на панель вкладок пользовательского интерфейса.Однако ссылки либо: 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, и он не можетбыть удаленным.)

Ответы [ 3 ]

0 голосов
/ 10 февраля 2012

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

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

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

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;
   });
0 голосов
/ 20 апреля 2013

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

 $(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;
    });
});
0 голосов
/ 28 сентября 2011

В примере Койера он добавляет следующие и предыдущие ссылки к каждой панели на основе текущей панели и 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>");
      }

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

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

и 

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

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

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

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

...