+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Tabs Test Suite</title>
-
- <script src="../../jquery.js"></script>
- <link rel="stylesheet" href="../../../external/qunit.css">
- <script src="../../../external/qunit.js"></script>
- <script src="../../jquery.simulate.js"></script>
- <script src="../testsuite.js"></script>
- <script>
- TestHelpers.loadResources({
- css: [ "ui.core", "ui.tabs" ],
- js: [
- "ui/jquery.ui.core.js",
- "ui/jquery.ui.widget.js",
- "ui/jquery.ui.tabs.js"
- ]
- });
- </script>
-
- <script src="tabs_test_helpers.js"></script>
- <script src="tabs_common_deprecated.js"></script>
- <script src="tabs_core.js"></script>
- <script src="tabs_events.js"></script>
- <script src="tabs_methods.js"></script>
- <script src="tabs_options.js"></script>
- <script src="tabs_deprecated.js"></script>
-
- <script src="../swarminject.js"></script>
- <style>
- #tabs8, #tabs8 * {
- margin: 0;
- padding: 0;
- font-size: 12px;
- line-height: 15px;
- }
- </style>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery UI Tabs Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<div id="qunit-testrunner-toolbar"></div>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests"></ol>
-<div id="qunit-fixture">
-
-<div id="tabs1">
- <ul>
- <li><a href="#fragment-1"><span>1</span></a></li>
- <li><a href="#fragment-2"><span>2</span></a></li>
- <li><a href="#fragment-3"><span>3</span></a></li>
- </ul>
- <div id="fragment-1"></div>
- <div id="fragment-2"></div>
- <div id="fragment-3"></div>
-</div>
-
-<div id="tabs2">
- <ul>
- <li><a href="#colon:test"><span>1</span></a></li>
- <li><a href="#inline-style"><span>2</span></a></li>
- <li><a href="data/test.html#test"><span>3</span></a></li>
- <li aria-controls="custom-id"><a href="data/test.html"><span>4</span></a></li>
- <li><a href="data/test.html" title="∫ßáö Սե"><span>5</span></a></li>
- </ul>
- <div id="colon:test"></div>
- <div style="height: 300px;" id="inline-style"></div>
- <div id="custom-id"></div>
-</div>
-
-<div id="tabs3">
- <div>
- <ul id="tabs3-list">
- <li><a href="#tabs3-1">1</a></li>
- </ul>
- </div>
-</div>
-
-<div id="tabs4">
- <ul id="tabs4-list">
- <li><a href="#tabs4-1">1</a></li>
- </ul>
- <ol>
- <li><a href="#tabs4-1">1</a></li>
- </ol>
-</div>
-
-<div id="tabs4a">
- <ol id="tabs4a-list">
- <li><a href="#tabs4a-1">1</a></li>
- </ol>
- <ul>
- <li><a href="#tabs4a-1">1</a></li>
- </ul>
-</div>
-
-<div id="tabs5">
- <div>
- <ul id="tabs5-list"></ul>
- </div>
-</div>
-
-<div id="tabs6">
- <ul id="tabs6-list">
- <li><a href="#tabs6-1">1</a>
- <ul>
- <li><a href="#item6-3">3</a></li>
- <li><a href="#item6-4">4</a></li>
- </ul>
- </li>
- <li><a href="#tabs6-2">2</a></li>
- </ul>
- <div id="tabs6-1"></div>
- <div id="tabs6-2"></div>
-</div>
-
-<div id="tabs7">
- <ul id="tabs7-list">
- <li><a href="#tabs7-1">1</a></li>
- <li><a href="#tabs7-2">2</a></li>
- </ul>
- <div id="tabs7-2"></div>
- <div id="tabs7-1"></div>
-</div>
-
-<div id="tabs8Wrapper">
- <div id="tabs8">
- <ul id="tabs8-list">
- <li><a href="#tabs8-1">1</a></li>
- <li><a href="#tabs8-2">2</a></li>
- </ul>
- <div id="tabs8-1">
- <p>Lorem ipsum</p>
- <p>Lorem ipsum</p>
- <p>Lorem ipsum</p>
- </div>
- <div id="tabs8-2">
- <p>Lorem ipsum</p>
- </div>
- </div>
-</div>
-
-<div id="tabs9">
- <ul>
- <li>not a tab</li>
- <li><a href="#tabs9-1">tab</a></li>
- </ul>
- <div id="tabs9-1"></div>
-</div>
-
-</div>
-</body>
-</html>
+++ /dev/null
-(function( $ ) {
-
-var state = TestHelpers.tabs.state;
-
-module( "tabs (deprecated): core" );
-
-test( "panel ids", function() {
- expect( 2 );
-
- var element = $( "#tabs2" ).tabs();
-
- element.one( "tabsbeforeload", function( event, ui ) {
- equal( ui.panel.attr( "id" ), "∫ßáö_Սե", "from title attribute" );
- event.preventDefault();
- });
- element.tabs( "option", "active", 4 );
-
- element.one( "tabsbeforeload", function( event, ui ) {
- ok( /^ui-tabs-\d+$/.test( ui.panel.attr( "id" ) ), "generated id" );
- event.preventDefault();
- });
- element.tabs( "option", "active", 2 );
-});
-
-module( "tabs (deprecated): options" );
-
-test( "idPrefix", function() {
- expect( 1 );
-
- $( "#tabs2" )
- .one( "tabsbeforeload", function( event, ui ) {
- ok( /^testing-\d+$/.test( ui.panel.attr( "id" ) ), "generated id" );
- event.preventDefault();
- })
- .tabs({
- idPrefix: "testing-",
- active: 2
- });
-});
-
-test( "tabTemplate + panelTemplate", function() {
- // defaults are tested in the add method test
- expect( 11 );
-
- var tab, anchor,
- element = $( "#tabs2" ).tabs({
- tabTemplate: "<li class='customTab'><a href='http://example.com/#{href}'>#{label}</a></li>",
- panelTemplate: "<div class='customPanel'></div>"
- });
- element.one( "tabsadd", function( event, ui ) {
- var anchor = $( ui.tab );
- equal( ui.index, 5, "ui.index" );
- equal( anchor.text(), "New", "ui.tab" );
- equal( anchor.attr( "href" ), "http://example.com/#new", "tab href" );
- ok( anchor.parent().hasClass( "customTab" ), "tab custom class" );
- equal( ui.panel.id, "new", "ui.panel" );
- ok( $( ui.panel ).hasClass( "customPanel" ), "panel custom class" );
- });
- element.tabs( "add", "#new", "New" );
- tab = element.find( ".ui-tabs-nav li" ).last();
- anchor = tab.find( ".ui-tabs-anchor" );
- equal( tab.text(), "New", "label" );
- ok( tab.hasClass( "customTab" ), "tab custom class" );
- equal( anchor.attr( "href" ), "http://example.com/#new", "href" );
- equal( tab.attr( "aria-controls" ), "new", "aria-controls" );
- ok( element.find( "#new" ).hasClass( "customPanel" ), "panel custom class" );
-});
-
-module( "tabs (deprecated): methods" );
-
-test( "add", function() {
- expect( 28 );
-
- var tab, anchor,
- element = $( "#tabs1" ).tabs();
-
- function stripLeadingSlash( str ) {
- return str.substr( str.charAt( 0 ) === "/" ? 1 : 0 );
- }
-
- state( element, 1, 0, 0 );
-
- // add without index
- element.one( "tabsadd", function( event, ui ) {
- equal( ui.index, 3, "ui.index" );
- equal( $( ui.tab ).text(), "New", "ui.tab" );
- equal( ui.panel.id, "new", "ui.panel" );
- });
- element.tabs( "add", "#new", "New" );
- state( element, 1, 0, 0, 0 );
- tab = element.find( ".ui-tabs-nav li" ).last();
- anchor = tab.find( ".ui-tabs-anchor" );
- equal( tab.text(), "New", "label" );
- equal( stripLeadingSlash( anchor[0].pathname ), stripLeadingSlash( location.pathname ), "href pathname" );
- equal( anchor[0].hash, "#new", "href hash" );
- equal( tab.attr( "aria-controls" ), "new", "aria-controls" );
- ok( !tab.hasClass( "ui-state-hover" ), "not hovered" );
- anchor.simulate( "mouseover" );
- ok( tab.hasClass( "ui-state-hover" ), "hovered" );
- anchor.simulate( "click" );
- state( element, 0, 0, 0, 1 );
-
- // add remote tab with index
- element.one( "tabsadd", function( event, ui ) {
- equal( ui.index, 1, "ui.index" );
- equal( $( ui.tab ).text(), "New Remote", "ui.tab" );
- equal( ui.panel.id, $( ui.tab ).closest( "li" ).attr( "aria-controls" ), "ui.panel" );
- });
- element.tabs( "add", "data/test.html", "New Remote", 1 );
- state( element, 0, 0, 0, 0, 1 );
- tab = element.find( ".ui-tabs-nav li" ).eq( 1 );
- anchor = tab.find( ".ui-tabs-anchor" );
- equal( tab.text(), "New Remote", "label" );
- equal( stripLeadingSlash( stripLeadingSlash(
- anchor[0].pathname.replace( stripLeadingSlash( location.pathname ).split( "/" ).slice( 0, -1 ).join( "/" ), "" )
- ) ), "data/test.html", "href" );
- ok( /^ui-tabs-\d+$/.test( tab.attr( "aria-controls" ) ), "aria controls" );
- ok( !tab.hasClass( "ui-state-hover" ), "not hovered" );
- anchor.simulate( "mouseover" );
- ok( tab.hasClass( "ui-state-hover" ), "hovered" );
- anchor.simulate( "click" );
- state( element, 0, 1, 0, 0, 0 );
-
- // add to empty tab set
- element = $( "<div><ul></ul></div>" ).tabs();
- equal( element.tabs( "option", "active" ), false, "active: false on init" );
- element.one( "tabsadd", function( event, ui ) {
- equal( ui.index, 0, "ui.index" );
- equal( $( ui.tab ).text(), "First", "ui.tab" );
- equal( ui.panel.id, "first", "ui.panel" );
- });
- element.tabs( "add", "#first", "First" );
- state( element, 1 );
- equal( element.tabs( "option", "active" ), 0, "active: 0 after add" );
-});
-
-test( "#5069 - ui.tabs.add creates two tab panels when using a full URL", function() {
- expect( 2 );
-
- var element = $( "#tabs2" ).tabs();
- equal( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length );
- element.tabs( "add", "/new", "New" );
- equal( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length );
-});
-
-test( "remove", function() {
- expect( 17 );
-
- var element = $( "#tabs1" ).tabs({ active: 1 });
- state( element, 0, 1, 0 );
-
- element.one( "tabsremove", function( event, ui ) {
- equal( ui.index, -1, "ui.index" );
- equal( $( ui.tab ).text(), "2", "ui.tab" );
- equal( ui.panel.id, "fragment-2", "ui.panel" );
- });
- element.tabs( "remove", 1 );
- state( element, 0, 1 );
- equal( element.tabs( "option", "active" ), 1 );
- equal( element.find( ".ui-tabs-nav li a[href$='fragment-2']" ).length, 0,
- "remove correct list item" );
- equal( element.find( "#fragment-2" ).length, 0, "remove correct panel" );
-
- element.one( "tabsremove", function( event, ui ) {
- equal( ui.index, -1, "ui.index" );
- equal( $( ui.tab ).text(), "3", "ui.tab" );
- equal( ui.panel.id, "fragment-3", "ui.panel" );
- });
- element.tabs( "remove", 1 );
- state( element, 1 );
- equal( element.tabs( "option", "active"), 0 );
-
- element.one( "tabsremove", function( event, ui ) {
- equal( ui.index, -1, "ui.index" );
- equal( $( ui.tab ).text(), "1", "ui.tab" );
- equal( ui.panel.id, "fragment-1", "ui.panel" );
- });
- element.tabs( "remove", 0 );
- equal( element.tabs( "option", "active" ), false );
-});
-
-}( jQuery ) );
}
});
-// DEPRECATED
-if ( $.uiBackCompat !== false ) {
-
- // helper method for a lot of the back compat extensions
- $.ui.tabs.prototype._ui = function( tab, panel ) {
- return {
- tab: tab,
- panel: panel,
- index: this.anchors.index( tab )
- };
- };
-
- // add/remove methods and events
- $.widget( "ui.tabs", $.ui.tabs, {
- options: {
- add: null,
- remove: null,
- tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>"
- },
-
- add: function( url, label, index ) {
- if ( index === undefined ) {
- index = this.anchors.length;
- }
-
- var doInsertAfter, panel,
- options = this.options,
- li = $( options.tabTemplate
- .replace( /#\{href\}/g, url )
- .replace( /#\{label\}/g, label ) ),
- id = !url.indexOf( "#" ) ?
- url.replace( "#", "" ) :
- this._tabId( li );
-
- li.addClass( "ui-state-default ui-corner-top" ).data( "ui-tabs-destroy", true );
- li.attr( "aria-controls", id );
-
- doInsertAfter = index >= this.tabs.length;
-
- // try to find an existing element before creating a new one
- panel = this.element.find( "#" + id );
- if ( !panel.length ) {
- panel = this._createPanel( id );
- if ( doInsertAfter ) {
- if ( index > 0 ) {
- panel.insertAfter( this.panels.eq( -1 ) );
- } else {
- panel.appendTo( this.element );
- }
- } else {
- panel.insertBefore( this.panels[ index ] );
- }
- }
- panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ).hide();
-
- if ( doInsertAfter ) {
- li.appendTo( this.tablist );
- } else {
- li.insertBefore( this.tabs[ index ] );
- }
-
- options.disabled = $.map( options.disabled, function( n ) {
- return n >= index ? ++n : n;
- });
-
- this.refresh();
- if ( this.tabs.length === 1 && options.active === false ) {
- this.option( "active", 0 );
- }
-
- this._trigger( "add", null, this._ui( this.anchors[ index ], this.panels[ index ] ) );
- return this;
- },
-
- remove: function( index ) {
- index = this._getIndex( index );
- var options = this.options,
- tab = this.tabs.eq( index ).remove(),
- panel = this._getPanelForTab( tab ).remove();
-
- // If selected tab was removed focus tab to the right or
- // in case the last tab was removed the tab to the left.
- // We check for more than 2 tabs, because if there are only 2,
- // then when we remove this tab, there will only be one tab left
- // so we don't need to detect which tab to activate.
- if ( tab.hasClass( "ui-tabs-active" ) && this.anchors.length > 2 ) {
- this._activate( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
- }
-
- options.disabled = $.map(
- $.grep( options.disabled, function( n ) {
- return n !== index;
- }),
- function( n ) {
- return n >= index ? --n : n;
- });
-
- this.refresh();
-
- this._trigger( "remove", null, this._ui( tab.find( "a" )[ 0 ], panel[ 0 ] ) );
- return this;
- }
- });
-
- // panel ids (idPrefix option + title attribute)
- $.widget( "ui.tabs", $.ui.tabs, {
- options: {
- idPrefix: "ui-tabs-"
- },
-
- _tabId: function( tab ) {
- var a = tab.is( "li" ) ? tab.find( "a[href]" ) : tab;
- a = a[0];
- return $( a ).closest( "li" ).attr( "aria-controls" ) ||
- a.title && a.title.replace( /\s/g, "_" ).replace( /[^\w\u00c0-\uFFFF\-]/g, "" ) ||
- this.options.idPrefix + getNextTabId();
- }
- });
-
- // _createPanel method
- $.widget( "ui.tabs", $.ui.tabs, {
- options: {
- panelTemplate: "<div></div>"
- },
-
- _createPanel: function( id ) {
- return $( this.options.panelTemplate )
- .attr( "id", id )
- .addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" )
- .data( "ui-tabs-destroy", true );
- }
- });
-}
-
})( jQuery );
projects / jquery-ui.git / commitdiff