jQuery UI Tabs-如何禁用顶部菜单? [英] jQuery UI Tabs - how can I disable top menu?

问题描述

我正在尝试禁用jQuery UI选项卡上的顶部菜单-因此只能使用下一个/上一个按钮来操作这些选项卡.

I'm trying to disable top menu on jQuery UI Tabs - so the tabs would be operated with next/prev buttons only.

禁用选项，因为文档无法正常工作.

请在此处查看我的示例: 实时演示

Please see my example here: Live Demo

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 &#187;</a>");
              }

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

            });

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


        });

});

任何想法如何禁用顶部菜单，但保留结构，样式等.?

推荐答案

仅在选择选项卡之前启用该选项卡，然后再次禁用该选项卡如何?

How about just enable the tab to be selected just before selecting it, and then disable the tabs again?

因此，在初始化时，所有选项卡均被禁用:

So, at the initialisation, all tabs are disabled:

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

在选择选项卡时，请在选择它之前先启用它，然后再次禁用所有选项卡:

And when selecting the tab, enable it before selecting it, and then disable all tabs again:

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

查看实际运行情况: http://jsfiddle.net/william/y6QeV/21/.

编辑:您可以仅禁用旧标签:

EDIT: You can simply disable just the old tab:

        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/.

这篇关于jQuery UI Tabs-如何禁用顶部菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！