Bug Tracker

Ticket #2470: jquery-ui-2470-closable.patch

File jquery-ui-2470-closable.patch, 4.6 KB (added by mdalessio, 12 years ago)

Patch to jquery.ui-1.5b4 for closable tabs

  • jquery.ui-1.5b4/ui.tabs.js

    diff --git a/jquery.ui-1.5b4/ui.tabs.js b/jquery.ui-1.5b4/ui.tabs.js
    index 25c6b65..02a6d8e 100644
    a b  
    8989                                        $this.hasClass(o.panelClass) || $this.addClass(o.panelClass);
    9090                                });
    9191
     92                                if (o.closable) {
     93                                    function closeTab(el) { self.remove(self.$lis.index(el.parentNode)); };
     94                                    this.$lis.each(function(){
     95                                        $(o.closeTemplate.replace(/#\{text\}/g, o.closeText)).appendTo(this)
     96                                                .addClass(o.closeAnchorClass)
     97                                                .click(function() {closeTab(this);})
     98                                    });
     99                                }
     100
     101                            this.$tabs.addClass(o.tabAnchorClass);
     102
    92103                                // Try to retrieve selected tab:
    93104                                // 1. from fragment identifier in url if present
    94105                                // 2. from cookie
     
    126137                                // highlight selected tab
    127138                                this.$panels.addClass(o.hideClass);
    128139                                this.$lis.removeClass(o.selectedClass);
     140                                if (o.closable == 'selected') {this.$lis.find("." + o.closeAnchorClass).hide();}
    129141                                if (o.selected !== null) {
    130142                                        this.$panels.eq(o.selected).show().removeClass(o.hideClass); // use show and remove class to show in any case no matter how it has been hidden before
    131143                                        this.$lis.eq(o.selected).addClass(o.selectedClass);
     144                                        if (o.closable == 'selected') {this.$lis.eq(o.selected).find("." + o.closeAnchorClass).show();}
    132145                                       
    133146                                        // seems to be expected behavior that the show callback is fired
    134147                                        var onShow = function() {
     
    217230                                }*/
    218231                                $li.addClass(o.selectedClass)
    219232                                        .siblings().removeClass(o.selectedClass);
     233                                if (o.closable == 'selected') {
     234                                    $li.find("." + o.closeAnchorClass).show();
     235                                    $li.siblings().find("." + o.closeAnchorClass).hide();
     236                                }
    220237                                hideTab(clicked, $hide, $show);
    221238                        }
    222239
     
    248265                                        if ($li.hasClass(o.selectedClass)) {
    249266                                                self.options.selected = null;
    250267                                                $li.removeClass(o.selectedClass);
     268                                                if (o.closable == 'selected') {$li.find("." + o.closeAnchorClass).hide();}
    251269                                                self.$panels.stop();
    252270                                                hideTab(this, $hide);
    253271                                                this.blur();
     
    257275                                                var a = this;
    258276                                                self.load(self.$tabs.index(this), function() {
    259277                                                        $li.addClass(o.selectedClass).addClass(o.unselectClass);
     278                                                        if (o.closable == 'selected') {$li.find("." + o.closeAnchorClass).show();}
    260279                                                        showTab(a, $show);
    261280                                                });
    262281                                                this.blur();
     
    289308                                                } :
    290309                                                function() {
    291310                                                        $li.addClass(o.selectedClass);
     311                                                        if (o.closable == 'selected') {$li.find("." + o.closeAnchorClass).show();}
    292312                                                        showTab(a, $show);
    293313                                                }
    294314                                        );
     
    321341
    322342                },
    323343                add: function(url, label, index) {
     344                        var self = this ; // for scoping in closure
    324345                        if (index == undefined)
    325346                                index = this.$tabs.length; // append by default
    326347
     
    344365                                $li.insertBefore(this.$lis[index]);
    345366                                $panel.insertBefore(this.$panels[index]);
    346367                        }
     368                        $li.find('a:first').addClass(o.tabAnchorClass);
     369
     370                        if (o.closable) {
     371                                function closeTab(el) { self.remove(self.$lis.index(el.parentNode)); };
     372                                var aclose = $(o.closeTemplate.replace(/#\{text\}/g, o.closeText));
     373                                $(o.closeTemplate.replace(/#\{text\}/g, o.closeText)).appendTo($li)
     374                                        .addClass(o.closeAnchorClass)
     375                                        .click(function() {closeTab(this);})
     376                                if (o.closable == 'selected') {$li.find("." + o.closeAnchorClass).hide();}
     377                        }
    347378                       
    348379                        o.disabled = $.map(o.disabled,
    349380                                function(n, i) { return n >= index ? ++n : n });
     
    352383
    353384                        if (this.$tabs.length == 1) {
    354385                                $li.addClass(o.selectedClass);
     386                                if (o.closable == 'selected') {$li.find("." + o.closeAnchorClass).show();}
    355387                                $panel.removeClass(o.hideClass);
    356388                                var href = $.data(this.$tabs[0], 'load.tabs');
    357389                                if (href)
     
    515547                event: 'click',
    516548                disabled: [],
    517549                cookie: null, // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true }
     550                closable: false, /* valid values are false, "all" or "selected" */
     551                closeText: '(x)',
    518552                // TODO history: false,
    519553
    520554                // Ajax
     
    529563                // templates
    530564                tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>',
    531565                panelTemplate: '<div></div>',
     566                closeTemplate: '<a onclick="return false;"><span>#{text}</span></a>',
    532567
    533568                // CSS classes
    534569                navClass: 'ui-tabs-nav',
     
    537572                disabledClass: 'ui-tabs-disabled',
    538573                panelClass: 'ui-tabs-panel',
    539574                hideClass: 'ui-tabs-hide',
    540                 loadingClass: 'ui-tabs-loading'
     575                loadingClass: 'ui-tabs-loading',
     576            tabAnchorClass: 'ui-tabs-tab',
     577                closeAnchorClass: 'ui-tabs-close'
    541578        };
    542579       
    543580        $.ui.tabs.getter = "length";