jQuery UI 选项卡 - 如何禁用顶部菜单？

发布于 2024-12-13 01:34:47 字数 1161 浏览 3 评论 0原文

我正在尝试禁用 jQuery UI 选项卡上的顶部菜单 - 因此选项卡将仅使用下一个/上一个按钮进行操作。

禁用选项，使文档无法按预期工作。

请在此处查看我的示例：现场演示

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;
               });


        });

});

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

原文

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

Disable option form the doc does not seams to work as expected.

Please see my example here: Live Demo

jQuery code:

    $(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 »</a>");
              }

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

            });

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


        });

});

Any ideas how can I disable top menu, but keep the structure, style etc.. ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世界如花海般美丽 2024-12-20 01:34:47

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

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

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

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]);

See it in action: 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);

Example: http://jsfiddle.net/william/y6QeV/22/.

回复收藏 0 原文

~没有更多了~