Tabs: Rename selected option to active. Fixes #7135 Tabs: Rename selected option...

diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js
index 7e481679319d57ebb9b2f0376046b21cabcb9969..8b6b50d7e4e86d15f8ac143efd7112f32fa7d1b3 100644 (file)
--- a/tests/unit/tabs/tabs_deprecated.js
+++ b/tests/unit/tabs/tabs_deprecated.js
@@ -65,6 +65,55 @@ test('spinner', function() {
        });
 });
 
+test('selected', function() {
+       expect(11);
+
+       el = $('#tabs1').tabs();
+       equals(el.tabs('option', 'selected'), 0, 'should be 0 by default');
+
+       el.tabs('destroy');
+       //set a hash in the url
+       location.hash = '#fragment-2';
+       //selection of tab with divs ordered differently than list
+       el = $('#tabs1').tabs();
+       equals(el.tabs('option', 'selected'), 1, 'second tab should be selected');
+
+       el.tabs('destroy');
+       //set a hash in the url
+       location.hash = '#tabs7-2';
+       //selection of tab with divs ordered differently than list
+       el = $('#tabs7').tabs();
+       equals(el.tabs('option', 'selected'), 1, 'second tab should be selected');
+
+       el.tabs('destroy');
+       el = $('#tabs1').tabs({ selected: -1 });
+       equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected');
+       equals( $('li.ui-tabs-selected', el).length, 0, 'no tab should be selected' );
+       equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
+
+       el.tabs('destroy');
+       el.tabs({ selected: null });
+       equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected with value null (deprecated)');
+
+       el.tabs('destroy');
+       el.tabs({ selected: 1 });
+       equals(el.tabs('option', 'selected'), 1, 'should be specified tab');
+
+       el.tabs('destroy');
+       el.tabs({ selected: 99 });
+       equals(el.tabs('option', 'selected'), 0, 'selected should default to zero if given value is out of index');
+
+       el.tabs('destroy');
+       el.tabs({ collapsible: true });
+       el.tabs('option', 'selected', 0);
+       equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if value is same as selected');
+
+       el.tabs('destroy');
+       el = $('#tabs1').tabs();
+       el.tabs('select', 1);
+       equals(el.tabs('option', 'selected'), 1, 'should select tab');
+});
+
 module("tabs (deprecated): events");
 
 test('enable', function() {

diff --git a/tests/unit/tabs/tabs_events.js b/tests/unit/tabs/tabs_events.js
index b3f8653a22501064cae8fab994493629013c8017..04f2821571c548f7fd206b72b02284273f3beb11 100644 (file)
--- a/tests/unit/tabs/tabs_events.js
+++ b/tests/unit/tabs/tabs_events.js
@@ -32,7 +32,7 @@ test('beforeload', function() {
        el = $('#tabs2');
 
        el.tabs({
-               selected: 2,
+               active: 2,
                beforeload: function( event, ui ) {
                        ok( $.isFunction( ui.jqXHR.promise ), 'contain jqXHR object');
                        equals( ui.settings.url, "data/test.html", 'contain ajax settings url');

diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js
index e00a95a3ec16c0a0557c415e973587c8f99aaa0e..dbb5c2d153f148283d08c23a6569661324e3498d 100644 (file)
--- a/tests/unit/tabs/tabs_methods.js
+++ b/tests/unit/tabs/tabs_methods.js
@@ -16,7 +16,7 @@ test('init', function() {
        ok( $('div:eq(0)', el).is('.ui-tabs-panel.ui-widget-content.ui-corner-bottom'), 'attach classes to panel' );
        ok( $('li:eq(0)', el).is('.ui-tabs-selected.ui-state-active.ui-corner-top'), 'attach classes to active li');
        ok( $('li:eq(1)', el).is('.ui-state-default.ui-corner-top'), 'attach classes to inactive li');
-       equals( el.tabs('option', 'selected'), 0, 'selected option set' );
+       equals( el.tabs('option', 'active'), 0, 'active option set' );
        equals( $('li', el).index( $('li.ui-tabs-selected', el) ), 0, 'second tab active');
        equals( $('div', el).index( $('div.ui-tabs-hide', '#tabs1') ), 1, 'second panel should be hidden' );
 });
@@ -30,7 +30,7 @@ test('init with hash', function() {
        //selection of tab with divs ordered differently than list
        el = $('#tabs1').tabs();
        
-       equals(el.tabs('option', 'selected'), 1, 'second tab should be selected');
+       equals(el.tabs('option', 'active'), 1, 'second tab should be active');
        
        ok(!$('#tabs1 ul li:eq(0)').is('.ui-tabs-selected.ui-state-active'), 'first tab should not be selected nor active');
        ok($('#tabs1 div:eq(0)').is('.ui-tabs-hide'), 'first div for first tab should be hidden');
@@ -48,7 +48,7 @@ test('init mismatched order with hash', function() {
        //selection of tab with divs ordered differently than list
        el = $('#tabs7').tabs();
        
-       equals(el.tabs('option', 'selected'), 1, 'second tab should be selected');
+       equals(el.tabs('option', 'active'), 1, 'second tab should be active');
        
        ok(!$('#tabs7-list li:eq(0)').is('.ui-tabs-selected.ui-state-active'), 'first tab should not be selected nor active');
        ok($('#tabs7 div:eq(1)').is('.ui-tabs-hide'), 'second div for first tab should be hidden');
@@ -136,27 +136,27 @@ test('select', function() {
        el = $('#tabs1').tabs();
 
        el.tabs('select', 1);
-       equals(el.tabs('option', 'selected'), 1, 'should select tab');
+       equals(el.tabs('option', 'active'), 1, 'should select tab');
 
        el.tabs('destroy');
        el.tabs({ collapsible: true });
        el.tabs('select', 0);
-       equals(el.tabs('option', 'selected'), -1, 'should collapse tab passing in the already selected tab');
+       equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in the already active tab');
 
        el.tabs('destroy');
        el.tabs({ collapsible: true });
        el.tabs('select', -1);
-       equals(el.tabs('option', 'selected'), -1, 'should collapse tab passing in -1');
+       equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in -1');
 
        el.tabs('destroy');
        el.tabs();
        el.tabs('select', 0);
-       equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if collapsible is not set to true');
+       equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');
        el.tabs('select', -1);
-       equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if collapsible is not set to true');
+       equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');
 
        el.tabs('select', '#fragment-2');
-       equals(el.tabs('option', 'selected'), 1, 'should select tab by id');
+       equals(el.tabs('option', 'active'), 1, 'should select tab by id');
 });
 
 test('refresh', function() {
@@ -165,7 +165,7 @@ test('refresh', function() {
        var el = $('<div id="tabs"><ul></ul></div>').tabs(),
                ul = el.find('ul');
 
-       equals(el.tabs('option', 'selected'), -1, 'Initially empty, no selected tab');
+       equals(el.tabs('option', 'active'), -1, 'Initially empty, no active tab');
 
        ul.append('<li><a href="data/test.html">Test 1</a></li>');
        el.tabs('refresh');
@@ -179,12 +179,12 @@ test('refresh', function() {
        $('<div id="test1">Test Panel 1</div>').insertAfter( ul );
        el.tabs('refresh');
        el.tabs('select', 0);
-       equals( el.tabs('option', 'selected'), 0, 'First tab added should be auto selected');
+       equals( el.tabs('option', 'active'), 0, 'First tab added should be auto active');
 
        ul.append('<li><a href="#test2">Test 2</a></li>');
        $('<div id="test2">Test Panel 2</div>').insertAfter( ul );
        el.tabs('refresh');
-       equals( el.tabs('option', 'selected'), 0, 'Second tab added should not be auto selected');
+       equals( el.tabs('option', 'active'), 0, 'Second tab added should not be auto active');
 });
 
 test('load', function() {

diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js
index de6d7e74ecde8f389ccd62b3b9aaab6b94493a92..b1a7a5e78d9b31a8a56f0fdc6cd9a95d37592461 100644 (file)
--- a/tests/unit/tabs/tabs_options.js
+++ b/tests/unit/tabs/tabs_options.js
@@ -34,8 +34,8 @@ test('cookie', function() {
        equals(cookie(), 0, 'initial cookie value');
 
        el.tabs('destroy');
-       el.tabs({ selected: 1, cookie: cookieObj });
-       equals(cookie(), 1, 'initial cookie value, from selected property');
+       el.tabs({ active: 1, cookie: cookieObj });
+       equals(cookie(), 1, 'initial cookie value, from active property');
 
        el.tabs('select', 2);
        equals(cookie(), 2, 'cookie value updated after select');
@@ -79,34 +79,34 @@ test('fx', function() {
        ok(false, "missing test - untested code is broken code.");
 });
 
-test('selected', function() {
+test('active', function() {
        expect(8);
 
        el = $('#tabs1').tabs();
-       equals(el.tabs('option', 'selected'), 0, 'should be 0 by default');
+       equals(el.tabs('option', 'active'), 0, 'should be 0 by default');
 
        el.tabs('destroy');
-       el.tabs({ selected: -1 });
-       equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected');
-       equals( $('li.ui-tabs-selected', el).length, 0, 'no tab should be selected' );
+       el.tabs({ active: -1 });
+       equals(el.tabs('option', 'active'), -1, 'should be -1 for all tabs deactive');
+       equals( $('li.ui-tabs-selected', el).length, 0, 'no tab should be active' );
        equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
 
        el.tabs('destroy');
-       el.tabs({ selected: null });
-       equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected with value null (deprecated)');
+       el.tabs({ active: null });
+       equals(el.tabs('option', 'active'), -1, 'should be -1 for all tabs deactive with value null (deprecated)');
 
        el.tabs('destroy');
-       el.tabs({ selected: 1 });
-       equals(el.tabs('option', 'selected'), 1, 'should be specified tab');
+       el.tabs({ active: 1 });
+       equals(el.tabs('option', 'active'), 1, 'should be specified tab');
 
        el.tabs('destroy');
-       el.tabs({ selected: 99 });
-       equals(el.tabs('option', 'selected'), 0, 'selected should default to zero if given value is out of index');
+       el.tabs({ active: 99 });
+       equals(el.tabs('option', 'active'), 0, 'active should default to zero if given value is out of index');
 
        el.tabs('destroy');
        el.tabs({ collapsible: true });
-       el.tabs('option', 'selected', 0);
-       equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if value is same as selected');
+       el.tabs('option', 'active', 0);
+       equals(el.tabs('option', 'active'), 0, 'should not collapse tab if value is same as active');
 });
 
 })(jQuery);

diff --git a/tests/unit/tabs/tabs_tickets.js b/tests/unit/tabs/tabs_tickets.js
index 9df72a6f7460c8164bbc3b1ff32f6aea28170e77..486d3b6d2b65a13952140c86ad026b218ab6fb8b 100644 (file)
--- a/tests/unit/tabs/tabs_tickets.js
+++ b/tests/unit/tabs/tabs_tickets.js
@@ -43,7 +43,7 @@ test('#3627 - Ajax tab with url containing a fragment identifier fails to load',
        expect(1);
 
        el = $('#tabs2').tabs({
-               selected: 2,
+               active: 2,
                beforeload: function( event, ui ) {
                        event.preventDefault();
                        ok(/test.html$/.test( ui.settings.url ), 'should ignore fragment identifier');

diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js
index 4a7ae39815af1f3b855d2e7fd3b069a5b60c79aa..d76565a2ae004ab7f953c44e23a9c1e0a410ae89 100755 (executable)
--- a/ui/jquery.ui.tabs.js
+++ b/ui/jquery.ui.tabs.js
@@ -52,29 +52,29 @@ $.widget( "ui.tabs", {
                // 1. from fragment identifier in url
                // 2. from cookie
                // 3. from selected class attribute on <li>
-               if ( o.selected === undefined ) {
+               if ( o.active === undefined ) {
                        if ( location.hash ) {
                                this.anchors.each(function( i, a ) {
                                        if ( a.hash == location.hash ) {
-                                               o.selected = i;
+                                               o.active = i;
                                                return false;
                                        }
                                });
                        }
-                       if ( typeof o.selected !== "number" && o.cookie ) {
-                               o.selected = parseInt( self._cookie(), 10 );
+                       if ( typeof o.active !== "number" && o.cookie ) {
+                               o.active = parseInt( self._cookie(), 10 );
                        }
-                       if ( typeof o.selected !== "number" && this.lis.filter( ".ui-tabs-selected" ).length ) {
-                               o.selected = this.lis.index( this.lis.filter( ".ui-tabs-selected" ) );
+                       if ( typeof o.active !== "number" && this.lis.filter( ".ui-tabs-selected" ).length ) {
+                               o.active = this.lis.index( this.lis.filter( ".ui-tabs-selected" ) );
                        }
-                       o.selected = o.selected || ( this.lis.length ? 0 : -1 );
-               } else if ( o.selected === null ) { // usage of null is deprecated, TODO remove in next release
-                       o.selected = -1;
+                       o.active = o.active || ( this.lis.length ? 0 : -1 );
+               } else if ( o.active === null ) { // usage of null is deprecated, TODO remove in next release
+                       o.active = -1;
                }
 
                // sanity check - default to first tab...
-               o.selected = ( ( o.selected >= 0 && this.anchors[ o.selected ] ) || o.selected < 0 )
-                       ? o.selected
+               o.active = ( ( o.active >= 0 && this.anchors[ o.active ] ) || o.active < 0 )
+                       ? o.active
                        : 0;
 
                // Take disabling tabs via class attribute from HTML
@@ -95,20 +95,20 @@ $.widget( "ui.tabs", {
                this.panels.addClass( "ui-tabs-hide" );
                this.lis.removeClass( "ui-tabs-selected ui-state-active" );
                // check for length avoids error when initializing empty list
-               if ( o.selected >= 0 && this.anchors.length ) {
-                       var tab = self.anchors[ o.selected ],
+               if ( o.active >= 0 && this.anchors.length ) {
+                       var tab = self.anchors[ o.active ],
                                panel = self.element.find( self._sanitizeSelector( $( tab ).attr( "aria-controls" ) ) );
 
                        panel.removeClass( "ui-tabs-hide" );
 
-                       this.lis.eq( o.selected ).addClass( "ui-tabs-selected ui-state-active" );
+                       this.lis.eq( o.active ).addClass( "ui-tabs-selected ui-state-active" );
 
                        // seems to be expected behavior that the show callback is fired
                        self.element.queue( "tabs", function() {
                                self._trigger( "show", null, self._ui( tab, panel[ 0 ] ) );
                        });
 
-                       this.load( o.selected );
+                       this.load( o.active );
                }
 
                // clean up to avoid memory leaks in certain versions of IE 6
@@ -119,8 +119,8 @@ $.widget( "ui.tabs", {
        },
 
        _setOption: function( key, value ) {
-               if ( key == "selected" ) {
-                       if (this.options.collapsible && value == this.options.selected ) {
+               if ( key == "active" ) {
+                       if (this.options.collapsible && value == this.options.active ) {
                                return;
                        }
                        this.select( value );
@@ -192,7 +192,7 @@ $.widget( "ui.tabs", {
 
                // set or update cookie after init and add/remove respectively
                if ( o.cookie ) {
-                       this._cookie( o.selected, o.cookie );
+                       this._cookie( o.active, o.cookie );
                }
 
                // disable tabs
@@ -369,7 +369,7 @@ $.widget( "ui.tabs", {
                        return;
                }
 
-               o.selected = self.anchors.index( el );
+               o.active = self.anchors.index( el );
 
                if ( self.xhr ) {
                        self.xhr.abort();
@@ -378,10 +378,10 @@ $.widget( "ui.tabs", {
                // if tab may be closed
                if ( o.collapsible ) {
                        if ( $li.hasClass( "ui-tabs-selected" ) ) {
-                               o.selected = -1;
+                               o.active = -1;
 
                                if ( o.cookie ) {
-                                       self._cookie( o.selected, o.cookie );
+                                       self._cookie( o.active, o.cookie );
                                }
 
                                self.element.queue( "tabs", function() {
@@ -392,7 +392,7 @@ $.widget( "ui.tabs", {
                                return;
                        } else if ( !$hide.length ) {
                                if ( o.cookie ) {
-                                       self._cookie( o.selected, o.cookie );
+                                       self._cookie( o.active, o.cookie );
                                }
 
                                self.element.queue( "tabs", function() {
@@ -408,7 +408,7 @@ $.widget( "ui.tabs", {
                }
 
                if ( o.cookie ) {
-                       self._cookie( o.selected, o.cookie );
+                       self._cookie( o.active, o.cookie );
                }
 
                // show new tab
@@ -542,8 +542,8 @@ $.widget( "ui.tabs", {
        select: function( index ) {
                index = this._getIndex( index );
                if ( index == -1 ) {
-                       if ( this.options.collapsible && this.options.selected != -1 ) {
-                               index = this.options.selected;
+                       if ( this.options.collapsible && this.options.active != -1 ) {
+                               index = this.options.active;
                        } else {
                                return this;
                        }
@@ -811,7 +811,7 @@ if ( $.uiBackCompat !== false ) {
                        this.refresh();
 
                        if ( this.anchors.length == 1 ) {
-                               o.selected = 0;
+                               o.active = o.selected = 0;
                                $li.addClass( "ui-tabs-selected ui-state-active" );
                                $panel.removeClass( "ui-tabs-hide" );
                                this.element.queue( "tabs", function() {
@@ -894,6 +894,38 @@ if ( $.uiBackCompat !== false ) {
                                        .data( "destroy.tabs", true );
                };
        }( jQuery, jQuery.ui.tabs.prototype ) );
+
+       // selected option
+       (function( $, prototype ) {
+               var _create = prototype._create,
+                       _setOption = prototype._setOption,
+                       _eventHandler = prototype._eventHandler;
+
+               prototype._create = function() {
+                       var options = this.options;
+                       if ( options.active === undefined && options.selected !== undefined ) {
+                               options.active = options.selected;
+                       }
+                       _create.call( this );
+                       options.selected = options.active;
+               };
+
+               prototype._setOption = function( key, value ) {
+                       var options = this.options;
+                       if ( key === "selected" ) {
+                               key = "active";
+                       }
+                       _setOption.apply( this, arguments );
+                       if ( key === "active" ) {
+                               options.selected = options.active ;
+                       }
+               };
+
+               prototype._eventHandler = function( event ) {
+                       _eventHandler.apply( this, arguments );
+                       this.options.selected = this.options.active ;
+               };
+       }( jQuery, jQuery.ui.tabs.prototype ) );
 }
 
 })( jQuery );