Блог

Главная - Вопросы по программированию - Вкладки пользовательского интерфейса jQuery — как я могу отключить верхнее меню?

Вкладки пользовательского интерфейса jQuery — как я могу отключить верхнее меню?

#jquery-ui #jquery-tabs

#jquery-ui #jquery-вкладки

Вопрос:

Я пытаюсь отключить верхнее меню на вкладках пользовательского интерфейса jQuery, чтобы вкладки работали только с кнопками next / prev.

Отключить опцию формы документ не работает должным образом.

Пожалуйста, посмотрите мой пример здесь: живая демонстрация

Код jQuery:

     $(document).ready( function() {

  $(function() {

            var $tabs = $('#tabs').tabs();

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

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

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

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

            });

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


        });

});

Есть идеи, как я могу отключить верхнее меню, но сохранить структуру, стиль и т. Д.?

Ответ №1:

Как насчет того, чтобы просто включить выбор вкладки непосредственно перед ее выбором, а затем снова отключить вкладки?

Итак, при инициализации все вкладки отключены:

     var $tabs = $('#tabs').tabs({
        disabled: [0, 1, 2]
    });

И при выборе вкладки включите ее перед ее выбором, а затем снова отключите все вкладки:

         $tabs.tabs('enable', tabIndex)
            .tabs('select', tabIndex)
            .tabs("option","disabled", [0, 1, 2]);

Посмотрите на это в действии: http://jsfiddle.net/william/y6QeV/21 /.

РЕДАКТИРОВАТЬ: вы можете просто отключить только старую вкладку:

         var newTabIndex = $(this).attr("rel");
        var oldTabIndex = $tabs.tabs('option', 'selected');
        $tabs.tabs('enable', newTabIndex)
            .tabs('select', newTabIndex)
            .tabs('disable', oldTabIndex);

Пример: http://jsfiddle.net/william/y6QeV/22 /.

Комментарии:

1. Это работает, но я не уверен, что понимаю концепцию — не могли бы вы объяснить подробнее, пожалуйста?

2. Вызов .tabs('select', index) не работает на отключенной вкладке, как вы указали в вопросе. Итак, вместо того, чтобы пытаться выбрать отключенную вкладку, просто включите ее, а затем выберите. После завершения выбора снова отключите вкладки.

3. disabled: [0, 1, 2] — должен ли я выбирать каждую вкладку? Есть ли способ выбрать все?

4. Вам не нужно отключать все вкладки; вы можете просто отключить одну старую вкладку. Я просто ленился и отключил все вкладки. Вот пример этого: jsfiddle.net/william/y6QeV/22 .