Tabs: Deprecate templating (idPrefix, tabTemplate, panelTemplate options) Fixes #7139 Tabs: Deprecate templating (idPrefix, tabTemplate, panelTemplate options)

tests/unit/tabs/tabs_defaults.js

@@ -9,12 +9,9 @@ var tabs_defaults = {
 	disabled: false,
 	event: "click",
 	fx: null,
-	idPrefix: "ui-tabs-",
 	load: null,
-	panelTemplate: "<div></div>",
 	select: null,
-	show: null,
+	show: null
-	tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>"
 };
 
 // FAIL: falsy values break the cookie option

tests/unit/tabs/tabs_deprecated.js

@@ -24,6 +24,18 @@ test('cache', function() {
 	ok(false, "missing test - untested code is broken code.");
 });
 
+test('idPrefix', function() {
+	ok(false, "missing test - untested code is broken code.");
+});
+
+test('tabTemplate', function() {
+	ok(false, "missing test - untested code is broken code.");
+});
+
+test('panelTemplate', function() {
+	ok(false, "missing test - untested code is broken code.");
+});
+
 test('spinner', function() {
 	expect(4);
 	stop();

tests/unit/tabs/tabs_options.js

@@ -79,14 +79,6 @@ test('fx', function() {
 	ok(false, "missing test - untested code is broken code.");
 });
 
-test('idPrefix', function() {
-	ok(false, "missing test - untested code is broken code.");
-});
-
-test('panelTemplate', function() {
-	ok(false, "missing test - untested code is broken code.");
-});
-
 test('selected', function() {
 	expect(8);
 
@@ -117,8 +109,4 @@ test('selected', function() {
 	equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if value is same as selected');
 });
 
-test('tabTemplate', function() {
-	ok(false, "missing test - untested code is broken code.");
-});
-
 })(jQuery);

ui/jquery.ui.tabs.js

@@ -32,12 +32,9 @@ $.widget( "ui.tabs", {
 		disabled: false,
 		event: "click",
 		fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 }
-		idPrefix: "ui-tabs-",
 		load: null,
-		panelTemplate: "<div></div>",
 		select: null,
-		show: null,
+		show: null
-		tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>"
 	},
 
 	_create: function() {
@@ -135,7 +132,7 @@ $.widget( "ui.tabs", {
 
 	_tabId: function( a ) {
 		return ( $( a ).attr( "aria-controls" ) || "" ).replace( /^#/ , "" ) ||
-			this.options.idPrefix + getNextTabId();
+			"ui-tabs-" + getNextTabId();
 	},
 
 	_sanitizeSelector: function( hash ) {
@@ -253,11 +250,8 @@ $.widget( "ui.tabs", {
 				selector = "#" + id;
 				panel = self.element.find( selector );
 				if ( !panel.length ) {
-					panel = $( self.options.panelTemplate )
+					panel = self._createPanel( id );
-						.attr( "id", id )
+					panel.insertAfter( self.panels[ i - 1 ] || self.list );
-						.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" )
-						.data( "destroy.tabs", true )
-						.insertAfter( self.panels[ i - 1 ] || self.list );
 				}
 			// invalid tab href
 			} else {
@@ -271,6 +265,13 @@ $.widget( "ui.tabs", {
 		});
 	},
 
+	_createPanel: function( id ) {
+		return $( "<div></div>" )
+					.attr( "id", id )
+					.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" )
+					.data( "destroy.tabs", true );
+	},
+
 	_setupFx: function( fx ) {
 		// set up animations
 		if ( fx ) {
@@ -772,7 +773,8 @@ if ( $.uiBackCompat !== false ) {
 	(function( $, prototype ) {
 		$.extend( prototype.options, {
 			add: null,
-			remove: null
+			remove: null,
+			tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>"
 		});
 
 		prototype.add = function( url, label, index ) {
@@ -790,9 +792,7 @@ if ( $.uiBackCompat !== false ) {
 			// try to find an existing element before creating a new one
 			var $panel = self.element.find( "#" + id );
 			if ( !$panel.length ) {
-				$panel = $( o.panelTemplate )
+				$panel = self._createPanel( id );
-					.attr( "id", id )
-					.data( "destroy.tabs", true );
 			}
 			$panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" );
 
@@ -868,10 +868,30 @@ if ( $.uiBackCompat !== false ) {
 
 	// _tabId method
 	(function( $, prototype ) {
+		$.extend( prototype.options, {
+			idPrefix: "ui-tabs-"
+		});
+
 		var _tabId = prototype._tabId;
 		prototype._tabId = function( a ) {
-		return a.title && a.title.replace( /\s/g, "_" ).replace( /[^\w\u00c0-\uFFFF-]/g, "" ) ||
+			return ( $( a ).attr( "aria-controls" ) || "" ).replace( /^#/ , "" ) ||
-			_tabId.apply( this, arguments );
+				a.title && a.title.replace( /\s/g, "_" ).replace( /[^\w\u00c0-\uFFFF-]/g, "" ) ||
+				this.options.idPrefix + getNextTabId();
+		};
+	}( jQuery, jQuery.ui.tabs.prototype ) );
+
+	// _tabId method
+	(function( $, prototype ) {
+		$.extend( prototype.options, {
+			panelTemplate: "<div></div>"
+		});
+
+		var _createPanel = prototype._createPanel;
+		prototype._createPanel = function( id ) {
+			return $( this.options.panelTemplate )
+					.attr( "id", id )
+					.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" )
+					.data( "destroy.tabs", true );
 		};
 	}( jQuery, jQuery.ui.tabs.prototype ) );
 }