mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
Tabs: Deprecate add and remove methods Fixes #7141 Tabs: Deprecate add and remove methods
This commit is contained in:
parent
e5f081bc1c
commit
e378876918
@ -3,7 +3,6 @@
|
||||
*/
|
||||
|
||||
var tabs_defaults = {
|
||||
add: null,
|
||||
beforeload: null,
|
||||
collapsible: false,
|
||||
cookie: null,
|
||||
@ -13,7 +12,6 @@ var tabs_defaults = {
|
||||
idPrefix: "ui-tabs-",
|
||||
load: null,
|
||||
panelTemplate: "<div></div>",
|
||||
remove: null,
|
||||
select: null,
|
||||
show: null,
|
||||
tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>"
|
||||
|
@ -1,6 +1,6 @@
|
||||
(function( $ ) {
|
||||
|
||||
module("tabs (deprecated): cache and ajaxoptions");
|
||||
module("tabs (deprecated): options");
|
||||
|
||||
test('ajaxOptions', function() {
|
||||
ok(false, "missing test - untested code is broken code.");
|
||||
@ -10,8 +10,6 @@ test('cache', function() {
|
||||
ok(false, "missing test - untested code is broken code.");
|
||||
});
|
||||
|
||||
module("tabs (deprecated): spinner");
|
||||
|
||||
test('spinner', function() {
|
||||
expect(4);
|
||||
stop();
|
||||
@ -41,7 +39,7 @@ test('spinner', function() {
|
||||
});
|
||||
});
|
||||
|
||||
module("tabs (deprecated): enable/disable events");
|
||||
module("tabs (deprecated): events");
|
||||
|
||||
test('enable', function() {
|
||||
expect(4);
|
||||
@ -76,4 +74,72 @@ test('disable', function() {
|
||||
equals(uiObj.index, 1, 'contain index');
|
||||
});
|
||||
|
||||
test('add', function() {
|
||||
|
||||
// TODO move to methods, not at all event related...
|
||||
|
||||
var el = $('<div id="tabs"><ul></ul></div>').tabs();
|
||||
equals(el.tabs('option', 'selected'), -1, 'Initially empty, no selected tab');
|
||||
|
||||
el.tabs('add', '#test1', 'Test 1');
|
||||
equals(el.tabs('option', 'selected'), 0, 'First tab added should be auto selected');
|
||||
|
||||
el.tabs('add', '#test2', 'Test 2');
|
||||
equals(el.tabs('option', 'selected'), 0, 'Second tab added should not be auto selected');
|
||||
|
||||
});
|
||||
|
||||
test('remove', function() {
|
||||
ok(false, "missing test - untested code is broken code.");
|
||||
});
|
||||
|
||||
module("tabs (deprecated): methods");
|
||||
|
||||
test('add', function() {
|
||||
expect(4);
|
||||
|
||||
el = $('#tabs1').tabs();
|
||||
el.tabs('add', '#new', 'New');
|
||||
|
||||
var added = $('li:last', el).simulate('mouseover');
|
||||
ok(added.is('.ui-state-hover'), 'should add mouseover handler to added tab');
|
||||
added.simulate('mouseout');
|
||||
var other = $('li:first', el).simulate('mouseover');
|
||||
ok(other.is('.ui-state-hover'), 'should not remove mouseover handler from existing tab');
|
||||
other.simulate('mouseout');
|
||||
|
||||
equals($('a', added).attr('href'), '#new', 'should not expand href to full url of current page');
|
||||
|
||||
ok(false, "missing test - untested code is broken code.");
|
||||
});
|
||||
|
||||
test('remove', function() {
|
||||
expect(4);
|
||||
|
||||
el = $('#tabs1').tabs();
|
||||
|
||||
el.tabs('remove', 0);
|
||||
equals(el.tabs('length'), 2, 'remove tab');
|
||||
equals($('li a[href$="fragment-1"]', el).length, 0, 'remove associated list item');
|
||||
equals($('#fragment-1').length, 0, 'remove associated panel');
|
||||
|
||||
// TODO delete tab -> focus tab to right
|
||||
// TODO delete last tab -> focus tab to left
|
||||
|
||||
el.tabs('select', 1);
|
||||
el.tabs('remove', 1);
|
||||
equals(el.tabs('option', 'selected'), 0, 'update selected property');
|
||||
});
|
||||
|
||||
test('#5069 - ui.tabs.add creates two tab panels when using a full URL', function() {
|
||||
// http://dev.jqueryui.com/ticket/5069
|
||||
expect(2);
|
||||
|
||||
el = $('#tabs2').tabs();
|
||||
equals(el.children('div').length, el.find('> ul > li').length, 'After creation, number of panels should be equal to number of tabs');
|
||||
el.tabs('add', '/ajax_html_echo', 'Test');
|
||||
equals(el.children('div').length, el.find('> ul > li').length, 'After add, number of panels should be equal to number of tabs');
|
||||
|
||||
});
|
||||
|
||||
}( jQuery ) );
|
||||
|
@ -69,23 +69,4 @@ test('show', function() {
|
||||
|
||||
});
|
||||
|
||||
test('add', function() {
|
||||
|
||||
// TODO move to methods, not at all event related...
|
||||
|
||||
var el = $('<div id="tabs"><ul></ul></div>').tabs();
|
||||
equals(el.tabs('option', 'selected'), -1, 'Initially empty, no selected tab');
|
||||
|
||||
el.tabs('add', '#test1', 'Test 1');
|
||||
equals(el.tabs('option', 'selected'), 0, 'First tab added should be auto selected');
|
||||
|
||||
el.tabs('add', '#test2', 'Test 2');
|
||||
equals(el.tabs('option', 'selected'), 0, 'Second tab added should not be auto selected');
|
||||
|
||||
});
|
||||
|
||||
test('remove', function() {
|
||||
ok(false, "missing test - untested code is broken code.");
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
@ -130,42 +130,6 @@ test('disable', function() {
|
||||
same(el.tabs('option', 'disabled'), true, 'set to true');
|
||||
});
|
||||
|
||||
test('add', function() {
|
||||
expect(4);
|
||||
|
||||
el = $('#tabs1').tabs();
|
||||
el.tabs('add', '#new', 'New');
|
||||
|
||||
var added = $('li:last', el).simulate('mouseover');
|
||||
ok(added.is('.ui-state-hover'), 'should add mouseover handler to added tab');
|
||||
added.simulate('mouseout');
|
||||
var other = $('li:first', el).simulate('mouseover');
|
||||
ok(other.is('.ui-state-hover'), 'should not remove mouseover handler from existing tab');
|
||||
other.simulate('mouseout');
|
||||
|
||||
equals($('a', added).attr('href'), '#new', 'should not expand href to full url of current page');
|
||||
|
||||
ok(false, "missing test - untested code is broken code.");
|
||||
});
|
||||
|
||||
test('remove', function() {
|
||||
expect(4);
|
||||
|
||||
el = $('#tabs1').tabs();
|
||||
|
||||
el.tabs('remove', 0);
|
||||
equals(el.tabs('length'), 2, 'remove tab');
|
||||
equals($('li a[href$="fragment-1"]', el).length, 0, 'remove associated list item');
|
||||
equals($('#fragment-1').length, 0, 'remove associated panel');
|
||||
|
||||
// TODO delete tab -> focus tab to right
|
||||
// TODO delete last tab -> focus tab to left
|
||||
|
||||
el.tabs('select', 1);
|
||||
el.tabs('remove', 1);
|
||||
equals(el.tabs('option', 'selected'), 0, 'update selected property');
|
||||
});
|
||||
|
||||
test('select', function() {
|
||||
expect(6);
|
||||
|
||||
|
@ -59,17 +59,6 @@ test('#4033 - IE expands hash to full url and misinterprets tab as ajax', functi
|
||||
|
||||
});
|
||||
|
||||
test('#5069 - ui.tabs.add creates two tab panels when using a full URL', function() {
|
||||
// http://dev.jqueryui.com/ticket/5069
|
||||
expect(2);
|
||||
|
||||
el = $('#tabs2').tabs();
|
||||
equals(el.children('div').length, el.find('> ul > li').length, 'After creation, number of panels should be equal to number of tabs');
|
||||
el.tabs('add', '/ajax_html_echo', 'Test');
|
||||
equals(el.children('div').length, el.find('> ul > li').length, 'After add, number of panels should be equal to number of tabs');
|
||||
|
||||
});
|
||||
|
||||
test('#5893 - Sublist in the tab list are considered as tab', function() {
|
||||
// http://dev.jqueryui.com/ticket/5893
|
||||
expect(1);
|
||||
|
163
ui/jquery.ui.tabs.js
vendored
163
ui/jquery.ui.tabs.js
vendored
@ -26,7 +26,6 @@ function getNextListId() {
|
||||
|
||||
$.widget( "ui.tabs", {
|
||||
options: {
|
||||
add: null,
|
||||
beforeload: null,
|
||||
cookie: null, // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true }
|
||||
collapsible: false,
|
||||
@ -36,7 +35,6 @@ $.widget( "ui.tabs", {
|
||||
idPrefix: "ui-tabs-",
|
||||
load: null,
|
||||
panelTemplate: "<div></div>",
|
||||
remove: null,
|
||||
select: null,
|
||||
show: null,
|
||||
tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>"
|
||||
@ -445,82 +443,6 @@ $.widget( "ui.tabs", {
|
||||
return this;
|
||||
},
|
||||
|
||||
add: function( url, label, index ) {
|
||||
if ( index === undefined ) {
|
||||
index = this.anchors.length;
|
||||
}
|
||||
|
||||
var self = this,
|
||||
o = this.options,
|
||||
$li = $( o.tabTemplate.replace( /#\{href\}/g, url ).replace( /#\{label\}/g, label ) ),
|
||||
id = !url.indexOf( "#" ) ? url.replace( "#", "" ) : this._tabId( $( "a", $li )[ 0 ] );
|
||||
|
||||
$li.addClass( "ui-state-default ui-corner-top" ).data( "destroy.tabs", true );
|
||||
|
||||
// try to find an existing element before creating a new one
|
||||
var $panel = self.element.find( "#" + id );
|
||||
if ( !$panel.length ) {
|
||||
$panel = $( o.panelTemplate )
|
||||
.attr( "id", id )
|
||||
.data( "destroy.tabs", true );
|
||||
}
|
||||
$panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" );
|
||||
|
||||
if ( index >= this.lis.length ) {
|
||||
$li.appendTo( this.list );
|
||||
$panel.appendTo( this.list[ 0 ].parentNode );
|
||||
} else {
|
||||
$li.insertBefore( this.lis[ index ] );
|
||||
$panel.insertBefore( this.panels[ index ] );
|
||||
}
|
||||
|
||||
o.disabled = $.map( o.disabled, function( n, i ) {
|
||||
return n >= index ? ++n : n;
|
||||
});
|
||||
|
||||
this._tabify();
|
||||
|
||||
if ( this.anchors.length == 1 ) {
|
||||
o.selected = 0;
|
||||
$li.addClass( "ui-tabs-selected ui-state-active" );
|
||||
$panel.removeClass( "ui-tabs-hide" );
|
||||
this.element.queue( "tabs", function() {
|
||||
self._trigger( "show", null, self._ui( self.anchors[ 0 ], self.panels[ 0 ] ) );
|
||||
});
|
||||
|
||||
this.load( 0 );
|
||||
}
|
||||
|
||||
this._trigger( "add", null, this._ui( this.anchors[ index ], this.panels[ index ] ) );
|
||||
return this;
|
||||
},
|
||||
|
||||
remove: function( index ) {
|
||||
index = this._getIndex( index );
|
||||
var o = this.options,
|
||||
$li = this.lis.eq( index ).remove(),
|
||||
$panel = this.panels.eq( index ).remove();
|
||||
|
||||
// If selected tab was removed focus tab to the right or
|
||||
// in case the last tab was removed the tab to the left.
|
||||
if ( $li.hasClass( "ui-tabs-selected" ) && this.anchors.length > 1) {
|
||||
this.select( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
|
||||
}
|
||||
|
||||
o.disabled = $.map(
|
||||
$.grep( o.disabled, function(n, i) {
|
||||
return n != index;
|
||||
}),
|
||||
function( n, i ) {
|
||||
return n >= index ? --n : n;
|
||||
});
|
||||
|
||||
this._tabify();
|
||||
|
||||
this._trigger( "remove", null, this._ui( $li.find( "a" )[ 0 ], $panel[ 0 ] ) );
|
||||
return this;
|
||||
},
|
||||
|
||||
enable: function( index ) {
|
||||
if ( index === undefined ) {
|
||||
for ( var i = 0, len = this.lis.length; i < len; i++ ) {
|
||||
@ -805,6 +727,91 @@ if ( $.uiBackCompat !== false ) {
|
||||
}
|
||||
};
|
||||
}( jQuery, jQuery.ui.tabs.prototype ) );
|
||||
|
||||
// add/remove methods and events
|
||||
(function( $, prototype ) {
|
||||
$.extend( prototype.options, {
|
||||
add: null,
|
||||
remove: null
|
||||
});
|
||||
|
||||
prototype.add = function( url, label, index ) {
|
||||
if ( index === undefined ) {
|
||||
index = this.anchors.length;
|
||||
}
|
||||
|
||||
var self = this,
|
||||
o = this.options,
|
||||
$li = $( o.tabTemplate.replace( /#\{href\}/g, url ).replace( /#\{label\}/g, label ) ),
|
||||
id = !url.indexOf( "#" ) ? url.replace( "#", "" ) : this._tabId( $( "a", $li )[ 0 ] );
|
||||
|
||||
$li.addClass( "ui-state-default ui-corner-top" ).data( "destroy.tabs", true );
|
||||
|
||||
// try to find an existing element before creating a new one
|
||||
var $panel = self.element.find( "#" + id );
|
||||
if ( !$panel.length ) {
|
||||
$panel = $( o.panelTemplate )
|
||||
.attr( "id", id )
|
||||
.data( "destroy.tabs", true );
|
||||
}
|
||||
$panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" );
|
||||
|
||||
if ( index >= this.lis.length ) {
|
||||
$li.appendTo( this.list );
|
||||
$panel.appendTo( this.list[ 0 ].parentNode );
|
||||
} else {
|
||||
$li.insertBefore( this.lis[ index ] );
|
||||
$panel.insertBefore( this.panels[ index ] );
|
||||
}
|
||||
|
||||
o.disabled = $.map( o.disabled, function( n, i ) {
|
||||
return n >= index ? ++n : n;
|
||||
});
|
||||
|
||||
this._tabify();
|
||||
|
||||
if ( this.anchors.length == 1 ) {
|
||||
o.selected = 0;
|
||||
$li.addClass( "ui-tabs-selected ui-state-active" );
|
||||
$panel.removeClass( "ui-tabs-hide" );
|
||||
this.element.queue( "tabs", function() {
|
||||
self._trigger( "show", null, self._ui( self.anchors[ 0 ], self.panels[ 0 ] ) );
|
||||
});
|
||||
|
||||
this.load( 0 );
|
||||
}
|
||||
|
||||
this._trigger( "add", null, this._ui( this.anchors[ index ], this.panels[ index ] ) );
|
||||
return this;
|
||||
};
|
||||
|
||||
prototype.remove = function( index ) {
|
||||
index = this._getIndex( index );
|
||||
var o = this.options,
|
||||
$li = this.lis.eq( index ).remove(),
|
||||
$panel = this.panels.eq( index ).remove();
|
||||
|
||||
// If selected tab was removed focus tab to the right or
|
||||
// in case the last tab was removed the tab to the left.
|
||||
if ( $li.hasClass( "ui-tabs-selected" ) && this.anchors.length > 1) {
|
||||
this.select( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
|
||||
}
|
||||
|
||||
o.disabled = $.map(
|
||||
$.grep( o.disabled, function(n, i) {
|
||||
return n != index;
|
||||
}),
|
||||
function( n, i ) {
|
||||
return n >= index ? --n : n;
|
||||
});
|
||||
|
||||
this._tabify();
|
||||
|
||||
this._trigger( "remove", null, this._ui( $li.find( "a" )[ 0 ], $panel[ 0 ] ) );
|
||||
return this;
|
||||
};
|
||||
}( jQuery, jQuery.ui.tabs.prototype ) );
|
||||
|
||||
}
|
||||
|
||||
})( jQuery );
|
||||
|
Loading…
Reference in New Issue
Block a user