diff options
| author | Felix Nagel <info@felixnagel.com> | 2012-05-24 18:34:32 +0200 |
|---|---|---|
| committer | Felix Nagel <info@felixnagel.com> | 2012-05-24 18:34:32 +0200 |
| commit | b30184d885329317b9dbd70835d2c4d154f98475 (patch) | |
| tree | 445acc2481e8456211c3e893e7789fe4b5978791 | |
| parent | ec6d88fae464ffb432df6c8d2ed06ee9fa5b4dae (diff) | |
| parent | a1f604eb453208c80ec17c42c7bb4e3a1c624102 (diff) | |
| download | jquery-ui-b30184d885329317b9dbd70835d2c4d154f98475.tar.gz jquery-ui-b30184d885329317b9dbd70835d2c4d154f98475.zip | |
Merge with master
102 files changed, 1833 insertions, 4790 deletions
diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..7dd83491e --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +; This file is for unifying the coding style for different editors and IDEs. +; More information at http://EditorConfig.org + +root = true + +[grunt.js] +indent_style = tab + +[ui/**.js] +indent_style = tab + +[tests/unit/**.js] +indent_style = tab diff --git a/AUTHORS.txt b/AUTHORS.txt index ecb4eb460..d7cb18d16 100644 --- a/AUTHORS.txt +++ b/AUTHORS.txt @@ -1,31 +1,189 @@ -jQuery UI Authors (http://jqueryui.com/about) +Authors ordered by first contribution +A list of current team members is available at http://jqueryui.com/about -This software consists of voluntary contributions made by many -individuals. For exact contribution history, see the revision history -and logs, available at http://github.com/jquery/jquery-ui - -Brandon Aaron -Paul Bakaus (paulbakaus.com) -David Bolter -Rich Caloggero -Chi Cheng (cloudream@gmail.com) -Colin Clark (http://colin.atrc.utoronto.ca/) -Michelle D'Souza -Aaron Eisenberger (aaronchi@gmail.com) -Ariel Flesler -Bohdan Ganicky -Scott González -Marc Grabanski (m@marcgrabanski.com) -Klaus Hartl (stilbuero.de) -Hans Hillen (TPG, funded through AEGIS: http://www.aegis-project.eu/) -Scott Jehl -Cody Lindley -Eduardo Lundgren (eduardolundgren@gmail.com) -Todd Parker -John Resig -Patty Toland -Ca-Phun Ung (yelotofu.com) -Keith Wood (kbwood@virginbroadband.com.au) -Maggie Costello Wachs -Richard D. Worth (rdworth.org) -Jörn Zaefferer (bassistance.de) +Paul Bakaus <paul.bakaus@googlemail.com> +Richard Worth <rdworth@gmail.com> +Yehuda Katz <wycats@gmail.com> +Sean Catchpole <littlecooldude@gmail.com> +John Resig <jeresig@gmail.com> +Tane Piper <tane@tanepiper.com> +Dmitri Gaskin <dmitrig01@gmail.com> +Klaus Hartl <klaus.hartl@googlemail.com> +Stefan Petre <stefan.petre@gmail.com> +Gilles van den Hoven <gilles@webunity.nl> +Micheil Smith <micheil@brandedcode.com> +Jörn Zaefferer <joern.zaefferer@gmail.com> +Marc Grabanski <m@marcgrabanski.com> +Keith Wood <kbwood.au@gmail.com> +Brandon Aaron <brandon.aaron@gmail.com> +Scott González <scott.gonzalez@gmail.com> +Eduardo Lundgren <eduardolundgren@gmail.com> +Aaron Eisenberger <aaronchi@gmail.com> +Joan Piedra <theneojp@gmail.com> +Bruno Basto <b.basto@gmail.com> +Remy Sharp <remy@leftlogic.com> +Bohdan Ganicky <bohdan.ganicky@gmail.com> +David Bolter <david.bolter@gmail.com> +Chi Cheng <cloudream@gmail.com> +Ca-Phun Ung <pazu2k@gmail.com> +Ariel Flesler <aflesler@gmail.com> +Maggie Costello Wachs <fg.maggie@gmail.com> +Scott Jehl <scott@scottjehl.com> +Todd Parker <fg.todd@gmail.com> +Andrew Powell <powella@gmail.com> +Brant Burnett <btburnett3@gmail.com> +Douglas Neiner <doug@pixelgraphics.us> +Paul Irish <paul.irish@gmail.com> +Ralph Whitbeck <ralph.whitbeck@gmail.com> +Thibault Duplessis <thibault.duplessis@gmail.com> +Dominique Vincent <dominique.vincent@toitl.com> +Jack Hsu <jack.hsu@gmail.com> +Adam Sontag <ajpiano@ajpiano.com> +Carl Fürstenberg <carl@excito.com> +Kevin Dalman <development@allpro.net> +Alberto Fernández Capel <afcapel@gmail.com> +Jacek Jędrzejewski <jacek.jedrzejewski@gmail.com> +Ting Kuei <ting@kuei.com> +Samuel Cormier-Iijima <sam@chide.it> +Jon Palmer <jonspalmer@gmail.com> +Ben Hollis <bhollis@amazon.com> +Justin MacCarthy <Justin@Rubystars.biz> +Eyal Kobrigo <kobrigo@hotmail.com> +Tiago Freire <tiago.freire@gmail.com> +Diego Tres <diegotres@gmail.com> +Holger Rüprich <holger@rueprich.de> +Ziling Zhao <zizhao@cisco.com> +Mike Alsup <malsup@gmail.com> +Robson Braga Araujo <robsonbraga@gmail.com> +Pierre-Henri Ausseil <ph.ausseil@gmail.com> +Christopher McCulloh <cmcculloh@gmail.com> +Andrew Newcomb <ext.github@preceptsoftware.co.uk> +Lim Chee Aun <cheeaun@gmail.com> +Jorge Barreiro <yortx.barry@gmail.com> +Daniel Steigerwald <daniel@steigerwald.cz> +John Firebaugh <john_firebaugh@bigfix.com> +John Enters <github@darkdark.net> +Andrey Kapitcyn <ru.m157y@gmail.com> +Dmitry Petrov <dpetroff@gmail.com> +Eric Hynds <eric@hynds.net> +Chairat Sunthornwiphat <pipo@sixhead.com> +Josh Varner <josh.varner@gmail.com> +Stéphane Raimbault <stephane.raimbault@gmail.com> +Jay Merrifield <fracmak@gmail.com> +J. Ryan Stinnett <jryans@gmail.com> +Peter Heiberg <peter@heiberg.se> +Alex Dovenmuehle <adovenmuehle@gmail.com> +Jamie Gegerson <git@jamiegegerson.com> +Raymond Schwartz <skeetergraphics@gmail.com> +Phillip Barnes <philbar@gmail.com> +Kyle Wilkinson <kai@wikyd.org> +Khaled AlHourani <me@khaledalhourani.com> +Marian Rudzynski <mr@impaled.org> +Jean-Francois Remy <jfremy@virtuoz.com> +Doug Blood <dougblood@gmail.com> +Filippo Cavallarin <poplix@papuasia.org> +Heiko Henning <h.henning@educa.ch> +Aliaxandr Rahalevich <saksmlz@gmail.com> +Mario Visic <mario@mariovisic.com> +Xavi Ramirez <xavi.rmz@gmail.com> +Max Schnur <max.schnur@gmail.com> +Saji Nediyanchath <saji89@gmail.com> +Corey Frang <gnarf@gnarf.net> +Aaron Peterson <aaronp123@yahoo.com> +Ivan Peters <ivan@ivanpeters.com> +Mohamed Cherif Bouchelaghem <cherifbouchelaghem@yahoo.fr> +Marcos Sousa <marcos.sousa@corp.globo.com> +Michael DellaNoce <mdellanoce@mailtrust.com> +George Marshall <echosx@gmail.com> +Tobias Brunner <tobias@strongswan.org> +Martin Solli <msolli@gmail.com> +David Petersen <public@petersendidit.com> +Dan Heberden <danheberden@gmail.com> +William Kevin Manire <williamkmanire@gmail.com> +Gilmore Davidson <gilmoreorless@gmail.com> +Michael Wu <michaelmwu@gmail.com> +Adam Parod <mystic414@gmail.com> +Guillaume Gautreau <guillaume+github@ghusse.com> +Marcel Toele <EleotleCram@gmail.com> +Dan Streetman <ddstreet@ieee.org> +Matt Hoskins <furlined@cat-basket.org> +Giovanni Giacobbi <giovanni@giacobbi.net> +Kyle Florence <kyle.florence@gmail.com> +Pavol Hluchý <lopo@losys.sk> +Hans Hillen <hans.hillen@gmail.com> +Mark Johnson <virgofx@live.com> +Trey Hunner <treyhunner@gmail.com> +Shane Whittet <whittet@gmail.com> +Edward Faulkner <ef@alum.mit.edu> +Adam Baratz <adam.baratz@gmail.com> +Kato Kazuyoshi <kato.kazuyoshi@gmail.com> +Eike Send <eike.send@gmail.com> +Kris Borchers <kris.borchers@gmail.com> +Eddie Monge <eddie@eddiemonge.com> +Israel Tsadok <itsadok@gmail.com> +Carson McDonald <carson@ioncannon.net> +Jason Davies <jason@jasondavies.com> +Garrison Locke <gplocke@gmail.com> +David Murdoch <musicisair@yahoo.com> +Ben Boyle <benjamins.boyle@gmail.com> +Jesse Baird <jebaird@gmail.com> +Jonathan Vingiano <jvingiano@gmail.com> +Dylan Just <dev@ephox.com> +Tomy Kaira <tomykaira@gmail.com> +Glenn Goodrich <glenn.goodrich@gmail.com> +Ashek Elahi <mail.ashek@gmail.com> +Ryan Neufeld <ryan@neufeldmail.com> +Marc Neuwirth <marc.neuwirth@gmail.com> +Philip Graham <philip.robert.graham@gmail.com> +Benjamin Sterling <benjamin.sterling@kenzomedia.com> +Wesley Walser <wwalser@atlassian.com> +Kouhei Sutou <kou@clear-code.com> +Karl Kirch <karl.ctr.kirch@faa.gov> +Chris Kelly <ckdake@ckdake.com> +Jay Oster <jay@loyalize.com> +Alex Polomoshnov <alex.polomoshnov@gmail.com> +David Leal <dgleal@gmail.com> +igor milla <igor.fsp.milla@gmail.com> +Dave Methvin <dave.methvin@gmail.com> +Florian Gutmann <blackfeet@gmx.at> +Marwan Al Jubeh <marwan.aljubeh@gmail.com> +Milan Broum <midlis@googlemail.com> +Sebastian Sauer <info@dynpages.de> +Gaëtan Muller <m.gaetan89@gmail.com> +Michel Weimerskirch <michel@weimerskirch.net> +William Griffiths <william@ycymro.com> +Stojce Slavkovski <stojce@gmail.com> +David Soms <david.soms@gmail.com> +David De Sloovere <david.desloovere@hotmail.com> +Michael P. Jung <michael.jung@terreon.de> +Shannon Pekary <spekary@gmail.com> +Matthew Hutton <meh@corefiling.co.uk> +James Khoury <james@jameskhoury.com> +Rob Loach <robloach@gmail.com> +Alberto Monteiro <betimbrasil@gmail.com> +Alex Rhea <alex.rhea@gmail.com> +Krzysztof Rosiński <rozwell69@gmail.com> +Ryan Olton <oltonr@gmail.com> +Genie <386@mail.com> +Rick Waldron <waldron.rick@gmail.com> +Ian Simpson <spoonlikesham@gmail.com> +Lev Kitsis <spam4lev@gmail.com> +TJ VanToll <tj.vantoll@gmail.com> +Justin Domnitz <jdomnitz@gmail.com> +Douglas Cerna <replaceafill@system76.(none)> +Bert ter Heide <bertjh@hotmail.com> +Jasvir Nagra <jasvir@gmail.com> +Petr Hromadko <yuriy@tokyoscale.com> +Harri Kilpiö <harri.kilpio@gmail.com> +Lado Lomidze <lado.lomidze@gmail.com> +Amir E. Aharoni <amir.aharoni@mail.huji.ac.il> +Simon Sattes <simon.sattes@gmail.com> +Jo Liss <joliss42@gmail.com> +Guntupalli Karunakar <karunakarg@yahoo.com> +Shahyar Ghobadpour <shahyar@gmail.com> +Lukasz Lipinski <uzza17@gmail.com> +Timo Tijhof <krinklemail@gmail.com> +Jason Moon <jmoon@socialcast.com> +Martin Frost <martinf55@hotmail.com> +Eneko Illarramendi <eneko@illarra.com> +EungJun Yi <semtlenori@gmail.com> @@ -5,14 +5,16 @@ jQuery UI provides interactions like Drag and Drop and widgets like Autocomplete If you want to use jQuery UI, go to [jqueryui.com](http://jqueryui.com) to get started. Or visit the [Using jQuery UI Forum](http://forum.jquery.com/using-jquery-ui) for discussions and questions. -If you are interested in helping developing jQuery UI, you are in the right place. -To discuss development with team members and the community, visit the [Developing jQuery UI Forum](http://forum.jquery.com/developing-jquery-ui). +If you are interested in helping develop jQuery UI, you are in the right place. +To discuss development with team members and the community, visit the [Developing jQuery UI Forum](http://forum.jquery.com/developing-jquery-ui) or in #jquery on irc.freednode.net. + For contributors --- + If you want to help and provide a patch for a bugfix or new feature, please take -a few minutes and look at [our Getting Involved guide](http://wiki.jqueryui.com/w/page/35263114/Getting-Involved), -in particular check out the [Coding standards](http://wiki.jqueryui.com/w/page/12137737/Coding-standards) +a few minutes and look at [our Getting Involved guide](http://wiki.jqueryui.com/w/page/35263114/Getting-Involved). +In particular check out the [Coding standards](http://wiki.jqueryui.com/w/page/12137737/Coding-standards) and [Commit Message Style Guide](http://wiki.jqueryui.com/w/page/25941597/Commit-Message-Style-Guide). In general, fork the project, create a branch for a specific change and send a @@ -20,19 +22,78 @@ pull request for that branch. Don't mix unrelated changes. You can use the commi message as the description for the pull request. +Running the Unit Tests +--- + +Run the unit tests with a local server that supports PHP. No database is required. Pre-configured php local servers are available for Windows and Mac. Here are some options: + +- Windows: [WAMP download](http://www.wampserver.com/en/) +- Mac: [MAMP download](http://www.mamp.info/en/index.html) +- Linux: [Setting up LAMP](https://www.linux.com/learn/tutorials/288158-easy-lamp-server-installation) +- [Mongoose (most platforms)](http://code.google.com/p/mongoose/) + + +Building jQuery UI +--- + +jQuery UI uses the [grunt](http://github.com/cowboy/grunt) build system. Building jQuery UI requires node.js and a command line zip program. + +Install grunt. + +`npm install grunt -g` + +Clone the jQuery UI git repo. + +`git clone git://github.com/jquery/jquery-ui.git` + +`cd jquery-ui` + +Install node modules. + +`npm install` + +Run grunt. + +`grunt build` + +There are many other tasks that can be run through grunt. For a list of all tasks: + +`grunt --help` + + For committers --- + When looking at pull requests, first check for [proper commit messages](http://wiki.jqueryui.com/w/page/12137724/Bug-Fixing-Guide). -Unless everything is fine and you can merge directly via GitHub's interface, fetch the remote first: +Do not merge pull requests directly through GitHub's interface. +Most pull requests are a single commit; cherry-picking will avoid creating a merge commit. +It's also common for contributors to make minor fixes in an additional one or two commits. +These should be squashed before landing in master. - git remote add [username] [his-fork.git] -f +**Make sure the author has a valid name and email address associated with the commit.** -If you want just one commit and edit the commit message: +Fetch the remote first: + + git fetch [their-fork.git] [their-branch] + +Then cherry-pick the commit(s): + + git cherry-pick [sha-of-commit] + +If you need to edit the commit message: git cherry-pick -e [sha-of-commit] +If you need to edit the changes: + + git cherry-pick -n [sha-of-commit] + # make changes + git commit --author="[author-name-and-email]" + If it should go to the stable brach, cherry-pick it to stable: git checkout 1-8-stable - git cherry-pick -x [sha-of-commit] + git cherry-pick -x [sha-of-commit-from-master] + +*NOTE: Do not cherry-pick into 1-8-stable until you have pushed the commit from master upstream.* diff --git a/demos/accordion/custom-icons.html b/demos/accordion/custom-icons.html index 54716d9a0..02344bd12 100644 --- a/demos/accordion/custom-icons.html +++ b/demos/accordion/custom-icons.html @@ -19,10 +19,12 @@ $( "#accordion" ).accordion({ icons: icons }); - $( "#toggle" ).button().toggle(function() { - $( "#accordion" ).accordion( "option", "icons", null ); - }, function() { - $( "#accordion" ).accordion( "option", "icons", icons ); + $( "#toggle" ).button().click(function() { + if ( $( "#accordion" ).accordion( "option", "icons" ) ) { + $( "#accordion" ).accordion( "option", "icons", null ); + } else { + $( "#accordion" ).accordion( "option", "icons", icons ); + } }); }); </script> diff --git a/demos/animate/default.html b/demos/animate/default.html index 4fec428e7..307d030a6 100644 --- a/demos/animate/default.html +++ b/demos/animate/default.html @@ -15,22 +15,23 @@ </style> <script> $(function() { - $( "#button" ).toggle( - function() { + var state = true; + $( "#button" ).click(function() { + if ( state ) { $( "#effect" ).animate({ backgroundColor: "#aa0000", color: "#fff", width: 500 }, 1000 ); - }, - function() { + } else { $( "#effect" ).animate({ backgroundColor: "#fff", color: "#000", width: 240 }, 1000 ); } - ); + state = !state; + }); }); </script> </head> diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index e2ef40dd9..051d55e45 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -18,7 +18,7 @@ position: relative; display: inline-block; } - .ui-button { + .ui-combobox-toggle { position: absolute; top: 0; bottom: 0; @@ -28,7 +28,7 @@ *height: 1.7em; *top: 0.1em; } - .ui-autocomplete-input { + .ui-combobox-input { margin: 0; padding: 0.3em; } @@ -75,7 +75,7 @@ .appendTo( wrapper ) .val( value ) .attr( "title", "" ) - .addClass( "ui-state-default" ) + .addClass( "ui-state-default ui-combobox-input" ) .autocomplete({ delay: 0, minLength: 0, @@ -128,7 +128,7 @@ text: false }) .removeClass( "ui-corner-all" ) - .addClass( "ui-corner-right ui-button-icon" ) + .addClass( "ui-corner-right ui-combobox-toggle" ) .click(function() { // close if already visible if ( input.autocomplete( "widget" ).is( ":visible" ) ) { diff --git a/demos/button/default.html b/demos/button/default.html index 60d2674c0..90369f816 100644 --- a/demos/button/default.html +++ b/demos/button/default.html @@ -11,7 +11,7 @@ <link rel="stylesheet" href="../demos.css"> <script> $(function() { - $( "input:submit, a, button", ".demo" ).button(); + $( "input[type=submit], a, button", ".demo" ).button(); $( "a", ".demo" ).click(function() { return false; }); }); </script> @@ -22,7 +22,7 @@ <button>A button element</button> -<input type="submit" value="A submit button"/> +<input type="submit" value="A submit button"> <a href="#">An anchor</a> diff --git a/demos/position/default.html b/demos/position/default.html index 01137be62..35004b993 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -55,7 +55,7 @@ $( ".positionable" ).css( "opacity", 0.5 ); - $( ":input" ).bind( "click keyup change", position ); + $( "select, input" ).bind( "click keyup change", position ); $( "#parent" ).draggable({ drag: position diff --git a/demos/progressbar/animated.html b/demos/progressbar/animated.html index c8f5ff551..6134a8ca7 100644 --- a/demos/progressbar/animated.html +++ b/demos/progressbar/animated.html @@ -10,7 +10,7 @@ <script src="../../ui/jquery.ui.progressbar.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - .ui-progressbar-value { background-image: url(images/pbar-ani.gif); } + .ui-progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif); } </style> <script> $(function() { diff --git a/demos/spinner/default.html b/demos/spinner/default.html index 03ae2ad7d..1827724b9 100644 --- a/demos/spinner/default.html +++ b/demos/spinner/default.html @@ -14,16 +14,20 @@ <script> $(function() { var spinner = $( "#spinner" ).spinner(); - - $( "#disable" ).toggle(function() { - spinner.spinner( "disable" ); - }, function() { - spinner.spinner( "enable" ); + + $( "#disable" ).click(function() { + if ( spinner.spinner( "option", "disabled" ) ) { + spinner.spinner( "enable" ); + } else { + spinner.spinner( "disable" ); + } }); - $( "#destroy" ).toggle(function() { - spinner.spinner( "destroy" ); - }, function() { - spinner.spinner(); + $( "#destroy" ).click(function() { + if ( spinner.data( "ui-spinner" ) ) { + spinner.spinner( "destroy" ); + } else { + spinner.spinner(); + } }); $( "#getvalue" ).click(function() { alert( spinner.spinner( "value" ) ); diff --git a/demos/tabs/manipulation.html b/demos/tabs/manipulation.html index 205fc2e4d..085d42c43 100644 --- a/demos/tabs/manipulation.html +++ b/demos/tabs/manipulation.html @@ -76,8 +76,8 @@ // close icon: removing the tab on click $( "#tabs span.ui-icon-close" ).live( "click", function() { - $( this ).closest( "li" ).remove(); - $( "#" + $( this ).prev().attr( "aria-controls" ) ).remove(); + var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" ); + $( "#" + panelId ).remove(); tabs.tabs( "refresh" ); }); }); diff --git a/demos/toggle/default.html b/demos/toggle/default.html index 469674b70..5dcd5eff8 100644 --- a/demos/toggle/default.html +++ b/demos/toggle/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -19,18 +19,33 @@ <script src="../../ui/jquery.effects.slide.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - .toggler { width: 500px; height: 200px; } - #button { padding: .5em 1em; text-decoration: none; } - #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } - #effect h3 { margin: 0; padding: 0.4em; text-align: center; } + .toggler { + width: 500px; + height: 200px; + } + #button { + padding: .5em 1em; + text-decoration: none; + } + #effect { + position: relative; + width: 240px; + height: 135px; + padding: 0.4em; + } + #effect h3 { + margin: 0; + padding: 0.4em; + text-align: center; + } </style> <script> $(function() { // run the currently selected effect function runEffect() { - // get effect type from + // get effect type from var selectedEffect = $( "#effectTypes" ).val(); - + // most effect types need no options passed by default var options = {}; // some effects have required parameters @@ -39,11 +54,11 @@ } else if ( selectedEffect === "size" ) { options = { to: { width: 200, height: 60 } }; } - + // run the effect $( "#effect" ).toggle( selectedEffect, options, 500 ); }; - + // set effect from select menu value $( "#button" ).click(function() { runEffect(); diff --git a/demos/widget/default.html b/demos/widget/default.html index ece81218a..f39825034 100644 --- a/demos/widget/default.html +++ b/demos/widget/default.html @@ -139,11 +139,14 @@ }); // click to toggle enabled/disabled - $( "#disable" ).toggle(function() { + $( "#disable" ).click(function() { // use the custom selector created for each widget to find all instances - $( ":custom-colorize" ).colorize( "disable" ); - }, function() { - $( ":custom-colorize" ).colorize( "enable" ); + // all instances are toggled together, so we can check the state from the first + if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) { + $( ":custom-colorize" ).colorize( "enable" ); + } else { + $( ":custom-colorize" ).colorize( "disable" ); + } }); // click to set options after initalization @@ -289,7 +289,7 @@ grunt.initConfig({ lint: { ui: grunt.file.expandFiles( "ui/*.js" ).filter(function( file ) { // TODO remove items from this list once rewritten - return !( /(effects.core|mouse|datepicker|draggable|droppable|resizable|selectable|sortable)\.js$/ ).test( file ); + return !( /(mouse|datepicker|draggable|droppable|resizable|selectable|sortable)\.js$/ ).test( file ); }), grunt: "grunt.js", tests: "tests/unit/**/*.js" @@ -376,7 +376,7 @@ grunt.registerTask( "testswarm", function( commit, configFile ) { testswarm({ url: "http://swarm.jquery.org/", pollInterval: 10000, - timeout: 1000 * 60 * 20, + timeout: 1000 * 60 * 30, done: this.async() }, { authUsername: "jqueryui", @@ -572,6 +572,30 @@ grunt.registerTask( "clean", function() { require( "rimraf" ).sync( "dist" ); }); +grunt.registerTask( "authors", function() { + var done = this.async(); + + grunt.utils.spawn({ + cmd: "git", + args: [ "log", "--pretty=%an <%ae>" ] + }, function( err, result ) { + if ( err ) { + grunt.log.error( err ); + return done( false ); + } + + var authors, + tracked = {}; + authors = result.split( "\n" ).reverse().filter(function( author ) { + var first = !tracked[ author ]; + tracked[ author ] = true; + return first; + }).join( "\n" ); + grunt.log.writeln( authors ); + done(); + }); +}); + grunt.registerTask( "default", "lint csslint htmllint qunit" ); grunt.registerTask( "sizer", "concat:ui min:dist/jquery-ui.min.js compare_size:all" ); grunt.registerTask( "sizer_all", "concat:ui min compare_size" ); diff --git a/tests/index.css b/tests/index.css new file mode 100644 index 000000000..2034cfba5 --- /dev/null +++ b/tests/index.css @@ -0,0 +1,21 @@ +body { + font-size: 62.5%; +} +.ui-widget-header { + padding: 0.2em 0.5em; + margin: 0; +} +.ui-widget-content { + padding: 1em; + margin-bottom: 1em; +} +p { + margin: 0; +} +ul { + margin: 0; + list-style: none; +} +li { + line-height: 2em; +} diff --git a/tests/index.html b/tests/index.html index 3c66bf38f..d5e364ad6 100644 --- a/tests/index.html +++ b/tests/index.html @@ -1,22 +1,33 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tests</title> - <link rel="stylesheet" href="../themes/base/jquery.ui.all.css" type="text/css" /> - <script type="text/javascript" src="../jquery-1.7.2.js"></script> - <link rel="stylesheet" href="tests.css" type="text/css" /> - <script type="text/javascript" src="tests.js"></script> + <link rel="stylesheet" href="../../themes/base/jquery.ui.core.css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css"> + <link rel="stylesheet" href="index.css"> + <script src="jquery-1.7.2.js"></script> + <script src="index.js"></script> </head> <body> -<h1>jQuery UI Tests</h1> +<div id="main"> + <h1>jQuery UI Tests</h1> + <div> + <h2>Unit Tests</h2> + <p><a href="unit/index.html">Unit tests</a> exist for all functionality in jQuery UI. + The unit tests can be run locally (some tests require a web server with PHP) + to ensure proper functionality before committing changes. + The unit tests are also run on <a href="http://swarm.jquery.com/user/jqueryui">TestSwarm</a> + for every commit.</p> -<h2><a href="static/index.html">Static Tests</a></h2> - -<h2><a href="unit/index.html">Unit Tests</a></h2> - -<h2><a href="visual/index.html">Visual Tests</a></h2> + <h2>Visual Tests</h2> + <p><a href="visual/index.html">Visual tests</a> only exist in cases where we can't verify proper functionality + with unit tests. These may be either purely visual or just hard to automate. + Most visual tests will provide a description of what is happening on the page + and what to look for.</p> + </div> +</div> </body> </html> diff --git a/tests/index.js b/tests/index.js new file mode 100644 index 000000000..26c07498f --- /dev/null +++ b/tests/index.js @@ -0,0 +1,10 @@ +$(function() { + +$( "#main" ) + .addClass( "ui-widget" ) + .find( "h1, h2" ) + .addClass( "ui-widget-header ui-corner-top" ) + .next() + .addClass( "ui-widget-content ui-corner-bottom" ); + +}); diff --git a/tests/static/button/default.html b/tests/static/button/default.html deleted file mode 100644 index 3322a7b00..000000000 --- a/tests/static/button/default.html +++ /dev/null @@ -1,161 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Button Static Test : Default</title> - <link rel="stylesheet" href="../static.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../static.js"></script> - <style> - div { margin: 0 0 1em; } - h2 { margin: 2em 0 1em; } - </style> -</head> -<body> - - <h2>Using button elements</h2> - - <div> - <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-text">Button</span> - </button> - - <button class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Primary icon</span> - </button> - - <button class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button"> - <span class="ui-button-text">Secondary icon</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </button> - - <button class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Primary icon</span> - </button> - - <button class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-text">Secondary icon</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </button> - - <button class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Both icons</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </button> - - <button class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">No text</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </button> - </div> - - <h2>Using anchor elements</h2> - - <div> - <a href="#" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-text">Button</span> - </a> - - <a href="#" class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Primary icon</span> - </a> - - <a href="#" class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button"> - <span class="ui-button-text">Secondary icon</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </a> - - <a href="#" class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Primary icon</span> - </a> - - <a href="#" class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-text">Secondary icon</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </a> - - <a href="#" class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Both icons</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </a> - - <a href="#" class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">No text</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </a> - </div> - - - - <h2>Using label elements (used when proxying to radio or check inputs)</h2> - - <div> - <label class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-text">Button</span> - </label> - - <label class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Primary icon</span> - </label> - - <label class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button"> - <span class="ui-button-text">Secondary icon</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </label> - - <label class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Primary icon</span> - </label> - - <label class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-text">Secondary icon</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </label> - - <label class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Both icons</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </label> - - <label class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">No text</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </label> - </div> - - - <h2>Button Sets</h2> - - <div class="ui-buttonset"> - <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-left"><span class="ui-button-text">First</span></button> - <button class="ui-button ui-button-text-only ui-widget ui-state-default"><span class="ui-button-text">Middle</span></button> - <button class="ui-button ui-button-text-only ui-widget ui-state-default"><span class="ui-button-text">Middle</span></button> - <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-right"><span class="ui-button-text">Last</span></button> - </div> - - - -<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> -<script> - $('<div/>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); -</script> -</body> -</html> diff --git a/tests/static/datepicker/datepicker.html b/tests/static/datepicker/datepicker.html deleted file mode 100644 index 857677cfd..000000000 --- a/tests/static/datepicker/datepicker.html +++ /dev/null @@ -1,1367 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>jQuery UI Datepicker Static Markup Test Page</title> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../static.js"></script> - <style type="text/css"> - .ui-datepicker { float:left; margin: 0 2em 2em 0;} - .ui-datepicker-multi { clear:left; } - </style> - <!--[if gte IE 7]> - <style type="text/css"> - .ui-datepicker { float:none; } - </style> - <![endif]--> -</head> -<body style="font-size: 62.5%;"> - -<!-- Datepicker with read only month/year --> -<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> - <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> - <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">December</span> - <span class="ui-datepicker-year">2008</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - </tr> - </tbody> - </table> -</div> - -<!-- Datepicker with 1 combined select --> -<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> - <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> - <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> - <div class="ui-datepicker-title"> - <select class="ui-datepicker-month-year"> - <optgroup label="2007"> - <option value="2007_0">January 2007</option> - <option value="2007_1">February 2007</option> - <option value="2007_2">March 2007</option> - <option value="2007_3">April 2007</option> - <option value="2007_4">May 2007</option> - <option value="2007_5">June 2007</option> - <option value="2007_6">July 2007</option> - <option value="2007_7">August 2007</option> - <option value="2007_8">September 2007</option> - <option value="2007_9">October 2007</option> - <option value="2007_10">November 2007</option> - <option value="2007_11">December 2007</option> - </optgroup> - <optgroup label="2008"> - <option value="2008_0">January 2008</option> - <option value="2008_1">February 2008</option> - <option value="2008_2">March 2008</option> - <option value="2008_3">April 2008</option> - <option value="2008_4">May 2008</option> - <option value="2008_5">June 2008</option> - <option value="2008_6">July 2008</option> - <option value="2008_7">August 2008</option> - <option value="2008_8">September 2008</option> - <option value="2008_9">October 2008</option> - <option value="2008_10">November 2008</option> - <option selected="selected" value="2008_11">December 2008</option> - </optgroup> - <optgroup label="2009"> - <option value="2009_0">January 2009</option> - <option value="2009_1">February 2009</option> - <option value="2009_2">March 2009</option> - <option value="2009_3">April 2009</option> - <option value="2009_4">May 2009</option> - <option value="2009_5">June 2009</option> - <option value="2009_6">July 2009</option> - <option value="2009_7">August 2009</option> - <option value="2009_8">September 2009</option> - <option value="2009_9">October 2009</option> - <option value="2009_10">November 2009</option> - <option value="2009_11">December 2009</option> - </optgroup> - <optgroup label="2010"> - <option value="2010_0">January 2010</option> - <option value="2010_1">February 2010</option> - <option value="2010_2">March 2010</option> - <option value="2010_3">April 2010</option> - <option value="2010_4">May 2010</option> - <option value="2010_5">June 2010</option> - <option value="2010_6">July 2010</option> - <option value="2010_7">August 2010</option> - <option value="2010_8">September 2010</option> - <option value="2010_9">October 2010</option> - <option value="2010_10">November 2010</option> - <option value="2010_11">December 2010</option> - </optgroup> - </select> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - </tr> - </tbody> - </table> -</div> - -<!-- Datepicker with 2 selects --> -<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> - <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> - <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> - <div class="ui-datepicker-title"> - <select class="ui-datepicker-month"> - <option value="0">Jan</option> - <option value="1">Feb</option> - <option value="2">Mar</option> - <option value="3">Apr</option> - <option value="4">May</option> - <option value="5">Jun</option> - <option value="6">Jul</option> - <option value="7">Aug</option> - <option value="8">Sep</option> - <option value="9">Oct</option> - <option value="10">Nov</option> - <option value="11" selected="selected">Dec</option> - </select> - <select class="ui-datepicker-year"> - <option value="1998">1998</option> - <option value="1999">1999</option> - <option value="2000">2000</option> - <option value="2001">2001</option> - <option value="2002">2002</option> - <option value="2003">2003</option> - <option value="2004">2004</option> - <option value="2005">2005</option> - <option value="2006">2006</option> - <option value="2007">2007</option> - <option value="2008" selected="selected">2008</option> - <option value="2009">2009</option> - <option value="2010">2010</option> - <option value="2011">2011</option> - <option value="2012">2012</option> - <option value="2013">2013</option> - <option value="2014">2014</option> - <option value="2015">2015</option> - <option value="2016">2016</option> - <option value="2017">2017</option> - <option value="2018">2018</option> - </select> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - </tr> - </tbody> - </table> -</div> - -<!-- Datepicker with button bar --> -<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> - <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> - <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> - <div class="ui-datepicker-title"> - <select class="ui-datepicker-month"> - <option value="0">Jan</option> - <option value="1">Feb</option> - <option value="2">Mar</option> - <option value="3">Apr</option> - <option value="4">May</option> - <option value="5">Jun</option> - <option value="6">Jul</option> - <option value="7">Aug</option> - <option value="8">Sep</option> - <option value="9">Oct</option> - <option value="10">Nov</option> - <option value="11" selected="selected">Dec</option> - </select> - <select class="ui-datepicker-year"> - <option value="1998">1998</option> - <option value="1999">1999</option> - <option value="2000">2000</option> - <option value="2001">2001</option> - <option value="2002">2002</option> - <option value="2003">2003</option> - <option value="2004">2004</option> - <option value="2005">2005</option> - <option value="2006">2006</option> - <option value="2007">2007</option> - <option value="2008" selected="selected">2008</option> - <option value="2009">2009</option> - <option value="2010">2010</option> - <option value="2011">2011</option> - <option value="2012">2012</option> - <option value="2013">2013</option> - <option value="2014">2014</option> - <option value="2015">2015</option> - <option value="2016">2016</option> - <option value="2017">2017</option> - <option value="2018">2018</option> - </select> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - </tr> - </tbody> - </table> - <div class="ui-datepicker-buttonpane ui-widget-content"> - <button class="ui-state-default ui-priority-primary ui-corner-all">Done</button> - <button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button> - </div> -</div> - -<!-- Multiple Datepickers with read only month/year --> -<div class="ui-datepicker ui-datepicker-multi ui-datepicker-multi-2 ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="width:34em;"> - <div class="ui-datepicker-group ui-datepicker-group-first"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left"> - <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">December</span> - <span class="ui-datepicker-year">2008</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td></tr> - </tbody> - </table> - </div> - <div class="ui-datepicker-group ui-datepicker-group-last"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right"> - <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">January</span> - <span class="ui-datepicker-year">2009</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td></tr> - </tbody> - </table> - </div> -</div> - -<!-- Multiple Datepickers with read only month/year --> -<div class="ui-datepicker ui-datepicker-multi ui-datepicker-multi-3 ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="width:51em;"> - <div class="ui-datepicker-group ui-datepicker-group-first"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left"> - <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">December</span> - <span class="ui-datepicker-year">2008</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td></tr> - </tbody> - </table> - </div> - <div class="ui-datepicker-group ui-datepicker-group-middle"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix"> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">January</span> - <span class="ui-datepicker-year">2009</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td></tr> - </tbody> - </table> - </div> - <div class="ui-datepicker-group ui-datepicker-group-last"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right"> - <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">February</span> - <span class="ui-datepicker-year">2009</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td></tr> - </tbody> - </table> - </div> - <div class="ui-datepicker-buttonpane ui-widget-content"> - <button class="ui-state-default ui-priority-primary ui-corner-all">Done</button> - <button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button> - </div> -</div> - -<!-- Multiple Datepickers with read only month/year --> -<div class="ui-datepicker ui-datepicker-multi ui-datepicker-multi-4 ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="width:60em;"> - <div class="ui-datepicker-group ui-datepicker-group-first"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left"> - <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">December</span> - <span class="ui-datepicker-year">2008</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td></tr> - </tbody> - </table> - </div> - <div class="ui-datepicker-group ui-datepicker-group-middle"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix"> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">January</span> - <span class="ui-datepicker-year">2009</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">1</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class=""><a href="#" class="ui-state-default">6</a></td> - <td class=""><a href="#" class="ui-state-default">7</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">8</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class=""><a href="#" class="ui-state-default">13</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">14</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">15</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class=""><a href="#" class="ui-state-default">19</a></td> - <td class=""><a href="#" class="ui-state-default">20</a></td> - <td class=""><a href="#" class="ui-state-default">21</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">22</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class=""><a href="#" class="ui-state-default">27</a></td> - <td class=""><a href="#" class="ui-state-default">28</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">29</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - </tr> - </tbody> - </table> - </div> - <div class="ui-datepicker-group ui-datepicker-group-middle"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix"> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">February</span> - <span class="ui-datepicker-year">2009</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td></tr> - </tbody> - </table> - </div> - <div class="ui-datepicker-group ui-datepicker-group-last"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right"> - <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">March</span> - <span class="ui-datepicker-year">2009</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td></tr> - </tbody> - </table> - </div> - - <div class="ui-datepicker-row-break"></div> - <div class="ui-datepicker-group ui-datepicker-group-first"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix"> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">April</span> - <span class="ui-datepicker-year">2009</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td></tr> - </tbody> - </table> - </div> - <div class="ui-datepicker-group ui-datepicker-group-middle"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix"> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">May</span> - <span class="ui-datepicker-year">2009</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td></tr> - </tbody> - </table> - </div> - <div class="ui-datepicker-group ui-datepicker-group-middle"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix"> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">June</span> - <span class="ui-datepicker-year">2009</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td></tr> - </tbody> - </table> - </div> - <div class="ui-datepicker-group ui-datepicker-group-last"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right"> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">July</span> - <span class="ui-datepicker-year">2009</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">1</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class=""><a href="#" class="ui-state-default">6</a></td> - <td class=""><a href="#" class="ui-state-default">7</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">8</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class=""><a href="#" class="ui-state-default">13</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">14</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">15</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class=""><a href="#" class="ui-state-default">19</a></td> - <td class=""><a href="#" class="ui-state-default">20</a></td> - <td class=""><a href="#" class="ui-state-default">21</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">22</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class=""><a href="#" class="ui-state-default">27</a></td> - <td class=""><a href="#" class="ui-state-default">28</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">29</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"></td> - </tr> - </tbody> - </table> - </div> -</div> - -</body> -</html> diff --git a/tests/static/datepicker/default.html b/tests/static/datepicker/default.html deleted file mode 100644 index 5baebaf4c..000000000 --- a/tests/static/datepicker/default.html +++ /dev/null @@ -1,86 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Datepicker Static Test : Default</title> - <link rel="stylesheet" href="../static.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../static.js"></script> -</head> -<body> - -<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> - <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> - <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">December</span> - <span class="ui-datepicker-year">2008</span> - </div> - </div> - <table class="ui-datepicker-calendar"> - <thead> - <tr> - <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> - <th><span title="Monday">Mo</span></th> - <th><span title="Tuesday">Tu</span></th> - <th><span title="Wednesday">We</span></th> - <th><span title="Thursday">Th</span></th> - <th><span title="Friday">Fr</span></th> - <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class=""><a href="#" class="ui-state-default">1</a></td> - <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> - <td class=""><a href="#" class="ui-state-default">3</a></td> - <td class=""><a href="#" class="ui-state-default">4</a></td> - <td class=""><a href="#" class="ui-state-default">5</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> - <td class=""><a href="#" class="ui-state-default">8</a></td> - <td class=""><a href="#" class="ui-state-default">9</a></td> - <td class=""><a href="#" class="ui-state-default">10</a></td> - <td class=""><a href="#" class="ui-state-default">11</a></td> - <td class=""><a href="#" class="ui-state-default">12</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> - <td class=""><a href="#" class="ui-state-default">15</a></td> - <td class=""><a href="#" class="ui-state-default">16</a></td> - <td class=""><a href="#" class="ui-state-default">17</a></td> - <td class=""><a href="#" class="ui-state-default">18</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> - <td class=""><a href="#" class="ui-state-default">22</a></td> - <td class=""><a href="#" class="ui-state-default">23</a></td> - <td class=""><a href="#" class="ui-state-default">24</a></td> - <td class=""><a href="#" class="ui-state-default">25</a></td> - <td class=""><a href="#" class="ui-state-default">26</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> - <td class=""><a href="#" class="ui-state-default">29</a></td> - <td class=""><a href="#" class="ui-state-default">30</a></td> - <td class=""><a href="#" class="ui-state-default">31</a></td> - <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> - </td></tr> - </tbody> - </table> -</div> - -</body> -</html> diff --git a/tests/static/icons.html b/tests/static/icons.html deleted file mode 100644 index d3ae3e348..000000000 --- a/tests/static/icons.html +++ /dev/null @@ -1,314 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>jQuery UI CSS Framework Icons Test Page</title> - <link rel="stylesheet" href="../../themes/base/jquery.ui.base.css" type="text/css" /> - <link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../jquery-1.7.2.js"></script> - - <style type="text/css"> - body {font-size: 62.5%; margin: 20px; font-family: Verdana, sans-serif; color: #444;} - h1 {font-size: 1.5em; margin: 1em 0;} - h2 {font-size: 1.3em; margin: 2em 0 .5em;} - h2 a {font-size: .8em;} - p {font-size: 1.2em; } - ul {margin: 0; padding: 0;} - td div {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} - span.ui-icon { float: left; margin: 0 4px;} - .icon-collection { border-spacing: 0; border-collapse: collapse; } - </style> - - <script type="text/javascript"> - $(function(){ - $('.ui-state-default').hover( - function(){ $(this).addClass('ui-state-hover'); }, - function(){ $(this).removeClass('ui-state-hover'); } - ); - - $('.ui-state-default').click(function(){ - $(this).toggleClass('ui-state-active'); - }); - - }); - </script> -</head> -<body> - -<p class="icons"></p> - -<table class="ui-widget icon-collection"> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></div></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></div></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></div></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></div></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></div></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></div></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> -</table> - -</body> -</html> diff --git a/tests/static/static.css b/tests/static/static.css deleted file mode 100644 index 60f25b59a..000000000 --- a/tests/static/static.css +++ /dev/null @@ -1 +0,0 @@ -body { font-size: 62.5%; } diff --git a/tests/static/static.js b/tests/static/static.js deleted file mode 100644 index 1c29079ef..000000000 --- a/tests/static/static.js +++ /dev/null @@ -1,9 +0,0 @@ -/* static_helpers.js - */ -$(function(){ - //add hover states on the static widgets - $('.ui-state-default:not(.ui-state-disabled, .ui-slider-range, .ui-progressbar-value), a.ui-datepicker-next, a.ui-datepicker-prev, .ui-dialog-titlebar-close').hover( - function(){ $(this).addClass('ui-state-hover'); }, - function(){ $(this).removeClass('ui-state-hover'); } - ); -}); diff --git a/tests/unit/autocomplete/autocomplete_common.js b/tests/unit/autocomplete/autocomplete_common.js index c090ce4df..e1d24ef8d 100644 --- a/tests/unit/autocomplete/autocomplete_common.js +++ b/tests/unit/autocomplete/autocomplete_common.js @@ -4,6 +4,10 @@ TestHelpers.commonWidgetTests( "autocomplete", { autoFocus: false, delay: 300, disabled: false, + messages: { + noResults: "No search results.", + results: $.ui.autocomplete.prototype.options.messages.results + }, minLength: 1, position: { my: "left top", diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js index daeea0972..f0ad36a57 100644 --- a/tests/unit/autocomplete/autocomplete_core.js +++ b/tests/unit/autocomplete/autocomplete_core.js @@ -152,4 +152,41 @@ asyncTest( "handle race condition", function() { } }); +test( "ARIA", function() { + expect( 7 ); + var element = $( "#autocomplete" ).autocomplete({ + source: [ "java", "javascript" ] + }), + liveRegion = element.data( "ui-autocomplete" ).liveRegion; + + equal( liveRegion.text(), "", "Empty live region on create" ); + + element.autocomplete( "search", "j" ); + equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.", + "Live region for multiple values" ); + + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.", + "Live region not changed on focus" ); + + element.one( "autocompletefocus", function( event ) { + event.preventDefault(); + }); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( liveRegion.text(), "javascript", + "Live region updated when default focus is prevented" ); + + element.autocomplete( "search", "javas" ); + equal( liveRegion.text(), "1 result is available, use up and down arrow keys to navigate.", + "Live region for one value" ); + + element.autocomplete( "search", "z" ); + equal( liveRegion.text(), "No search results.", + "Live region for no values" ); + + element.autocomplete( "search", "j" ); + equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.", + "Live region for multiple values" ); +}); + }( jQuery ) ); diff --git a/tests/unit/button/button_core.js b/tests/unit/button/button_core.js index 0d93ecedf..c274a8473 100644 --- a/tests/unit/button/button_core.js +++ b/tests/unit/button/button_core.js @@ -34,7 +34,7 @@ function assert(noForm, form1, form2) { } test("radio groups", function() { - $(":radio").button(); + $("input[type=radio]").button(); assert(":eq(0)", ":eq(1)", ":eq(2)"); // click outside of forms @@ -61,7 +61,7 @@ test("buttonset", function() { var set = $("#radio1").buttonset(); ok( set.is(".ui-buttonset") ); deepEqual( set.children(".ui-button").length, 3 ); - deepEqual( set.children("input:radio.ui-helper-hidden-accessible").length, 3 ); + deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 ); ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") ); ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") ); ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") ); @@ -76,7 +76,7 @@ test("buttonset (rtl)", function() { set = $("#radio1").buttonset(); ok( set.is(".ui-buttonset") ); deepEqual( set.children(".ui-button").length, 3 ); - deepEqual( set.children("input:radio.ui-helper-hidden-accessible").length, 3 ); + deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 ); ok( set.children("label:eq(0)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") ); ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") ); ok( set.children("label:eq(2)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") ); diff --git a/tests/unit/button/button_options.js b/tests/unit/button/button_options.js index 9ef4a19db..3dd361ac9 100644 --- a/tests/unit/button/button_options.js +++ b/tests/unit/button/button_options.js @@ -53,6 +53,7 @@ test("text false with icon", function() { test("label, default", function() { $("#button").button(); deepEqual( $("#button").text(), "Label" ); + deepEqual( $( "#button").button( "option", "label" ), "Label" ); $("#button").button("destroy"); }); @@ -62,12 +63,14 @@ test("label", function() { label: "xxx" }); deepEqual( $("#button").text(), "xxx" ); + deepEqual( $("#button").button( "option", "label" ), "xxx" ); $("#button").button("destroy"); }); test("label default with input type submit", function() { deepEqual( $("#submit").button().val(), "Label" ); + deepEqual( $("#submit").button( "option", "label" ), "Label" ); }); test("label with input type submit", function() { @@ -75,6 +78,7 @@ test("label with input type submit", function() { label: "xxx" }).val(); deepEqual( label, "xxx" ); + deepEqual( $("#submit").button( "option", "label" ), "xxx" ); }); test("icons", function() { diff --git a/tests/unit/button/button_tickets.js b/tests/unit/button/button_tickets.js index 624d16716..fe0d82fd6 100644 --- a/tests/unit/button/button_tickets.js +++ b/tests/unit/button/button_tickets.js @@ -7,7 +7,7 @@ module( "button: tickets" ); test( "#5946 - buttonset should ignore buttons that are not :visible", function() { $( "#radio01" ).next().andSelf().hide(); - var set = $( "#radio0" ).buttonset({ items: ":radio:visible" }); + var set = $( "#radio0" ).buttonset({ items: "input[type=radio]:visible" }); ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) ); ok( set.find( "label:eq(1)" ).is( ".ui-button.ui-corner-left" ) ); }); @@ -30,23 +30,23 @@ test( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard test( "#7092 - button creation that requires a matching label does not find label in all cases", function() { var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" ); - group.find( "input:checkbox" ).button(); + group.find( "input[type=checkbox]" ).button(); ok( group.find( "label" ).is( ".ui-button" ) ); group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" ); - group.filter( "input:checkbox" ).button(); + group.filter( "input[type=checkbox]" ).button(); ok( group.filter( "label" ).is( ".ui-button" ) ); group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" ); - group.find( "input:checkbox" ).button(); + group.find( "input[type=checkbox]" ).button(); ok( group.filter( "label" ).is( ".ui-button" ) ); group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" ); - group.find( "input:checkbox" ).button(); + group.find( "input[type=checkbox]" ).button(); ok( group.find( "label" ).is( ".ui-button" ) ); group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" ); - group.filter( "input:checkbox" ).button(); + group.filter( "input[type=checkbox]" ).button(); ok( group.find( "label" ).is( ".ui-button" ) ); }); diff --git a/tests/unit/draggable/draggable_common.js b/tests/unit/draggable/draggable_common.js index b47b139cd..64f8ce4a3 100644 --- a/tests/unit/draggable/draggable_common.js +++ b/tests/unit/draggable/draggable_common.js @@ -3,7 +3,7 @@ TestHelpers.commonWidgetTests( "draggable", { addClasses: true, appendTo: "parent", axis: false, - cancel: ":input,option", + cancel: "input,textarea,button,select,option", connectToSortable: false, containment: false, cursor: "auto", diff --git a/tests/unit/draggable/draggable_events.js b/tests/unit/draggable/draggable_events.js index 85ba824d8..2b2104ed4 100644 --- a/tests/unit/draggable/draggable_events.js +++ b/tests/unit/draggable/draggable_events.js @@ -5,7 +5,7 @@ module("draggable: events"); -test("callbacks occurance count", function() { +test("callbacks occurrence count", function() { expect(3); diff --git a/tests/unit/draggable/draggable_options.js b/tests/unit/draggable/draggable_options.js index 464e025dd..ea4611d69 100644 --- a/tests/unit/draggable/draggable_options.js +++ b/tests/unit/draggable/draggable_options.js @@ -106,15 +106,15 @@ test("{ axis: ? }, unexpected", function() { }); }); -test("{ cancel: ':input,option' }, default", function() { +test("{ cancel: 'input,textarea,button,select,option' }, default", function() { $('<div id="draggable-option-cancel-default"><input type="text"></div>').appendTo('#main'); - el = $("#draggable-option-cancel-default").draggable({ cancel: ":input,option" }); + el = $("#draggable-option-cancel-default").draggable({ cancel: "input,textarea,button,select,option" }); drag("#draggable-option-cancel-default", 50, 50); moved(50, 50); - el = $("#draggable-option-cancel-default").draggable({ cancel: ":input,option" }); - drag("#draggable-option-cancel-default :input", 50, 50); + el = $("#draggable-option-cancel-default").draggable({ cancel: "input,textarea,button,select,option" }); + drag("#draggable-option-cancel-default input", 50, 50); moved(0, 0); el.draggable("destroy"); diff --git a/tests/unit/index.html b/tests/unit/index.html index b73ede29c..33a326370 100644 --- a/tests/unit/index.html +++ b/tests/unit/index.html @@ -6,39 +6,9 @@ <link rel="stylesheet" href="../../themes/base/jquery.ui.core.css"> <link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css"> - <style> - body { - font-size: 62.5%; - } - .ui-widget-header { - padding: 0.2em 0.5em; - margin: 0; - } - .ui-widget-content { - padding: 1em; - margin-bottom: 1em; - } - ul { - margin: 0; - list-style: none; - } - li { - line-height: 2em; - } - </style> - - <script src="../jquery.js"></script> - <script> - $(function() { - $( "#main" ) - .addClass( "ui-widget" ) - .find( "h1, h2" ) - .addClass( "ui-widget-header ui-corner-top" ) - .next() - .addClass( "ui-widget-content ui-corner-bottom" ); - - }); - </script> + <link rel="stylesheet" href="../index.css"> + <script src="../jquery-1.7.2.js"></script> + <script src="../index.js"></script> </head> <body> diff --git a/tests/unit/menu/menu.html b/tests/unit/menu/menu.html index fca45697f..62585d863 100644 --- a/tests/unit/menu/menu.html +++ b/tests/unit/menu/menu.html @@ -63,7 +63,7 @@ <li class="foo"><a class="foo" href="#">Aberdeen</a></li> <li class="foo"><a class="foo" href="#">Ada</a></li> <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> + <li class="foo"><a class="foo" href="#"><span class="ui-icon ui-icon-print"></span>Addyston</a></li> <li> <a href="#">Delphi</a> <ul> diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/menu_common.js index ddcdbebf2..07295f1af 100644 --- a/tests/unit/menu/menu_common.js +++ b/tests/unit/menu/menu_common.js @@ -6,6 +6,7 @@ TestHelpers.commonWidgetTests( "menu", { my: "left top", at: "right top" }, + role: "menu", // callbacks blur: null, diff --git a/tests/unit/menu/menu_core.js b/tests/unit/menu/menu_core.js index f2de7ef1a..68b625687 100644 --- a/tests/unit/menu/menu_core.js +++ b/tests/unit/menu/menu_core.js @@ -26,17 +26,4 @@ test("accessibility", function () { equal( menu.attr("aria-activedescendant"), "menu1-4", "aria attribute, generated id"); }); -test("items class and role", function () { - var menu = $('#menu1').menu(); - expect(1 + 5 * $("li",menu).length); - ok( ($("li",menu).length > 0 ), "number of menu items"); - $("li",menu).each(function(item) { - ok( $(this).hasClass("ui-menu-item"), "menu item ("+ item + ") class for item"); - equal( $(this).attr("role"), "presentation", "menu item ("+ item + ") role"); - equal( $("a", this).attr("role"), "menuitem", "menu item ("+ item + ") role"); - ok( $("a",this).hasClass("ui-corner-all"), "a element class for menu item ("+ item + ") "); - equal( $("a",this).attr("tabindex"), "-1", "a element tabindex for menu item ("+ item + ") "); - }); -}); - })(jQuery); diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/menu_events.js index 4cb083240..ec3e7d3c4 100644 --- a/tests/unit/menu/menu_events.js +++ b/tests/unit/menu/menu_events.js @@ -41,49 +41,62 @@ test("handle click on custom item menu", function() { equal( $("#log").html(), "1,3,2,afterclick,1,click,", "Click order not valid."); }); -/* Commenting out these tests until a way to handle the extra focus and blur events - fired by IE is found -test( "handle blur: click", function() { - expect( 4 ); - var $menu = $( "#menu1" ).menu({ - focus: function( event, ui ) { - equal( event.originalEvent.type, "click", "focus triggered 'click'" ); - equal( event.type, "menufocus", "focus event.type is 'menufocus'" ); - - }, - blur: function( event, ui ) { - equal( event.originalEvent.type, "click", "blur triggered 'click'" ); - equal( event.type, "menublur", "blur event.type is 'menublur'" ); - } - }); - - $menu.find( "li a:first" ).trigger( "click" ); - $( "<a>", { id: "remove"} ).appendTo("body").trigger( "click" ); +asyncTest( "handle blur", function() { + expect( 1 ); + var blurHandled = false, + $menu = $( "#menu1" ).menu({ + blur: function( event, ui ) { + // Ignore duplicate blur event fired by IE + if ( !blurHandled ) { + blurHandled = true; + equal( event.type, "menublur", "blur event.type is 'menublur'" ); + } + } + }); + + click( $menu, "1" ); + setTimeout( function() { + $menu.blur(); + start(); + }, 350); +}); - $("#remove").remove(); +asyncTest( "handle blur on click", function() { + expect( 1 ); + var blurHandled = false, + $menu = $( "#menu1" ).menu({ + blur: function( event, ui ) { + // Ignore duplicate blur event fired by IE + if ( !blurHandled ) { + blurHandled = true; + equal( event.type, "menublur", "blur event.type is 'menublur'" ); + } + } + }); + + click( $menu, "1" ); + setTimeout( function() { + $( "<a>", { id: "remove"} ).appendTo("body").trigger( "click" ); + $("#remove").remove(); + start(); + }, 350); }); -test( "handle blur on custom item menu: click", function() { - expect( 4 ); - var $menu = $( "#menu5" ).menu({ +test( "handle focus of menu with active item", function() { + expect( 1 ); + var element = $( "#menu1" ).menu({ focus: function( event, ui ) { - equal( event.originalEvent.type, "click", "focus triggered 'click'" ); - equal( event.type, "menufocus", "focus event.type is 'menufocus'" ); - - }, - blur: function( event, ui ) { - equal( event.originalEvent.type, "click", "blur triggered 'click'" ); - equal( event.type, "menublur", "blur event.type is 'menublur'" ); - }, - items: "div" + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); + } }); - click($('#menu5'),"1"); - $( "<a>", { id: "remove"} ).appendTo("body").trigger( "click" ); - - $("#remove").remove(); + log( "focus", true ); + element.focus(); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.focus(); + equal( $("#log").html(), "2,2,1,0,focus,", "current active item remains active"); }); -*/ asyncTest( "handle submenu auto collapse: mouseleave", function() { expect( 4 ); @@ -208,7 +221,7 @@ test("handle keyboard navigation on menu without scroll and without submenus", f }); asyncTest("handle keyboard navigation on menu without scroll and with submenus", function() { - expect(14); + expect(16); var element = $('#menu2').menu({ select: function(event, ui) { log($(ui.item[0]).text()); @@ -290,11 +303,23 @@ asyncTest("handle keyboard navigation on menu without scroll and with submenus", equal( $("#log").html(), "4,keydown,", "Keydown ESCAPE (close submenu)"); log("keydown",true); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.SPACE } ); setTimeout( menukeyboard4, 50 ); } function menukeyboard4() { + equal( $("#log").html(), "0,keydown,", "Keydown SPACE (open submenu)"); + + log("keydown",true); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); + equal( $("#log").html(), "4,keydown,", "Keydown ESCAPE (close submenu)"); + + log("keydown",true); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + setTimeout( menukeyboard5, 50 ); + } + + function menukeyboard5() { equal( $("#log").html(), "0,keydown,", "Keydown ENTER (open submenu)"); log("keydown",true); @@ -524,4 +549,42 @@ asyncTest("handle keyboard navigation and mouse click on menu with disabled item } }); +test("handle keyboard navigation with spelling of menu items", function() { + expect( 2 ); + var element = $( "#menu2" ).menu({ + focus: function( event, ui ) { + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); + } + }); + + log( "keydown", true ); + element.one( "menufocus", function( event, ui ) { + element.simulate( "keydown", { keyCode: 65 } ); + element.simulate( "keydown", { keyCode: 68 } ); + element.simulate( "keydown", { keyCode: 68 } ); + equal( $("#log").html(), "3,1,0,keydown,", "Keydown focus Addyston by spelling the first 3 letters"); + element.simulate( "keydown", { keyCode: 68 } ); + equal( $("#log").html(), "4,3,1,0,keydown,", "Keydown focus Delphi by repeating the 'd' again"); + }); + element.focus(); +}); + +asyncTest("handle page up and page down before the menu has focus", function() { + expect( 1 ); + var element = $( "#menu1" ).menu({ + focus: function( event, ui ) { + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); + } + }); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + element.blur(); + setTimeout( function() { + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + equal( $("#log").html(), "0,0,keydown,", "Page Up and Page Down bring initial focus to first item"); + start(); + }, 500); +}); + })(jQuery); diff --git a/tests/unit/menu/menu_methods.js b/tests/unit/menu/menu_methods.js index 6ad7bc134..fc4fce4f1 100644 --- a/tests/unit/menu/menu_methods.js +++ b/tests/unit/menu/menu_methods.js @@ -42,6 +42,12 @@ test("destroy", function() { domEqual("#menu1", function() { $("#menu1").menu().menu("destroy"); }); + domEqual("#menu5", function() { + $("#menu5").menu().menu("destroy"); + }); + domEqual("#menu6", function() { + $("#menu6").menu().menu("destroy"); + }); }); diff --git a/tests/unit/menu/menu_options.js b/tests/unit/menu/menu_options.js index e651fd2d1..306f575ea 100644 --- a/tests/unit/menu/menu_options.js +++ b/tests/unit/menu/menu_options.js @@ -38,4 +38,30 @@ test( "{ disabled: false }", function() { equal( $("#log").html(), "afterclick,1,click,", "Click order not valid."); }); +test("{ role: 'menu' } ", function () { + var menu = $('#menu1').menu(); + expect(2 + 5 * $("li", menu).length); + equal( menu.attr( "role" ), "menu" ); + ok( $("li", menu).length > 0, "number of menu items"); + $("li", menu).each(function(item) { + ok( $(this).hasClass("ui-menu-item"), "menu item ("+ item + ") class for item"); + equal( $(this).attr("role"), "presentation", "menu item ("+ item + ") role"); + equal( $("a", this).attr("role"), "menuitem", "menu item ("+ item + ") role"); + ok( $("a",this).hasClass("ui-corner-all"), "a element class for menu item ("+ item + ") "); + equal( $("a",this).attr("tabindex"), "-1", "a element tabindex for menu item ("+ item + ") "); + }); +}); + +test("{ role: 'listbox' } ", function () { + var menu = $('#menu1').menu({ + role: "listbox" + }); + expect(2 + $("li", menu).length); + equal( menu.attr( "role" ), "listbox" ); + ok( ($("li", menu).length > 0 ), "number of menu items"); + $("li", menu).each(function(item) { + equal( $("a", this).attr("role"), "option", "menu item ("+ item + ") role"); + }); +}); + })(jQuery); diff --git a/tests/unit/resizable/resizable_common.js b/tests/unit/resizable/resizable_common.js index 617cdd2ad..119f5bd0e 100644 --- a/tests/unit/resizable/resizable_common.js +++ b/tests/unit/resizable/resizable_common.js @@ -6,7 +6,7 @@ TestHelpers.commonWidgetTests('resizable', { animateEasing: 'swing', aspectRatio: false, autoHide: false, - cancel: ':input,option', + cancel: 'input,textarea,button,select,option', containment: false, delay: 0, disabled: false, diff --git a/tests/unit/selectable/selectable_common.js b/tests/unit/selectable/selectable_common.js index 27714d0ae..885e79401 100644 --- a/tests/unit/selectable/selectable_common.js +++ b/tests/unit/selectable/selectable_common.js @@ -2,7 +2,7 @@ TestHelpers.commonWidgetTests('selectable', { defaults: { appendTo: 'body', autoRefresh: true, - cancel: ':input,option', + cancel: 'input,textarea,button,select,option', delay: 0, disabled: false, distance: 0, diff --git a/tests/unit/slider/slider_common.js b/tests/unit/slider/slider_common.js index 8a0b347f3..ccf793549 100644 --- a/tests/unit/slider/slider_common.js +++ b/tests/unit/slider/slider_common.js @@ -1,7 +1,7 @@ TestHelpers.commonWidgetTests( "slider", { defaults: { animate: false, - cancel: ':input,option', + cancel: 'input,textarea,button,select,option', delay: 0, disabled: false, distance: 0, diff --git a/tests/unit/sortable/sortable_common.js b/tests/unit/sortable/sortable_common.js index b5fc05a5d..ae21f7dd2 100644 --- a/tests/unit/sortable/sortable_common.js +++ b/tests/unit/sortable/sortable_common.js @@ -2,7 +2,7 @@ TestHelpers.commonWidgetTests( "sortable", { defaults: { appendTo: "parent", axis: false, - cancel: ":input,option", + cancel: "input,textarea,button,select,option", connectWith: false, containment: false, cursor: "auto", diff --git a/tests/unit/sortable/sortable_options.js b/tests/unit/sortable/sortable_options.js index 507d5dcfa..a043e68fe 100644 --- a/tests/unit/sortable/sortable_options.js +++ b/tests/unit/sortable/sortable_options.js @@ -29,7 +29,7 @@ test("{ axis: ? }, unexpected", function() { ok(false, "missing test - untested code is broken code."); }); -test("{ cancel: ':input,button' }, default", function() { +test("{ cancel: 'input,textarea,button,select,option' }, default", function() { ok(false, "missing test - untested code is broken code."); }); diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html index b961c60f3..b9fa507d8 100644 --- a/tests/unit/tabs/tabs.html +++ b/tests/unit/tabs/tabs.html @@ -57,7 +57,7 @@ <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><a href="data/test.html" aria-controls="custom-id"><span>4</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> diff --git a/tests/unit/tabs/tabs_common.js b/tests/unit/tabs/tabs_common.js index 7ffb05da4..b98ff3575 100644 --- a/tests/unit/tabs/tabs_common.js +++ b/tests/unit/tabs/tabs_common.js @@ -4,7 +4,8 @@ TestHelpers.commonWidgetTests( "tabs", { collapsible: false, disabled: false, event: "click", - fx: null, + hide: null, + show: null, // callbacks activate: null, diff --git a/tests/unit/tabs/tabs_common_deprecated.js b/tests/unit/tabs/tabs_common_deprecated.js index fdcff21b3..718ae8272 100644 --- a/tests/unit/tabs/tabs_common_deprecated.js +++ b/tests/unit/tabs/tabs_common_deprecated.js @@ -7,9 +7,11 @@ TestHelpers.commonWidgetTests( "tabs", { cookie: null, disabled: false, event: "click", + hide: null, fx: null, idPrefix: "ui-tabs-", panelTemplate: "<div></div>", + // show: null, // conflicts with old show callback spinner: "<em>Loading…</em>", tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>", diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/tabs_core.js index b9bd81987..fb3c306e6 100644 --- a/tests/unit/tabs/tabs_core.js +++ b/tests/unit/tabs/tabs_core.js @@ -47,14 +47,15 @@ test( "disconnected from DOM", function() { test( "aria-controls", function() { expect( 7 ); var element = $( "#tabs1" ).tabs(), - tabs = element.find( ".ui-tabs-nav a" ); + tabs = element.find( ".ui-tabs-nav li" ); tabs.each(function() { - var tab = $( this ); - equal( tab.prop( "hash" ).substring( 1 ), tab.attr( "aria-controls" ) ); + var tab = $( this ), + anchor = tab.find( ".ui-tabs-anchor" ); + equal( anchor.prop( "hash" ).substring( 1 ), tab.attr( "aria-controls" ) ); }); element = $( "#tabs2" ).tabs(); - tabs = element.find( ".ui-tabs-nav a" ); + tabs = element.find( ".ui-tabs-nav li" ); equal( tabs.eq( 0 ).attr( "aria-controls" ), "colon:test" ); equal( tabs.eq( 1 ).attr( "aria-controls" ), "inline-style" ); ok( /^ui-tabs-\d+$/.test( tabs.eq( 2 ).attr( "aria-controls" ) ), "generated id" ); @@ -86,11 +87,11 @@ test( "#4033 - IE expands hash to full url and misinterprets tab as ajax", funct element.tabs({ beforeLoad: function( event, ui ) { event.preventDefault(); - ok( false, 'should not be an ajax tab'); + ok( false, "should not be an ajax tab" ); } }); - equal( element.find( ".ui-tabs-nav a" ).attr( "aria-controls" ), "tab", "aria-contorls attribute is correct" ); + equal( element.find( ".ui-tabs-nav li" ).attr( "aria-controls" ), "tab", "aria-contorls attribute is correct" ); state( element, 1 ); }); diff --git a/tests/unit/tabs/tabs_deprecated.html b/tests/unit/tabs/tabs_deprecated.html index 09afc91b4..e58382efb 100644 --- a/tests/unit/tabs/tabs_deprecated.html +++ b/tests/unit/tabs/tabs_deprecated.html @@ -56,7 +56,7 @@ <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><a href="data/test.html" aria-controls="custom-id"><span>4</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> diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js index 66768b866..351433348 100644 --- a/tests/unit/tabs/tabs_deprecated.js +++ b/tests/unit/tabs/tabs_deprecated.js @@ -107,11 +107,11 @@ test( "tabTemplate + panelTemplate", function() { }); element.tabs( "add", "#new", "New" ); tab = element.find( ".ui-tabs-nav li" ).last(); - anchor = tab.find( "a" ); + 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( anchor.attr( "aria-controls" ), "new", "aria-controls" ); + equal( tab.attr( "aria-controls" ), "new", "aria-controls" ); ok( element.find( "#new" ).hasClass( "customPanel" ), "panel custom class" ); }); @@ -210,7 +210,7 @@ test( "selected", function() { equal( element.tabs( "option", "selected" ), 0 ); state( element, 1, 0, 0 ); - element.find( ".ui-tabs-nav a" ).eq( 1 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).click(); equal( element.tabs( "option", "selected" ), 1 ); state( element, 0, 1, 0 ); @@ -226,17 +226,18 @@ module( "tabs (deprecated): events" ); asyncTest( "load", function() { expect( 15 ); - var tab, panelId, panel, + var tab, anchor, panelId, panel, element = $( "#tabs2" ); // init element.one( "tabsload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 2 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 2 ); + anchor = tab.find( ".ui-tabs-anchor" ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); ok( !( "originalEvent" in event ), "originalEvent" ); - strictEqual( ui.tab, tab[ 0 ], "tab" ); + strictEqual( ui.tab, anchor[ 0 ], "tab" ); strictEqual( ui.panel, panel[ 0 ], "panel" ); equal( $( ui.panel ).find( "p" ).length, 1, "panel html" ); state( element, 0, 0, 1, 0, 0 ); @@ -247,12 +248,13 @@ asyncTest( "load", function() { function tabsload1() { // .option() element.one( "tabsload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 3 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 3 ); + anchor = tab.find( ".ui-tabs-anchor" ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); ok( !( "originalEvent" in event ), "originalEvent" ); - strictEqual( ui.tab, tab[ 0 ], "tab" ); + strictEqual( ui.tab, anchor[ 0 ], "tab" ); strictEqual( ui.panel, panel[ 0 ], "panel" ); equal( $( ui.panel ).find( "p" ).length, 1, "panel html" ); state( element, 0, 0, 0, 1, 0 ); @@ -264,18 +266,19 @@ asyncTest( "load", function() { function tabsload2() { // click, change panel content element.one( "tabsload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 4 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 4 ); + anchor = tab.find( ".ui-tabs-anchor" ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); equal( event.originalEvent.type, "click", "originalEvent" ); - strictEqual( ui.tab, tab[ 0 ], "tab" ); + strictEqual( ui.tab, anchor[ 0 ], "tab" ); strictEqual( ui.panel, panel[ 0 ], "panel" ); equal( $( ui.panel ).find( "p" ).length, 1, "panel html" ); state( element, 0, 0, 0, 0, 1 ); start(); }); - element.find( ".ui-tabs-nav a" ).eq( 4 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 4 ).click(); } }); @@ -285,7 +288,7 @@ test( "enable", function() { var element = $( "#tabs1" ).tabs({ disabled: [ 0, 1 ], enable: function( event, ui ) { - equal( ui.tab, element.find( ".ui-tabs-nav a" )[ 1 ], "ui.tab" ); + equal( ui.tab, element.find( ".ui-tabs-nav .ui-tabs-anchor" )[ 1 ], "ui.tab" ); equal( ui.panel, element.find( ".ui-tabs-panel" )[ 1 ], "ui.panel" ); equal( ui.index, 1, "ui.index" ); } @@ -300,7 +303,7 @@ test( "disable", function() { var element = $( "#tabs1" ).tabs({ disable: function( event, ui ) { - equal( ui.tab, element.find( ".ui-tabs-nav a" )[ 1 ], "ui.tab" ); + equal( ui.tab, element.find( ".ui-tabs-nav .ui-tabs-anchor" )[ 1 ], "ui.tab" ); equal( ui.panel, element.find( ".ui-tabs-panel" )[ 1 ], "ui.panel" ); equal( ui.index, 1, "ui.index" ); } @@ -318,13 +321,13 @@ test( "show", function() { active: false, collapsible: true }), - tabs = element.find( ".ui-tabs-nav a" ), + anchors = element.find( ".ui-tabs-nav .ui-tabs-anchor" ), panels = element.find( ".ui-tabs-panel" ); // from collapsed element.one( "tabsshow", function( event, ui ) { ok( !( "originalEvent" in event ), "originalEvent" ); - strictEqual( ui.tab, tabs[ 0 ], "ui.tab" ); + strictEqual( ui.tab, anchors[ 0 ], "ui.tab" ); strictEqual( ui.panel, panels[ 0 ], "ui.panel" ); equal( ui.index, 0, "ui.index" ); state( element, 1, 0, 0 ); @@ -335,12 +338,12 @@ test( "show", function() { // switching tabs element.one( "tabsshow", function( event, ui ) { equal( event.originalEvent.type, "click", "originalEvent" ); - strictEqual( ui.tab, tabs[ 1 ], "ui.tab" ); + strictEqual( ui.tab, anchors[ 1 ], "ui.tab" ); strictEqual( ui.panel, panels[ 1 ], "ui.panel" ); equal( ui.index, 1, "ui.index" ); state( element, 0, 1, 0 ); }); - tabs.eq( 1 ).click(); + anchors.eq( 1 ).click(); state( element, 0, 1, 0 ); // collapsing @@ -358,13 +361,13 @@ test( "select", function() { active: false, collapsible: true }), - tabs = element.find( ".ui-tabs-nav a" ), + anchors = element.find( ".ui-tabs-nav .ui-tabs-anchor" ), panels = element.find( ".ui-tabs-panel" ); // from collapsed element.one( "tabsselect", function( event, ui ) { ok( !( "originalEvent" in event ), "originalEvent" ); - strictEqual( ui.tab, tabs[ 0 ], "ui.tab" ); + strictEqual( ui.tab, anchors[ 0 ], "ui.tab" ); strictEqual( ui.panel, panels[ 0 ], "ui.panel" ); equal( ui.index, 0, "ui.index" ); state( element, 0, 0, 0 ); @@ -375,12 +378,12 @@ test( "select", function() { // switching tabs element.one( "tabsselect", function( event, ui ) { equal( event.originalEvent.type, "click", "originalEvent" ); - strictEqual( ui.tab, tabs[ 1 ], "ui.tab" ); + strictEqual( ui.tab, anchors[ 1 ], "ui.tab" ); strictEqual( ui.panel, panels[ 1 ], "ui.panel" ); equal( ui.index, 1, "ui.index" ); state( element, 1, 0, 0 ); }); - tabs.eq( 1 ).click(); + anchors.eq( 1 ).click(); state( element, 0, 1, 0 ); // collapsing @@ -414,11 +417,11 @@ test( "add", function() { element.tabs( "add", "#new", "New" ); state( element, 1, 0, 0, 0 ); tab = element.find( ".ui-tabs-nav li" ).last(); - anchor = tab.find( "a" ); + 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( anchor.attr( "aria-controls" ), "new", "aria-controls" ); + 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" ); @@ -429,17 +432,17 @@ test( "add", function() { 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 ).attr( "aria-controls" ), "ui.panel" ); + 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( "a" ); + 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( anchor.attr( "aria-controls" ) ), "aria controls" ); + 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" ); @@ -560,10 +563,10 @@ test( "url", function() { expect( 2 ); var element = $( "#tabs2" ).tabs(), - tab = element.find( "a" ).eq( 3 ); + anchor = element.find( ".ui-tabs-anchor" ).eq( 3 ); element.tabs( "url", 3, "data/test2.html" ); - equal( tab.attr( "href" ), "data/test2.html", "href was updated" ); + equal( anchor.attr( "href" ), "data/test2.html", "href was updated" ); element.one( "tabsbeforeload", function( event, ui ) { equal( ui.ajaxSettings.url, "data/test2.html", "ajaxSettings.url" ); event.preventDefault(); @@ -582,7 +585,7 @@ asyncTest( "abort", function() { }); }); // prevent IE from caching the request, so that it won't resolve before we call abort - element.find( ".ui-tabs-nav li:eq(2) a" ).attr( "href", function( href ) { + element.find( ".ui-tabs-nav li:eq(2) .ui-tabs-anchor" ).attr( "href", function( href ) { return href + "?" + (+ new Date()); }); element.tabs( "option", "active", 2 ); diff --git a/tests/unit/tabs/tabs_events.js b/tests/unit/tabs/tabs_events.js index f33686581..57011bdad 100644 --- a/tests/unit/tabs/tabs_events.js +++ b/tests/unit/tabs/tabs_events.js @@ -8,7 +8,7 @@ test( "create", function() { expect( 10 ); var element = $( "#tabs1" ), - tabs = element.find( "ul a" ), + tabs = element.find( "ul li" ), panels = element.children( "div" ); element.tabs({ @@ -50,7 +50,8 @@ test( "beforeActivate", function() { active: false, collapsible: true }), - tabs = element.find( ".ui-tabs-nav a" ), + tabs = element.find( ".ui-tabs-nav li" ), + anchors = tabs.find( ".ui-tabs-anchor" ), panels = element.find( ".ui-tabs-panel" ); // from collapsed @@ -80,7 +81,7 @@ test( "beforeActivate", function() { strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); state( element, 1, 0, 0 ); }); - tabs.eq( 1 ).click(); + anchors.eq( 1 ).click(); state( element, 0, 1, 0 ); // collapsing @@ -120,7 +121,8 @@ test( "activate", function() { active: false, collapsible: true }), - tabs = element.find( ".ui-tabs-nav a" ), + tabs = element.find( ".ui-tabs-nav li" ), + anchors = element.find( ".ui-tabs-anchor" ), panels = element.find( ".ui-tabs-panel" ); // from collapsed @@ -150,7 +152,7 @@ test( "activate", function() { strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); state( element, 0, 1, 0 ); }); - tabs.eq( 1 ).click(); + anchors.eq( 1 ).click(); state( element, 0, 1, 0 ); // collapsing @@ -186,7 +188,7 @@ test( "beforeLoad", function() { // init element.one( "tabsbeforeload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 2 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 2 ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); @@ -208,7 +210,7 @@ test( "beforeLoad", function() { // .option() element.one( "tabsbeforeload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 2 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 2 ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); @@ -230,7 +232,7 @@ test( "beforeLoad", function() { // click, change panel content element.one( "tabsbeforeload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 3 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 3 ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); @@ -245,7 +247,7 @@ test( "beforeLoad", function() { event.preventDefault(); state( element, 0, 0, 1, 0, 0 ); }); - element.find( ".ui-tabs-nav a" ).eq( 3 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 3 ).click(); state( element, 0, 0, 0, 1, 0 ); // .toLowerCase() is needed to convert <P> to <p> in old IEs equal( panel.html().toLowerCase(), "<p>testing</p>", "panel html after" ); @@ -260,7 +262,7 @@ if ( $.uiBackCompat === false ) { // init element.one( "tabsload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 2 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 2 ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); @@ -278,7 +280,7 @@ if ( $.uiBackCompat === false ) { function tabsload1() { // .option() element.one( "tabsload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 3 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 3 ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); @@ -297,7 +299,7 @@ if ( $.uiBackCompat === false ) { function tabsload2() { // click, change panel content element.one( "tabsload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 4 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 4 ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); @@ -310,7 +312,7 @@ if ( $.uiBackCompat === false ) { state( element, 0, 0, 0, 0, 1 ); start(); }); - element.find( ".ui-tabs-nav a" ).eq( 4 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 4 ).click(); } }); } diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js index 0837995e6..ed3e73745 100644 --- a/tests/unit/tabs/tabs_methods.js +++ b/tests/unit/tabs/tabs_methods.js @@ -97,7 +97,7 @@ test( "refresh", function() { element.tabs( "refresh" ); state( element, 1, 0, 0, 0 ); disabled( element, [ 1 ] ); - equal( element.find( "#" + $( "#newTab a" ).attr( "aria-controls" ) ).length, 1, + equal( element.find( "#" + $( "#newTab" ).attr( "aria-controls" ) ).length, 1, "panel added for remote tab" ); // remove all tabs @@ -156,7 +156,7 @@ asyncTest( "load", function() { // load content of inactive tab // useful for preloading content with custom caching element.one( "tabsbeforeload", function( event, ui ) { - var tab = element.find( ".ui-tabs-nav a" ).eq( 3 ), + var tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), panelId = tab.attr( "aria-controls" ), panel = $( "#" + panelId ); @@ -171,13 +171,17 @@ asyncTest( "load", function() { // TODO: remove wrapping in 2.0 var uiTab = $( ui.tab ), uiPanel = $( ui.panel ), - tab = element.find( ".ui-tabs-nav a" ).eq( 3 ), + tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), panelId = tab.attr( "aria-controls" ), panel = $( "#" + panelId ); ok( !( "originalEvent" in event ), "originalEvent" ); equal( uiTab.length, 1, "tab length" ); - strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" ); + if ( $.uiBackCompat === false ) { + strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" ); + } else { + strictEqual( uiTab[ 0 ], tab.find( ".ui-tabs-anchor" )[ 0 ], "tab" ); + } equal( uiPanel.length, 1, "panel length" ); strictEqual( uiPanel[ 0 ], panel[ 0 ], "panel" ); equal( uiPanel.find( "p" ).length, 1, "panel html" ); @@ -203,7 +207,7 @@ asyncTest( "load", function() { function tabsload2() { // reload content of active tab element.one( "tabsbeforeload", function( event, ui ) { - var tab = element.find( ".ui-tabs-nav a" ).eq( 3 ), + var tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), panelId = tab.attr( "aria-controls" ), panel = $( "#" + panelId ); @@ -218,13 +222,17 @@ asyncTest( "load", function() { // TODO: remove wrapping in 2.0 var uiTab = $( ui.tab ), uiPanel = $( ui.panel ), - tab = element.find( ".ui-tabs-nav a" ).eq( 3 ), + tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), panelId = tab.attr( "aria-controls" ), panel = $( "#" + panelId ); ok( !( "originalEvent" in event ), "originalEvent" ); equal( uiTab.length, 1, "tab length" ); - strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" ); + if ( $.uiBackCompat === false ) { + strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" ); + } else { + strictEqual( uiTab[ 0 ], tab.find( ".ui-tabs-anchor" )[ 0 ], "tab" ); + } equal( uiPanel.length, 1, "panel length" ); strictEqual( uiPanel[ 0 ], panel[ 0 ], "panel" ); state( element, 0, 0, 0, 1, 0 ); diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js index ae9e7bdc6..df6827c57 100644 --- a/tests/unit/tabs/tabs_options.js +++ b/tests/unit/tabs/tabs_options.js @@ -57,7 +57,7 @@ test( "{ active: Number }", function() { equal( element.tabs( "option", "active" ), 0 ); state( element, 1, 0, 0 ); - element.find( ".ui-tabs-nav a" ).eq( 1 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).click(); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); @@ -110,7 +110,7 @@ test( "{ collapsible: false }", function() { equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); - element.find( ".ui-state-active a" ).eq( 1 ).click(); + element.find( ".ui-state-active .ui-tabs-anchor" ).eq( 1 ).click(); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); }); @@ -131,7 +131,7 @@ test( "{ collapsible: true }", function() { equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); - element.find( ".ui-state-active a" ).click(); + element.find( ".ui-state-active .ui-tabs-anchor" ).click(); equal( element.tabs( "option", "active" ), false ); state( element, 0, 0, 0 ); }); @@ -173,7 +173,7 @@ test( "{ event: null }", function() { state( element, 0, 1, 0 ); // ensure default click handler isn't bound - element.find( ".ui-tabs-nav a" ).eq( 2 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).click(); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); }); @@ -186,27 +186,27 @@ test( "{ event: custom }", function() { }); state( element, 1, 0, 0 ); - element.find( ".ui-tabs-nav a" ).eq( 1 ).trigger( "custom1" ); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom1" ); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); // ensure default click handler isn't bound - element.find( ".ui-tabs-nav a" ).eq( 2 ).trigger( "click" ); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "click" ); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); - element.find( ".ui-tabs-nav a" ).eq( 2 ).trigger( "custom2" ); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "custom2" ); equal( element.tabs( "option", "active" ), 2 ); state( element, 0, 0, 1 ); element.tabs( "option", "event", "custom3" ); // ensure old event handlers are unbound - element.find( ".ui-tabs-nav a" ).eq( 1 ).trigger( "custom1" ); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom1" ); equal( element.tabs( "option", "active" ), 2 ); state( element, 0, 0, 1 ); - element.find( ".ui-tabs-nav a" ).eq( 1 ).trigger( "custom3" ); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom3" ); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); }); diff --git a/tests/unit/tabs/tabs_test_helpers.js b/tests/unit/tabs/tabs_test_helpers.js index 9f592c074..508043943 100644 --- a/tests/unit/tabs/tabs_test_helpers.js +++ b/tests/unit/tabs/tabs_test_helpers.js @@ -43,7 +43,7 @@ TestHelpers.tabs = { actual = tabs.find( ".ui-tabs-nav li" ).map(function() { var tab = $( this ), panel = $( $.ui.tabs.prototype._sanitizeSelector( - "#" + tab.find( "a" ).attr( "aria-controls" ) ) ), + "#" + tab.attr( "aria-controls" ) ) ), tabIsActive = tab.hasClass( "ui-state-active" ), panelIsActive = panel.css( "display" ) !== "none"; diff --git a/tests/unit/tooltip/tooltip.html b/tests/unit/tooltip/tooltip.html index d20ba8578..f6e60b367 100644 --- a/tests/unit/tooltip/tooltip.html +++ b/tests/unit/tooltip/tooltip.html @@ -41,6 +41,7 @@ <div> <a id="tooltipped1" href="#" title="anchortitle">anchor</a> <input title="inputtitle"> + <span id="multiple-describedby" aria-describedby="fixture-span" title="...">aria-describedby</span> <span id="fixture-span" title="title-text">span</span> </div> diff --git a/tests/unit/tooltip/tooltip_core.js b/tests/unit/tooltip/tooltip_core.js index e2569fb01..1c8817aa8 100644 --- a/tests/unit/tooltip/tooltip_core.js +++ b/tests/unit/tooltip/tooltip_core.js @@ -3,7 +3,7 @@ module( "tooltip: core" ); test( "markup structure", function() { - expect( 6 ); + expect( 7 ); var element = $( "#tooltipped1" ).tooltip(), tooltip = $( ".ui-tooltip" ); @@ -11,8 +11,9 @@ test( "markup structure", function() { equal( tooltip.length, 0, "no tooltip on init" ); element.tooltip( "open" ); - tooltip = $( "#" + element.attr( "aria-describedby" ) ); + tooltip = $( "#" + element.data( "ui-tooltip-id" ) ); equal( tooltip.length, 1, "tooltip exists" ); + equal( element.attr( "aria-describedby"), tooltip.attr( "id" ), "aria-describedby" ); ok( tooltip.hasClass( "ui-tooltip" ), "tooltip is .ui-tooltip" ); equal( tooltip.length, 1, ".ui-tooltip exists" ); equal( tooltip.find( ".ui-tooltip-content" ).length, 1, @@ -20,8 +21,24 @@ test( "markup structure", function() { }); test( "accessibility", function() { - // TODO: add tests - expect( 0 ); + expect( 5 ); + + var tooltipId, + tooltip, + element = $( "#multiple-describedby" ).tooltip(); + + element.tooltip( "open" ); + tooltipId = element.data( "ui-tooltip-id" ); + tooltip = $( "#" + tooltipId ); + equal( tooltip.attr( "role" ), "tooltip", "role" ); + equal( element.attr( "aria-describedby" ), "fixture-span " + tooltipId, + "multiple describedby when open" ); + // strictEqual to distinguish between .removeAttr( "title" ) and .attr( "title", "" ) + strictEqual( element.attr( "title" ), undefined, "no title when open" ); + element.tooltip( "close" ); + equal( element.attr( "aria-describedby" ), "fixture-span", + "correct describedby when closed" ); + equal( element.attr( "title" ), "...", "title restored when closed" ); }); }( jQuery ) ); diff --git a/tests/unit/tooltip/tooltip_events.js b/tests/unit/tooltip/tooltip_events.js index b1ce92fb2..fc5f1acc5 100644 --- a/tests/unit/tooltip/tooltip_events.js +++ b/tests/unit/tooltip/tooltip_events.js @@ -11,7 +11,7 @@ test( "programmatic triggers", function() { tooltip = ui.tooltip; ok( !( "originalEvent" in event ), "open" ); strictEqual( ui.tooltip[0], - $( "#" + element.attr( "aria-describedby" ) )[0], "ui.tooltip" ); + $( "#" + element.data( "ui-tooltip-id" ) )[0], "ui.tooltip" ); }); element.tooltip( "open" ); diff --git a/tests/unit/tooltip/tooltip_methods.js b/tests/unit/tooltip/tooltip_methods.js index eaab1c0d1..1b8cd2bf2 100644 --- a/tests/unit/tooltip/tooltip_methods.js +++ b/tests/unit/tooltip/tooltip_methods.js @@ -21,7 +21,7 @@ test( "open/close", function() { equal( $( ".ui-tooltip" ).length, 0, "no tooltip on init" ); element.tooltip( "open" ); - tooltip = $( "#" + element.attr( "aria-describedby" ) ); + tooltip = $( "#" + element.data( "ui-tooltip-id" ) ); ok( tooltip.is( ":visible" ) ); element.tooltip( "close" ); @@ -37,7 +37,7 @@ test( "enable/disable", function() { equal( $( ".ui-tooltip" ).length, 0, "no tooltip on init" ); element.tooltip( "open" ); - tooltip = $( "#" + element.attr( "aria-describedby" ) ); + tooltip = $( "#" + element.data( "ui-tooltip-id" ) ); ok( tooltip.is( ":visible" ) ); element.tooltip( "disable" ); @@ -51,7 +51,7 @@ test( "enable/disable", function() { equal( element.attr( "title" ), "anchortitle", "title restored on enable" ); element.tooltip( "open" ); - tooltip = $( "#" + element.attr( "aria-describedby" ) ); + tooltip = $( "#" + element.data( "ui-tooltip-id" ) ); ok( tooltip.is( ":visible" ) ); $.fx.off = false; }); diff --git a/tests/unit/tooltip/tooltip_options.js b/tests/unit/tooltip/tooltip_options.js index 4f994f8de..a4ef9f472 100644 --- a/tests/unit/tooltip/tooltip_options.js +++ b/tests/unit/tooltip/tooltip_options.js @@ -4,7 +4,7 @@ module( "tooltip: options" ); test( "content: default", function() { var element = $( "#tooltipped1" ).tooltip().tooltip( "open" ); - deepEqual( $( "#" + element.attr( "aria-describedby" ) ).text(), "anchortitle" ); + deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "anchortitle" ); }); test( "content: return string", function() { @@ -13,7 +13,7 @@ test( "content: return string", function() { return "customstring"; } }).tooltip( "open" ); - deepEqual( $( "#" + element.attr( "aria-describedby" ) ).text(), "customstring" ); + deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "customstring" ); }); test( "content: return jQuery", function() { @@ -22,7 +22,7 @@ test( "content: return jQuery", function() { return $( "<div>" ).html( "cu<b>s</b>tomstring" ); } }).tooltip( "open" ); - deepEqual( $( "#" + element.attr( "aria-describedby" ) ).text(), "customstring" ); + deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "customstring" ); }); asyncTest( "content: sync + async callback", function() { @@ -30,11 +30,11 @@ asyncTest( "content: sync + async callback", function() { var element = $( "#tooltipped1" ).tooltip({ content: function( response ) { setTimeout(function() { - deepEqual( $( "#" + element.attr("aria-describedby") ).text(), "loading..." ); + deepEqual( $( "#" + element.data("ui-tooltip-id") ).text(), "loading..." ); response( "customstring2" ); setTimeout(function() { - deepEqual( $( "#" + element.attr("aria-describedby") ).text(), "customstring2" ); + deepEqual( $( "#" + element.data("ui-tooltip-id") ).text(), "customstring2" ); start(); }, 13 ); }, 13 ); @@ -53,12 +53,12 @@ test( "items", function() { event = $.Event( "mouseenter" ); event.target = $( "#fixture-span" )[ 0 ]; element.tooltip( "open", event ); - deepEqual( $( "#" + $( "#fixture-span" ).attr( "aria-describedby" ) ).text(), "title-text" ); + deepEqual( $( "#" + $( "#fixture-span" ).data( "ui-tooltip-id" ) ).text(), "title-text" ); // make sure default [title] doesn't get used event.target = $( "#tooltipped1" )[ 0 ]; element.tooltip( "open", event ); - deepEqual( $( "#tooltipped1" ).attr( "aria-describedby" ), undefined ); + deepEqual( $( "#tooltipped1" ).data( "ui-tooltip-id" ), undefined ); element.tooltip( "destroy" ); }); @@ -68,7 +68,7 @@ test( "tooltipClass", function() { var element = $( "#tooltipped1" ).tooltip({ tooltipClass: "custom" }).tooltip( "open" ); - ok( $( "#" + element.attr( "aria-describedby" ) ).hasClass( "custom" ) ); + ok( $( "#" + element.data( "ui-tooltip-id" ) ).hasClass( "custom" ) ); }); }( jQuery ) ); diff --git a/tests/visual/accordion/accordion.html b/tests/visual/accordion/icons.html index a9cf1d129..a9cf1d129 100644 --- a/tests/visual/accordion/accordion.html +++ b/tests/visual/accordion/icons.html diff --git a/tests/visual/addClass/addClass_queue.html b/tests/visual/addClass/queue.html index 616f2c7f9..21f4cc1cb 100644 --- a/tests/visual/addClass/addClass_queue.html +++ b/tests/visual/addClass/queue.html @@ -43,7 +43,7 @@ <body> <p>WHAT: The two boxes animate from black to red to green to blue.</p> -<p>The first box should start with a delay, the second box should start immediately.</p> +<p>EXPECTED: The first box should start with a delay, the second box should start immediately.</p> <div id="box1" class="box"></div> <div id="box2" class="box"></div> diff --git a/tests/visual/button/button.html b/tests/visual/button/button.html index 7aef71f97..20bae191f 100644 --- a/tests/visual/button/button.html +++ b/tests/visual/button/button.html @@ -1,140 +1,94 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>Button Visual push: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <style type="text/css"> - #toolbar { margin-top: 2em; padding:0.2em; } - #ops1, #ops2, #format, #mode { margin-right: 1em } - </style> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../external/jquery.metadata.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>Button Visual Test</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script> $(function() { - var buttons = $('#push button, #check').button(); - var buttonSets = $('#radio0, #radio1, #radio2, #ops1, #format, #ops2, #mode, #inputs, #anchors').buttonset(); - - buttons.add(buttonSets).click(function(event) { - var target = $(event.target); - if (target.closest('.ui-button:not(.ui-state-disabled)').length) { - $("<div></div>") - .text("Clicked " + (target.text() || target.val())) - .appendTo("#log"); - window.console && console.log(this, arguments); - } + $( ".buttons" ).each(function() { + $( this ).children() + .eq( 0 ) + .button({ + text: false, + icons: { + primary: "ui-icon-help" + } + }) + .end() + .eq( 1 ) + .button({ + icons: { + primary: "ui-icon-help" + }, + disabled: true + }) + .end() + .eq( 2 ) + .button(); }); - - $("#disable-widgets").toggle(function() { - buttons.button("disable"); - buttonSets.buttonset("disable"); - }, function() { - buttons.button("enable"); - buttonSets.buttonset("enable"); - }); - $("#toggle-widgets").toggle(function() { - buttons.button(); - buttonSets.buttonset(); - }, function() { - buttons.button("destroy"); - buttonSets.buttonset("destroy"); - }).click(); }); </script> </head> <body> -<div id="push"> - <div> - No icon - <button>Simple button, only text</button> - <button class="ui-priority-secondary">Secondary priority button</button> - </div> - <br/> - <div> - With icon - <button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> - <button class="{button:{icons:{primary:'ui-icon-locked'}}}">Primary icon</button> - <button class="{button:{icons:{secondary:'ui-icon-triangle-1-s'}}}">Secondary icon</button> - <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Both icons</button> - <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons and no text</button> - </div> +<div class="buttons"> + <button>button</button> + <button>button</button> + <button>button</button> +</div> + +<div class="buttons"> + <button type="button">button button</button> + <button type="button">button button</button> + <button type="button">button button</button> </div> -<div id="toggle" style="margin-top: 2em;"> - <input type="checkbox" id="check" /><label for="check">Toggle</label> +<div class="buttons"> + <button type="submit">button submit</button> + <button type="submit">button submit</button> + <button type="submit">button submit</button> </div> -<div id="radio0" style="margin-top: 2em;"> - <input type="radio" id="radio01" name="radio" checked="checked" /><label for="radio01">Choice 1</label> - <input type="radio" id="radio02" name="radio" /><label for="radio02">Choice 2</label> - <input type="radio" id="radio03" name="radio" /><label for="radio03">Choice 3</label> +<div class="buttons"> + <input type="button" value="input button"> + <input type="button" value="input button"> + <input type="button" value="input button"> </div> -<form> - <div id="radio1" style="margin-top: 2em;"> - <input type="radio" id="radio11" name="radio" /><label for="radio11">Choice 1</label> - <input type="radio" id="radio12" name="radio" checked="checked" /><label for="radio12">Choice 2</label> - <input type="radio" id="radio13" name="radio" /><label for="radio13">Choice 3</label> - </div> -</form> -<form> - <div id="radio2" style="margin-top: 2em;"> - <input type="radio" id="radio21" name="radio" /><label for="radio21">Choice 1</label> - <input type="radio" id="radio22" name="radio" /><label for="radio22">Choice 2</label> - <input type="radio" id="radio23" name="radio" checked="checked" /><label for="radio23">Choice 3</label> - </div> -</form> -<div id="toolbar" class="ui-widget-header ui-corner-all ui-helper-clearfix"> - <span id="ops1"> - <button class="{button:{icons:{primary:'ui-icon-folder-open'},text:false}}">Open</button> - <button class="{button:{icons:{primary:'ui-icon-disk'},text:false}}">Save</button> - <button class="{button:{icons:{primary:'ui-icon-trash'},text:false}}">Delete</button> - </span> - <span id="format"> - <input type="checkbox" id="check1" /><label for="check1">B</label> - <input type="checkbox" id="check2" /><label for="check2">I</label> - <input type="checkbox" id="check3" /><label for="check3">U</label> - </span> - <span id="ops2"> - <button class="{button:{icons:{primary:'ui-icon-print'},text:false}}">Print...</button> - <button class="{button:{icons:{primary:'ui-icon-mail-closed'},text:false}}">Mail to...</button> - </span> - <span id="mode"> - <input type="radio" id="mode1" name="radio2" checked="checked" /><label for="mode1">Edit</label> - <input type="radio" id="mode2" name="radio2" /><label for="mode2">View</label> - </span> +<div class="buttons"> + <input type="submit" value="input submit"> + <input type="submit" value="input submit"> + <input type="submit" value="input submit"> </div> -<div id="inputs" style="margin-top: 2em;"> - <input type="submit" value="Submit button" /> - <input type="reset" value="Reset button" class="{button:{label:'Custom reset'}}" /> +<div class="buttons"> + <input type="checkbox" id="input-checkbox0"> + <input type="checkbox" id="input-checkbox1"> + <input type="checkbox" id="input-checkbox2"> + <label for="input-checkbox0">input checkbox</label> + <label for="input-checkbox1">input checkbox</label> + <label for="input-checkbox2">input checkbox</label> </div> -<div id="anchors" style="margin-top: 2em;"> - <a href="#">Anchor 1</a> - <a href="#" class="{button:{icons:{primary:'ui-icon-print'},text:false}}">Anchor 2</a> - <a href="#" class="{button:{icons:{primary:'ui-icon-mail-closed'},text:false}}">Anchor 3</a> - <a href="#">Anchor 4</a> +<div class="buttons"> + <input type="radio" id="input-radio0" name="radio"> + <input type="radio" id="input-radio1" name="radio"> + <input type="radio" id="input-radio2" name="radio"> + <label for="input-radio0">input radio</label> + <label for="input-radio1">input radio</label> + <label for="input-radio2">input radio</label> </div> -<div style="margin-top: 2em;"> - <button id="disable-widgets">Toggle disabled</button> - <button id="toggle-widgets">Toggle widget</button> +<div class="buttons"> + <a href="#">anchor</a> + <a href="#">anchor</a> + <a href="#">anchor</a> </div> -<div id="log"></div> -<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> -<script type="text/javascript"> - $.fn.themeswitcher && $('<div></div>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); -</script> </body> </html> diff --git a/tests/visual/button/button_disabled_true.html b/tests/visual/button/button_disabled_true.html deleted file mode 100644 index 83a3e9cd6..000000000 --- a/tests/visual/button/button_disabled_true.html +++ /dev/null @@ -1,84 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Button Visual Test : Button disabled true</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> - $(function() { - - $("#button1").button({ - disabled: true - }); - - $("#anchor1").button({ - disabled: true - }); - - $("#inputbutton1").button({ - disabled: true - }); - - $("#radio1, #radio2, #radio3").button({ - disabled: true - }); - - $("#checkbox1, #checkbox2, #checkbox3").button({ - disabled: true - }); - - }); - </script> -</head> -<body> - -<fieldset> - <legend>button</legend> - <button disabled="disabled">button</button> - <hr /> - <button id="button1">button</button> -</fieldset> - -<fieldset> - <legend>anchor</legend> - <a href="javascript:void(0)">anchor 1</a> # Attribute "disabled" not allowed on element "a" at this point. - <hr /> - <a href="javascript:void(0)" id="anchor1">anchor 1</a> -</fieldset> - -<fieldset> - <legend>input type="button"</legend> - <input type="button" disabled="disabled" value="input button 1" /> - <hr /> - <input type="button" id="inputbutton1" value="input button 1" /> -</fieldset> - -<fieldset> - <legend>input type="radio"</legend> - <input type="radio" name="radioletter" id="radioa" disabled="disabled" /><label for="radioa">radio a</label> - <input type="radio" name="radioletter" id="radiob" disabled="disabled" /><label for="radiob">radio b</label> - <input type="radio" name="radioletter" id="radioc" disabled="disabled" /><label for="radioc">radio c</label> - <hr /> - <input type="radio" name="radionumber" id="radio1" /><label for="radio1">radio 1</label> - <input type="radio" name="radionumber" id="radio2" /><label for="radio2">radio 2</label> - <input type="radio" name="radionumber" id="radio3" /><label for="radio3">radio 3</label> -</fieldset> - -<fieldset> - <legend>input type="checkbox"</legend> - <input type="checkbox" id="checkboxa" disabled="disabled" /><label for="checkboxa">checkbox a</label> - <input type="checkbox" id="checkboxb" disabled="disabled" /><label for="checkboxb">checkbox b</label> - <input type="checkbox" id="checkboxc" disabled="disabled" /><label for="checkboxc">checkbox c</label> - <hr /> - <input type="checkbox" id="checkbox1" /><label for="checkbox1">checkbox 1</label> - <input type="checkbox" id="checkbox2" /><label for="checkbox2">checkbox 2</label> - <input type="checkbox" id="checkbox3" /><label for="checkbox3">checkbox 3</label> -</fieldset> - -</body> -</html> diff --git a/tests/visual/button/button_performance.html b/tests/visual/button/button_performance.html deleted file mode 100644 index 8ff6d0320..000000000 --- a/tests/visual/button/button_performance.html +++ /dev/null @@ -1,555 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Button Visual push: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <style type="text/css"> - #toolbar { margin-top: 2em; padding:0.2em; } - #ops1, #ops2, #format, #mode { margin-right: 1em } - </style> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../external/jquery.metadata.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> - $(function() { - var start = +new Date(); - $("button").button(); - var end = +new Date(); - $("<p></p>").text( "Time to initialize: " + (end - start) + "ms" ).prependTo("body"); - }); - </script> -</head> -<body> - -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> - -</body> -</html> diff --git a/tests/visual/button/button_ticket_5261.html b/tests/visual/button/button_ticket_5261.html deleted file mode 100644 index 7eddc33ae..000000000 --- a/tests/visual/button/button_ticket_5261.html +++ /dev/null @@ -1,42 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Button Visual Test : Button ticket #5261</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> - $(function() { - - $('#id1').button().change(function(e) { - console.log('change', e); - }); - $('#id1').bind('change', function(e) { - console.log('bound change', e); - }); - $("body").live('change', function(e) { - console.log('live change on body', e); - }); - $(document).delegate('input', 'change', function(e) { - console.log('delegated input change', e); - }); - $(document).change(function(e) { - console.log('delegated change on document', e); - }); - - }); - </script> -</head> -<body> - -<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/5261">#5261 - button change events don't fire in IE 7/8</a></h1> - -<input name="1" id="id1" type="checkbox"/> -<label for="id1">Checkbox</label> - -</body> -</html> diff --git a/tests/visual/button/button_ticket_5278.html b/tests/visual/button/button_ticket_5278.html deleted file mode 100644 index eed6ebdb0..000000000 --- a/tests/visual/button/button_ticket_5278.html +++ /dev/null @@ -1,58 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Button Visual Test : Button ticket #5278</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> - $(function() { - - $('#id1, #id2, #id3, #id4').button(); - - $('#r1, #r2, #r3, #r4').button(); - - }); - </script> -</head> -<body> - -<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/5278">#5278 - ui.buttons doesn't visually reset on form "reset" event or input "change" event</a></h1> - -<form> - -<input name="a1" id="id1" type="checkbox"/> -<label for="id1">Checkbox</label> - -<input name="a2" id="id2" type="checkbox"/> -<label for="id2">Checkbox</label> - -<input name="a3" id="id3" type="checkbox" checked="checked" /> -<label for="id3">Checkbox</label> - -<input name="a4" id="id4" type="checkbox"/> -<label for="id4">Checkbox</label> - -<input type="reset"/> - -<input name="r" id="r1" type="radio"/> -<label for="r1">Radio</label> - -<input name="r" id="r2" type="radio"/> -<label for="r2">Radio</label> - -<input name="r" id="r3" type="radio" checked="checked" /> -<label for="r3">Radio</label> - -<input name="r" id="r4" type="radio"/> -<label for="r4">Radio</label> - - -</form> - -</body> -</html> diff --git a/tests/visual/button/performance.html b/tests/visual/button/performance.html new file mode 100644 index 000000000..1d1884bc2 --- /dev/null +++ b/tests/visual/button/performance.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Button Visual Test: Initialization Performance</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script> + $(function() { + var start, + html = new Array( 500 ).join( "<button>button</button>" ); + $( html ).appendTo( "body" ); + + start = $.now(); + $( "button" ).button(); + $( "<p>" ).text( "Time to initialize: " + ($.now() - start) + "ms" ).prependTo( "body" ); + }); + </script> +</head> +<body> + +</body> +</html> diff --git a/tests/visual/dialog/dialog_on_page_with_large_dom.html b/tests/visual/dialog/performance.html index d807b3e3f..e84f4b328 100644 --- a/tests/visual/dialog/dialog_on_page_with_large_dom.html +++ b/tests/visual/dialog/performance.html @@ -3,7 +3,6 @@ <head> <meta charset="utf-8"> <title>Dialog Visual Test - Modal Dialog in Large DOM</title> - <link rel="stylesheet" href="../visual.css"> <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> <script src="../../../jquery-1.7.2.js"></script> <script src="../../../external/jquery.bgiframe-2.1.2.js"></script> @@ -37,6 +36,9 @@ </head> <body> +<p>WHAT: A single dialog is created on a page with a large DOM.</p> +<p>EXPECTED: Creating and opening the dialog should be fast, regardless of page size.</p> + <button id="opener">open dialog</button> <div id="dialog" title="Dialog Title"> <p> Dialog Content </p> @@ -51,7 +53,7 @@ <div><div><div><div><div><div><div><div><div><div> <div><div><div><div><div><div><div><div><div><div> <div><div><div><div><div><div><div><div><div><div> -<div><p>This <span>is</span> <span>a</span> <strong>large</strong> <abbr>DOM</abbr></p>.</div> +<div><p>This <span>is</span> <span>a</span> <strong>large</strong> <abbr>DOM</abbr>.</p></div> <input> <select> <option>option 1</option> diff --git a/tests/visual/effects/effects.all.html b/tests/visual/effects/all.html index acb8dc41a..15bfcd254 100644 --- a/tests/visual/effects/effects.all.html +++ b/tests/visual/effects/all.html @@ -3,7 +3,7 @@ <head> <meta charset="utf-8"> <title>jQuery UI Effects Test Suite</title> - <link rel="stylesheet" href="effects.all.css" type="text/css"> + <link rel="stylesheet" href="effects.css"> <script src="../../../jquery-1.7.2.js"></script> <script src="../../../ui/jquery.effects.core.js"></script> <script src="../../../ui/jquery.effects.blind.js"></script> @@ -19,7 +19,7 @@ <script src="../../../ui/jquery.effects.shake.js"></script> <script src="../../../ui/jquery.effects.slide.js"></script> <script src="../../../ui/jquery.effects.transfer.js"></script> - <script src="effects.all.js"></script> + <script src="effects.js"></script> </head> <body> @@ -186,19 +186,19 @@ <p>Transfer to first element</p> </div> </li> - + <li> <div class="effect" id="addClass"> <p>addClass</p> </div> </li> - + <li> <div class="effect" id="removeClass"> <p>removeClass</p> </div> </li> - + <li> <div class="effect" id="toggleClass"> <p>toggleClass</p> diff --git a/tests/visual/effects/effects.all.js b/tests/visual/effects/effects.all.js deleted file mode 100644 index a28c41a89..000000000 --- a/tests/visual/effects/effects.all.js +++ /dev/null @@ -1,106 +0,0 @@ - -$(function() { - var duration = 1000, wait = 500; - - $("div.effect") - .hover(function() { $(this).addClass("hover"); }, - function() { $(this).removeClass("hover"); }); - - var effect = function(el, n, o) { - - $.extend(o, { - easing: "easeOutQuint" - }); - - $(el).bind("click", function() { - - $(this).addClass("current") - // delaying the initial animation makes sure that the queue stays in tact - .delay( 10 ) - .hide( n, o, duration ) - .delay( wait ) - .show( n, o, duration, function() { - $( this ).removeClass("current"); - }); - }); - - }; - - $("#hide").click(function() { - var el = $(this); - el.addClass("current").hide(duration, function() { - setTimeout(function() { - el.show(duration, function() { el.removeClass("current"); }); - }, wait); - }); - }); - - effect("#blindLeft", "blind", { direction: "left" }); - effect("#blindUp", "blind", { direction: "up" }); - effect("#blindRight", "blind", { direction: "right" }); - effect("#blindDown", "blind", { direction: "down" }); - - effect("#bounce3times", "bounce", { times: 3 }); - - effect("#clipHorizontally", "clip", { direction: "horizontal" }); - effect("#clipVertically", "clip", { direction: "vertical" }); - - effect("#dropDown", "drop", { direction: "down" }); - effect("#dropUp", "drop", { direction: "up" }); - effect("#dropLeft", "drop", { direction: "left" }); - effect("#dropRight", "drop", { direction: "right" }); - - effect("#explode9", "explode", {}); - effect("#explode36", "explode", { pieces: 36 }); - - effect("#fade", "fade", {}); - - effect("#fold", "fold", { size: 50 }); - - effect("#highlight", "highlight", {}); - - effect("#pulsate", "pulsate", { times: 2 }); - - effect("#puff", "puff", { times: 2 }); - effect("#scale", "scale", {}); - effect("#size", "size", {}); - $("#sizeToggle").bind("click", function() { - var opts = { to: { width: 300, height: 300 }}; - $(this).addClass('current') - .toggle("size", opts, duration) - .delay(wait) - .toggle("size", opts, duration, function() { - $(this).removeClass("current"); - }); - }); - - $("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); }); - - effect("#slideDown", "slide", { direction: "down" }); - effect("#slideUp", "slide", { direction: "up" }); - effect("#slideLeft", "slide", { direction: "left" }); - effect("#slideRight", "slide", { direction: "right" }); - - $("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); }); - - $("#addClass").click(function() { - $(this).addClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration, function() { - $(this).removeClass("current"); - }); - }); - $("#removeClass").click(function() { - $(this).addClass("current").removeClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration); - }); - $("#toggleClass").click(function() { - $(this).toggleClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration); - }); -}); diff --git a/tests/visual/effects/effects.all.css b/tests/visual/effects/effects.css index 1d531b026..460019f24 100644 --- a/tests/visual/effects/effects.all.css +++ b/tests/visual/effects/effects.css @@ -1,13 +1,9 @@ - -body,html { - margin: 0; +body { + margin: 1em; padding: 0; - font-size: 12px; - font-family: Arial; background: #191919; color: #fff; } -body { margin: 1em; } ul.effects { list-style-type: none; @@ -16,8 +12,6 @@ ul.effects { } ul.effects li { - list-style-type: none; - margin: 0; padding: 0; width: 120px; height: 100px; @@ -44,7 +38,7 @@ div.current { div.effect p { color: #191919; font-weight: bold; - margin: 0px; + margin: 0; padding: 10px; } diff --git a/tests/visual/effects/effects.js b/tests/visual/effects/effects.js new file mode 100644 index 000000000..624e0b128 --- /dev/null +++ b/tests/visual/effects/effects.js @@ -0,0 +1,107 @@ +$(function() { + +var duration = 1000, + wait = 500; + +function effect( elem, name, options ) { + $.extend( options, { + easing: "easeOutQuint" + }); + + $( elem ).click(function() { + $( this ) + .addClass( "current" ) + // delaying the initial animation makes sure that the queue stays in tact + .delay( 10 ) + .hide( name, options, duration ) + .delay( wait ) + .show( name, options, duration, function() { + $( this ).removeClass( "current" ); + }); + }); +} + +$( "#hide" ).click(function() { + $( this ) + .addClass( "current" ) + .hide( duration ) + .delay( wait ) + .show( duration, function() { + $( this ).removeClass( "current" ); + }); +}); + +effect( "#blindLeft", "blind", { direction: "left" } ); +effect( "#blindUp", "blind", { direction: "up" } ); +effect( "#blindRight", "blind", { direction: "right" } ); +effect( "#blindDown", "blind", { direction: "down" } ); + +effect( "#bounce3times", "bounce", { times: 3 } ); + +effect( "#clipHorizontally", "clip", { direction: "horizontal" } ); +effect( "#clipVertically", "clip", { direction: "vertical" } ); + +effect( "#dropDown", "drop", { direction: "down" } ); +effect( "#dropUp", "drop", { direction: "up" } ); +effect( "#dropLeft", "drop", { direction: "left" } ); +effect( "#dropRight", "drop", { direction: "right" } ); + +effect( "#explode9", "explode", {} ); +effect( "#explode36", "explode", { pieces: 36 } ); + +effect( "#fade", "fade", {} ); + +effect( "#fold", "fold", { size: 50 } ); + +effect( "#highlight", "highlight", {} ); + +effect( "#pulsate", "pulsate", { times: 2 } ); + +effect( "#puff", "puff", { times: 2 } ); +effect( "#scale", "scale", {} ); +effect( "#size", "size", {} ); +$( "#sizeToggle" ).click(function() { + var options = { to: { width: 300, height: 300 } }; + $( this ) + .addClass( "current" ) + .toggle( "size", options, duration ) + .delay( wait ) + .toggle( "size", options, duration, function() { + $( this ).removeClass( "current" ); + }); +}); + +$( "#shake" ).click(function() { + $( this ) + .addClass( "current" ) + .effect( "shake", {}, 100, function() { + $( this ).removeClass( "current" ); + }); +}); + +effect( "#slideDown", "slide", { direction: "down" } ); +effect( "#slideUp", "slide", { direction: "up" } ); +effect( "#slideLeft", "slide", { direction: "left" } ); +effect( "#slideRight", "slide", { direction: "right" } ); + +$( "#transfer" ).click(function() { + $( this ) + .addClass( "current" ) + .effect( "transfer", { to: "div:eq(0)" }, 1000, function() { + $( this ).removeClass( "current" ); + }); +}); + +$( "#addClass" ).click(function() { + $( this ).addClass( "current", duration, function() { + $( this ).removeClass( "current" ); + }); +}); +$( "#removeClass" ).click(function() { + $( this ).addClass( "current" ).removeClass( "current", duration ); +}); +$( "#toggleClass" ).click(function() { + $( this ).toggleClass( "current", duration ); +}); + +}); diff --git a/tests/visual/effects/effects.scale.html b/tests/visual/effects/scale.html index 708543257..add2ba01c 100644 --- a/tests/visual/effects/effects.scale.html +++ b/tests/visual/effects/scale.html @@ -3,13 +3,12 @@ <head> <meta charset="utf-8"> <title>jQuery UI Effects Test Suite</title> - <link rel="stylesheet" href="effects.all.css" type="text/css"> + <link rel="stylesheet" href="effects.css"> <script src="../../../jquery-1.7.2.js"></script> <script src="../../../ui/jquery.effects.core.js"></script> <script src="../../../ui/jquery.effects.scale.js"></script> - <script src="effects.all.js"></script> <script> - jQuery(function( $ ) { + $(function() { var test = $( "#testBox" ), opts = $( ".arg" ), optsRev = $( opts.get().reverse() ), @@ -82,9 +81,8 @@ } }); </script> - <style type="text/css"> + <style> #testArea { -/* border: 5px dashed #777;*/ width: 200px; height: 200px; position: relative; diff --git a/tests/visual/index.html b/tests/visual/index.html new file mode 100644 index 000000000..0d5aceffa --- /dev/null +++ b/tests/visual/index.html @@ -0,0 +1,82 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Visual Tests</title> + + <link rel="stylesheet" href="../../themes/base/jquery.ui.core.css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css"> + <link rel="stylesheet" href="../index.css"> + <script src="../jquery-1.7.2.js"></script> + <script src="../index.js"></script> +</head> +<body> + +<div id="main"> + <h1>jQuery UI Visual Tests</h1> + <div> + <h2>Accordion</h2> + <ul> + <li><a href="accordion/icons.html">Icons</a></li> + </ul> + + <h2>addClass</h2> + <ul> + <li><a href="addClass/queue.html">Queue</a></li> + </ul> + + <h2>Button</h2> + <ul> + <li><a href="button/button.html">General</a></li> + <li><a href="button/performance.html">Performance</a></li> + </ul> + + <h2>Dialog</h2> + <ul> + <li><a href="dialog/performance.html">Performance</a></li> + </ul> + + <h2>Effects</h2> + <ul> + <li><a href="effects/all.html">All</a></li> + <li><a href="effects/scale.html">Scale</a></li> + </ul> + + <h2>Menu</h2> + <ul> + <li><a href="menu/menu.html">General</a></li> + </ul> + + <h2>Position</h2> + <ul> + <li><a href="position/position.html">General</a></li> + <li><a href="position/position_feedback.html">Feedback</a></li> + </ul> + + <h2>Tooltip</h2> + <ul> + <li><a href="tooltip/tooltip.html">General</a></li> + <li><a href="tooltip/animations.html">Animations</a></li> + </ul> + + <h2>Compound</h2> + <ul> + <li><a href="compound/accordion_tabs.html">Accordion in Tabs</a></li> + <li><a href="compound/datepicker_dialog.html">Datepicker in Dialog</a></li> + <li><a href="compound/dialog_widgets.html">Various Widgets in Dialog</a></li> + <li><a href="compound/draggable_accordion.html">Draggable Accordion</a></li> + <li><a href="compound/draggable_accordion_accordion_tabs_draggable.html">Nested Widgets</a></li> + <li><a href="compound/sortable_accordion_sortable_tabs.html">Sortable Tabs in Sortable Accordion</a></li> + <li><a href="compound/tabs_tabs.html">Nested Tabs</a></li> + <li><a href="compound/tabs_tooltips.html">Tabs with Tooltips</a></li> + </ul> + + <h2>General</h2> + <ul> + <li><a href="theme.html">Theme</a></li> + </ul> + </div> +</div> + +</body> +</html> diff --git a/tests/visual/menu/drilldown.html b/tests/visual/menu/drilldown.html deleted file mode 100644 index 7b40fc62f..000000000 --- a/tests/visual/menu/drilldown.html +++ /dev/null @@ -1,267 +0,0 @@ -<!doctype html> -<html> -<head> - <meta charset="utf-8"> - <title>Menu Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> - <script type="text/javascript"> - $(function() { - $.fn.themeswitcher && $('<div/>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); - - $.widget("ui.drilldown", { - _init: function() { - var that = this; - this.active = this.element.find(">ul").attr("tabindex", 0); - - // hide submenus and create indicator icons - this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show(); - - this.element.find("ul").menu({ - // disable built-in key handling - input: $(), - focus: function(event, ui) { - that.activeItem = ui.item; - }, - select: function(event, ui) { - if (this != that.active[0]) { - return; - } - var nested = $(">ul", ui.item); - if (nested.length) { - that._open(nested); - } else { - that.element.find("h3").text(ui.item.text()); - that.options.select.apply(this, arguments); - } - } - }); - - this.back = this.element.children(":last").button({ - icons: { - primary: "ui-icon-carat-1-w" - } - }).click(function() { - that.up(); - return false; - }).hide(); - }, - - _open: function(submenu) { - this.active = submenu.show().css({ - opacity: 0 - }).position({ - my: "left top", - at: "right top", - of: this.widget() - }).position({ - my: "left top", - at: "left top", - of: this.widget(), - using: function(to) { - $(this).animate({ - left: to.left, - top: to.top, - opacity: 1 - }); - } - }); - this.back.show(); - }, - - up: function() { - if (this.active.parent()[0] == this.element[0]) { - return; - } - this.active.position({ - my: "left top", - at: "right top", - of: this.widget(), - using: function(to) { - $(this).animate({ - left: to.left, - top: to.top, - opacity: 0 - }); - } - }); - this.active = this.active.parent().parent().show(); - this.activeItem = this.active.data("menu").active; - if (!this.active.parent().parent().is(":ui-menu")) { - this.back.hide(); - } - }, - - down: function(event) { - var nested = this.activeItem.find(">ul"); - if (nested.length) { - this._open(nested); - nested.menu("focus", event, nested.children(":first")) - } - }, - - show: function() { - }, - - hide: function() { - }, - - widget: function() { - return this.element.find(">ul"); - } - }); - - var drilldown = $("#drilldown").drilldown({ - select: function(event, ui) { - $("#log").append("<div>Selected " + ui.item.text() + "</div>"); - } - }); - - drilldown.drilldown("widget").keydown(function(event) { - var menu = drilldown.data("drilldown").active.data("menu"); - if (menu.widget().is(":hidden")) - return; - event.stopPropagation(); - switch (event.keyCode) { - case $.ui.keyCode.PAGE_UP: - menu.previousPage(); - break; - case $.ui.keyCode.PAGE_DOWN: - menu.nextPage(); - break; - case $.ui.keyCode.UP: - menu.previous(); - break; - case $.ui.keyCode.LEFT: - drilldown.drilldown("up"); - break; - case $.ui.keyCode.RIGHT: - drilldown.drilldown("down"); - break; - case $.ui.keyCode.DOWN: - menu.next(); - event.preventDefault(); - break; - case $.ui.keyCode.ENTER: - case $.ui.keyCode.TAB: - menu.select(); - drilldown.drilldown("hide"); - event.preventDefault(); - break; - case $.ui.keyCode.ESCAPE: - drilldown.drilldown("hide", event); - break; - default: - clearTimeout(menu.filterTimer); - var prev = menu.previousFilter || ""; - var character = String.fromCharCode(event.keyCode); - var skip = false; - if (character == prev) { - skip = true; - } else { - character = prev + character; - } - - var match = menu.widget().children("li").filter(function() { - return new RegExp("^" + character, "i").test($("a", this).text()); - }); - var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match; - if (!match.length) { - character = String.fromCharCode(event.keyCode); - match = menu.widget().children("li").filter(function() { - return new RegExp("^" + character, "i").test($(this).text()); - }); - } - if (match.length) { - menu.focus(event, match); - if (match.length > 1) { - menu.previousFilter = character; - menu.filterTimer = setTimeout(function() { - delete menu.previousFilter; - }, 1000); - } else { - delete menu.previousFilter; - } - } else { - delete menu.previousFilter; - } - } - }); - }); - </script> - <style> - body { font-size:62.5%; } - .ui-menu { width: 200px; height: 170px; } - .ui-menu .ui-menu { position: absolute; } - .ui-menu .ui-icon { float: right; } - </style> -</head> -<body> - -<div id="drilldown"> - <h3>Make a selection...</h3> - <ul> - <li> - <a href="#">Amsterdam</a> - <ul> - <li><a href="#">Aberdeen</a></li> - <li><a href="#">Ada</a></li> - <li> - <a href="#">Adamsville</a> - <ul> - <li><a href="#">Anaheim</a></li> - <li> - <a href="#">Cologne</a> - <ul> - <li><a href="#">Mberdeen</a></li> - <li><a href="#">Mda</a></li> - <li><a href="#">Mdamsville</a></li> - <li><a href="#">Mddyston</a></li> - <li><a href="#">Mmesville</a></li> - </ul> - </li> - <li><a href="#">Frankfurt</a></li> - </ul> - </li> - <li><a href="#">Addyston</a></li> - <li><a href="#">Amesville</a></li> - </ul> - </li> - <li><a href="#">Anaheim</a></li> - <li><a href="#">Cologne</a></li> - <li><a href="#">Frankfurt</a></li> - <li> - <a href="#">Magdeburg</a> - <ul> - <li><a href="#">Mberdeen</a></li> - <li><a href="#">Mda</a></li> - <li><a href="#">Mdamsville</a></li> - <li><a href="#">Mddyston</a></li> - <li><a href="#">Mmesville</a></li> - </ul> - </li> - <li><a href="#">Munich</a></li> - <li><a href="#">Utrecht</a></li> - <li><a href="#">Zurich</a></li> - </ul> - <a href="#">Go back</a> -</div> - -<div class="ui-widget" style="clear: left; margin-top:2em; font-family:Arial"> - Log: - <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div> -</div> - -</body> -</html> diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html index 548f25db4..f92de61db 100644 --- a/tests/visual/menu/menu.html +++ b/tests/visual/menu/menu.html @@ -3,53 +3,30 @@ <head> <meta charset="utf-8"> <title>Menu Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.menu.js"></script> + <script> $(function() { - $.fn.themeswitcher && $('<div/>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); - - function create() { - menus.menu({ - select: function(event, ui) { - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); - } - }); - - $("#menu5").menu({ - select: function(event, ui) { - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); - }, - menus: "div" - }); - - $("#menu6").menu({ - select: function(event, ui) { - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); - }, - menus: ".menuElement" - }); + function logger( event, ui ) { + $( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" ); } - var menus = $("#menu1, #menu2, #menu3, .menu4"); - create(); + $( "#menu1, #menu2, #menu3, .menu4" ).menu({ + select: logger + }); - $("#toggle-destroy").toggle(function() { - menus.menu("destroy"); - }, create); - $("#toggle-disable").toggle(function() { - menus.menu("disable"); - }, function() { - menus.menu("enable"); + $( "#menu5" ).menu({ + menus: "div", + select: logger + }); + + $( "#menu6" ).menu({ + menus: ".menuElement", + select: logger }); }); </script> @@ -64,6 +41,7 @@ </head> <body> +<h2>Default inline menu</h2> <ul id="menu1"> <li><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> @@ -74,6 +52,7 @@ <li><a href="#">Salzburg</a></li> </ul> +<h2>Inline with disabled items and submenus</h2> <ul id="menu2"> <li class="ui-state-disabled"><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> @@ -114,6 +93,7 @@ <li class="ui-state-disabled"><a href="#">Amesville</a></li> </ul> +<h2>Menu with icons</h2> <ul id="menu3"> <li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li> <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li> @@ -152,6 +132,7 @@ </li> </ul> +<h2>Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour</h2> <ul class="menu4"> <li><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> @@ -193,6 +174,7 @@ <li><a href="#">Amesville</a></li> </ul> +<h2>Menu with custom markup</h2> <div id="menu5"> <blockquote><a href="#">Aberdeen</a></blockquote> <blockquote><a href="#">Ada</a></blockquote> @@ -231,6 +213,7 @@ </blockquote> </div> +<h2>Menu with custom markup, multi-line items</h2> <div class="menuElement" id="menu6"> <div class="address-item"> <a href="#"> @@ -274,13 +257,10 @@ </div> </div> -<div class="ui-widget" style="clear: left; margin-top:2em; font-family:Arial"> +<div style="position: absolute; top: 1em; right: 1em;"> Log: - <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div> + <div id="log" style="height: 400px; width: 300px; overflow: auto; border: 1px solid #000;"></div> </div> -<button id="toggle-disable">Disable / Enable</button> -<button id="toggle-destroy">Destroy / Create</button> - </body> </html>
\ No newline at end of file diff --git a/tests/visual/menu/tablemenu.html b/tests/visual/menu/tablemenu.html deleted file mode 100644 index ca4345aed..000000000 --- a/tests/visual/menu/tablemenu.html +++ /dev/null @@ -1,68 +0,0 @@ -<!doctype html> -<html> -<head> - <meta charset="utf-8"> - <title>Menu Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var table = $("table"); - var colgroup = table.find("colgroup"); - var menu = $("<ul>").insertAfter(table); - var thead = table.find("thead"); - thead.children("tr").addClass("ui-state-default"); - var rows = table.find("tbody tr"); - $("<table>").width("100%").append(colgroup.clone()).append(thead).wrap("<li>").parent().appendTo(menu); - rows.each(function() { - $("<table>").width("100%").append(colgroup.clone()).append(this).wrap("<li><a></a></li>").parent().parent().appendTo(menu); - }); - - menu.menu({ - select: function(event, ui) { - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); - } - }); - }); - </script> - <style> - body { font-size:62.5%; } - .ui-menu { width: 200px; } - </style> -</head> -<body> - -<table> - <colgroup><col style="width: 50%"><col style="width: 50%"></colgroup> - <thead> - <tr> - <th>Firstname</th> - <th>Lastname</th> - </tr> - </thead> - <tbody> - <tr> - <td>Scott</td> - <td>Gonzo</td> - </tr> - <tr> - <td>Richy</td> - <td>Worth</td> - </tr> - </tbody> -</table> - -<div class="ui-widget" style="clear: left; margin-top:2em; font-family:Arial"> - Log: - <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div> -</div> - -<button id="toggle-disable">Disable / Enable</button> -<button id="toggle-destroy">Destroy / Create</button> - -</body> -</html> diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index 64c5d2300..545dc6993 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -1,91 +1,143 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>Position Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var inputs = $("input"); - $("ul").insertAfter(inputs); - $(window).resize(function() { - inputs.each(function() { - var input = $(this).position({ - my: this.id.replace(/-/, " "), - at: this.id.replace(/-/, " "), - of: "#container", - collision: "none" - }); - var menu = $(this).next().menu() - menu.position({ - my: "left+30 top+20", - at: "left bottom", - of: this, - using: function( position, feedback ) { - input.val(feedback.horizontal + " " + feedback.vertical) - $(this).offset( position ); - $(this) - .removeClass("left right top bottom center middle") - .addClass(feedback.horizontal) - .addClass(feedback.vertical); - } - }); - }); - }).resize(); - }); - </script> + <meta charset="utf-8"> + <title>Position Visual Test</title> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.mouse.js"></script> + <script src="../../../ui/jquery.ui.draggable.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> <style> - input, .ui-menu { position: absolute; } - .ui-menu { width: 200px; } - html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; } - #container { width: 95%; height: 95%; border: 1px solid black; margin: auto; } - .ui-menu:before { - font-size: 12pt; - content: "↑"; - position: absolute; - top: -22px; - left: 5px; + .demo { + position: relative; + height: 500px; + width: 80%; + margin: 20px auto; + background: #eee; } - .right:before { - left: auto; - right: 5px; + #target { + width: 60%; + margin: 0 auto; + border: 1px solid #777; + background-color: #fbca93; + text-align: center; + cursor: move; } - .bottom:before { - content: "↓"; - top: auto; - bottom: -19px; + .positionable { + position: absolute; + background-color: #bcd5e6; + text-align: center; + } + .extra-margin { + margin: 0 15px 15px 0; } </style> + <script> + $(function() { + var within = $( ".demo" ), + positionable = $( ".positionable" ); + function position() { + positionable.position({ + of: $( "#target" ), + my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), + at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), + within: within, + collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() + }); + } + + positionable.css( "opacity", 0.5 ); + + $( "#target" ).draggable({ + drag: function() { position(); } + }); + + $( "#within" ).click(function() { + within = within.is( ".demo" ) ? $( window ) : $( ".demo" ); + position(); + }); + + $( "#margin" ).click(function() { + positionable.toggleClass( "extra-margin" ); + position(); + }); + + $( "select, input" ).bind( "click keyup change", function() { position(); } ); + + position(); + }); + </script> </head> <body> -<div id="container"></div> +<div class="demo"> + <div id="target"> + <p>This is the position target element.</p> + </div> + + <div class="positionable" style="width: 75px; height: 75px;"> + <p>to position</p> + </div> -<input id="left-top" /> -<input id="left-center" /> -<input id="left-bottom" /> -<input id="center-top" /> -<input id="center-center" /> -<input id="center-bottom" /> -<input id="right-top" /> -<input id="right-center" /> -<input id="right-bottom" /> + <div class="positionable" style="width:120px; height: 40px;"> + <p>to position 2</p> + </div> -<ul> - <li><a href="#">Java</a></li> - <li><a href="#">JavaScript</a></li> - <li><a href="#">Perl</a></li> - <li><a href="#">Ruby</a></li> - <li><a href="#">C++</a></li> - <li><a href="#">Python</a></li> - <li><a href="#">C#</a></li> -</ul> + <form style="padding: 20px; margin-top: 75px;"> + <h2>Position configuration:</h2> + <div style="padding-bottom: 20px;"> + <b>my:</b> + <select id="my_horizontal"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right" selected="selected">right</option> + </select> + <select id="my_vertical"> + <option value="top">top</option> + <option value="middle">center</option> + <option value="bottom">bottom</option> + </select> + </div> + <div style="padding-bottom: 20px;"> + <b>at:</b> + <select id="at_horizontal"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right" selected="selected">right</option> + </select> + <select id="at_vertical"> + <option value="top">top</option> + <option value="middle">center</option> + <option value="bottom">bottom</option> + </select> + </div> + <div style="padding-bottom: 20px;"> + <b>collision:</b> + <select id="collision_horizontal"> + <option value="flip">flip</option> + <option value="fit">fit</option> + <option value="flipfit">flipfit</option> + <option value="none">none</option> + </select> + <select id="collision_vertical"> + <option value="flip">flip</option> + <option value="fit">fit</option> + <option value="flipfit">flipfit</option> + <option value="none">none</option> + </select> + </div> + <div> + <label for="within">within:</label> + <input id="within" type="checkbox" checked="checked"> + </div> + <div> + <label for="margin">extra margin:</label> + <input id="margin" type="checkbox"> + </div> + </form> +</div> </body> </html> diff --git a/tests/visual/position/position_feedback.html b/tests/visual/position/position_feedback.html index 006a1be02..bea1dd2c2 100644 --- a/tests/visual/position/position_feedback.html +++ b/tests/visual/position/position_feedback.html @@ -2,8 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>Position Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css"> + <title>Position Visual Test: Feedback</title> <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> <script src="../../../jquery-1.7.2.js"></script> <script src="../../../ui/jquery.ui.core.js"></script> @@ -86,6 +85,7 @@ width: 75px; height: 25px; padding: 5px; + font-size: 62.5%; } #target { height: 75px; diff --git a/tests/visual/position/position_feedback_rotate.html b/tests/visual/position/position_feedback_rotate.html deleted file mode 100644 index 11138b112..000000000 --- a/tests/visual/position/position_feedback_rotate.html +++ /dev/null @@ -1,109 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>Position Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css"> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> - <script src="../../../jquery-1.7.2.js"></script> - <script src="../../../ui/jquery.ui.core.js"></script> - <script src="../../../ui/jquery.ui.widget.js"></script> - <script src="../../../ui/jquery.ui.position.js"></script> - <script src="../../../ui/jquery.ui.menu.js"></script> - <script> - $(function() { - function using( position, feedback ) { - var angleRad = Math.atan2( - feedback.target.top + feedback.target.height / 2 - feedback.element.top - feedback.element.height / 2, - feedback.target.left + feedback.target.width / 2 - feedback.element.left - feedback.element.width / 2 - ) * 180 / Math.PI, - angle = Math.round( angleRad * 100) / 100; - $( this ) - .css( position ) - .text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important + " " + angle + "°" ) - .css({ - "-webkit-transform": "rotate(" + angle + "deg)", - "-moz-transform": "rotate(" + angle + "deg)", - "-ms-transform": "rotate(" + angle + "deg)", - "-o-transform": "rotate(" + angle + "deg)", - "transform": "rotate(" + angle + "deg)" - }); - } - - var element = $( ".element" ), - target = $( "#target" ).position({ - my: "center", - at: "center", - of: window - }), - targetOffset = target.offset(); - oppositeElement = element.clone().width( 50 ).appendTo( "body" ), - leftElement = element.clone().width( 50 ).height( 150 ).appendTo( "body" ), - rightElement = element.clone().height( 150 ).width( 150 ).appendTo( "body" ); - - $.each([ - "center top-100", - "right+25 top-50", - "right+75 top", - "right+75 center", - "right+75 bottom", - "right+25 bottom+50", - "center bottom+100", - "left-25 bottom+50", - "left-75 bottom", - "left-75 center", - "left-75 top", - "left-25 top-50" - ], function( index, direction ) { - element.clone().insertAfter( target ).position({ - my: "center", - at: direction, - of: target, - using: using - }); - }); - - element.width( 150 ); - $( document ).on( "mousemove", function( event ) { - var base = { - my: "left top", - at: "left top", - of: target, - using: using - }; - element.position( $.extend({ - offset: (event.pageX - targetOffset.left) + " " + (event.pageY - targetOffset.top) - }, base )); - oppositeElement.position( $.extend({ - offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top)) - }, base )); - leftElement.position( $.extend({ - offset: (-0.9 * (event.pageX - targetOffset.left)) + " " + (0.9 * (event.pageY - targetOffset.top)) - }, base )); - rightElement.position( $.extend({ - offset: (0.9 * (event.pageX - targetOffset.left)) + " " + (-0.9 * (event.pageY - targetOffset.top)) - }, base )); - }); - }); - </script> - <style> - #target, .element { - position: absolute; - border: 1px solid black; - border-radius: 5px; - width: 75px; - height: 25px; - padding: 5px; - } - #target { - height: 75px; - } - </style> -</head> -<body> - -<div id="target">all around me</div> -<div class="element"></div> - -</body> -</html> diff --git a/tests/visual/position/position_fit.html b/tests/visual/position/position_fit.html deleted file mode 100644 index a70423c79..000000000 --- a/tests/visual/position/position_fit.html +++ /dev/null @@ -1,147 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Position Visual Test: Fit</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var inputs = $("input"); - $("ul").insertAfter(inputs); - inputs.each(function(index) { - $(this).position({ - my: $(this).data("position"), - at: $(this).data("position"), - of: "#container"+index, - collision: "none" - }); - if(index < 3) { - $(this).next().menu().position({ - my: "left top", - at: "left bottom", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 3 && index < 6) { - $(this).next().menu().position({ - my: "right top", - at: "right bottom", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 6 && index < 9) { - $(this).next().menu().position({ - my: "center top", - at: "center bottom", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 9 && index < 12) { - $(this).next().menu().position({ - my: "left top", - at: "left bottom", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 12 && index < 15) { - $(this).next().menu().position({ - my: "center center", - at: "center center", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 15) { - $(this).next().menu().position({ - my: "left bottom", - at: "left top", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - }); - }); - </script> - <style> - input, .ui-menu { position: absolute; } - .ui-menu { width: 300px; } - #ui-menu-9, #ui-menu-10, #ui-menu-11, #ui-menu-12, #ui-menu-13, #ui-menu-14, #ui-menu-15, #ui-menu-16, #ui-menu-17 { width: auto; } - html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; } - .container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 15px; margin-bottom: 135px; } - .container2 { width: 200px; height: 100px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 15px; margin-bottom: 135px; } - </style> -</head> -<body> - -<div id="container0" class="container"></div> -<div id="container1" class="container"></div> -<div id="container2" class="container"></div> -<div style="clear:both;"></div> -<div id="container3" class="container"></div> -<div id="container4" class="container"></div> -<div id="container5" class="container"></div> -<div style="clear:both;"></div> -<div id="container6" class="container"></div> -<div id="container7" class="container"></div> -<div id="container8" class="container"></div> -<div style="clear:both;"></div> -<div id="container9" class="container2"></div> -<div id="container10" class="container2"></div> -<div id="container11" class="container2"></div> -<div style="clear:both;"></div> -<div id="container12" class="container2"></div> -<div id="container13" class="container2"></div> -<div id="container14" class="container2"></div> -<div style="clear:both;"></div> -<div id="container15" class="container2"></div> -<div id="container16" class="container2"></div> -<div id="container17" class="container2"></div> - -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> - -<input data-position="left top" /> -<input data-position="center center" /> -<input data-position="right bottom" /> -<input data-position="left top" /> -<input data-position="center center" /> -<input data-position="right bottom" /> -<input data-position="left top" /> -<input data-position="center center" /> -<input data-position="right bottom" /> - -<ul> - <li><a href="#">Java</a></li> - <li><a href="#">JavaScript</a></li> - <li><a href="#">Perl</a></li> - <li><a href="#">Ruby</a></li> - <li><a href="#">C++</a></li> - <li><a href="#">Python</a></li> - <li><a href="#">C#</a></li> -</ul> - -</body> -</html> diff --git a/tests/visual/position/position_flip.html b/tests/visual/position/position_flip.html deleted file mode 100644 index b67c76fb3..000000000 --- a/tests/visual/position/position_flip.html +++ /dev/null @@ -1,76 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Position Visual Test: Flip</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var inputs = $("input"); - $("ul").insertAfter(inputs); - inputs.each(function(index) { - $(this).position({ - my: $(this).data("position"), - at: $(this).data("position"), - of: "#container"+index, - collision: "none" - }); - $(this).next().menu().position({ - my: "left top", - at: "left bottom", - of: this, - within: "#container"+index - }); - }); - }); - </script> - <style> - input, .ui-menu { position: absolute; } - .ui-menu { width: 300px; } - #ui-menu-6, #ui-menu-7, #ui-menu-8 { width: auto; } - html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; } - .container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 150px; } - </style> -</head> -<body> - -<div id="container0" class="container"></div> -<div id="container1" class="container"></div> -<div id="container2" class="container"></div><br> -<div style="clear:both;"></div> -<div id="container3" class="container" style="width:300px;"></div> -<div id="container4" class="container" style="width:300px;"></div> -<div id="container5" class="container" style="width:300px;"></div> -<div style="clear:both;"></div> -<div id="container6" class="container" style="height:100px; margin-bottom: 500px;"></div> -<div id="container7" class="container" style="height:100px; margin-bottom: 500px;"></div> -<div id="container8" class="container" style="height:100px; margin-bottom: 500px;"></div> - -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left center" /> -<input data-position="center center" /> -<input data-position="right center" /> -<input data-position="left bottom" /> -<input data-position="center center" /> -<input data-position="right bottom" /> - -<ul> - <li><a href="#">Java</a></li> - <li><a href="#">JavaScript</a></li> - <li><a href="#">Perl</a></li> - <li><a href="#">Ruby</a></li> - <li><a href="#">C++</a></li> - <li><a href="#">Python</a></li> - <li><a href="#">C#</a></li> -</ul> - -</body> -</html> diff --git a/tests/visual/position/position_flipfit.html b/tests/visual/position/position_flipfit.html deleted file mode 100644 index 840dd5868..000000000 --- a/tests/visual/position/position_flipfit.html +++ /dev/null @@ -1,85 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Position Visual Test: FlipFit</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var inputs = $("input"); - $("ul").insertAfter(inputs); - inputs.each(function(index) { - $(this).position({ - my: $(this).data("position"), - at: $(this).data("position"), - of: "#container"+index, - collision: "none" - }); - $(this).next().menu().position({ - my: index > 2 && index < 6 ? "right top" : "left top", - at: index > 2 && index < 6 ? "right bottom" : "left bottom", - of: this, - within: "#container"+index, - collision: "flipfit" - }); - }); - }); - </script> - <style> - input, .ui-menu { position: absolute; } - .ui-menu { width: 300px; } - #ui-menu-3, #ui-menu-4, #ui-menu-5 { width: 185px; } - #ui-menu-9, #ui-menu-10, #ui-menu-11 { width: auto; } - html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; } - .container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 150px; } - </style> -</head> -<body> - -<div id="container0" class="container"></div> -<div id="container1" class="container"></div> -<div id="container2" class="container"></div><br> -<div style="clear:both;"></div> -<div id="container3" class="container"></div> -<div id="container4" class="container"></div> -<div id="container5" class="container"></div><br> -<div style="clear:both;"></div> -<div id="container6" class="container" style="width:300px;"></div> -<div id="container7" class="container" style="width:300px;"></div> -<div id="container8" class="container" style="width:300px;"></div> -<div style="clear:both;"></div> -<div id="container9" class="container" style="height:100px; margin-bottom: 500px;"></div> -<div id="container10" class="container" style="height:100px; margin-bottom: 500px;"></div> -<div id="container11" class="container" style="height:100px; margin-bottom: 500px;"></div> - -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left center" /> -<input data-position="center center" /> -<input data-position="right center" /> -<input data-position="left bottom" /> -<input data-position="center center" /> -<input data-position="right bottom" /> - -<ul> - <li><a href="#">Java</a></li> - <li><a href="#">JavaScript</a></li> - <li><a href="#">Perl</a></li> - <li><a href="#">Ruby</a></li> - <li><a href="#">C++</a></li> - <li><a href="#">Python</a></li> - <li><a href="#">C#</a></li> -</ul> - -</body> -</html> diff --git a/tests/visual/position/position_margin.html b/tests/visual/position/position_margin.html deleted file mode 100644 index 2e3b63266..000000000 --- a/tests/visual/position/position_margin.html +++ /dev/null @@ -1,42 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Position Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript"> - $(function() { - $( "#elem" ).position({ - my: "right bottom", - at: "right bottom", - of: window, - collision: "fit" - }); - }); - </script> - <style> - #elem { - position: absolute; - top: 100px; - left: 100px; - width: 200px; - height: 200px; - box-shadow: 10px 10px 5px #888; - -moz-box-shadow: 10px 10px 5px #888; - -webkit-box-shadow: 10px 10px 5px #888; - background-color: #aaa; - margin: 15px; - } - </style> -</head> -<body> - -<div id="elem"></div> - -</body> -</html> diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html deleted file mode 100644 index 692cb1067..000000000 --- a/tests/visual/position/position_within.html +++ /dev/null @@ -1,200 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>Position Visual Test: Containing Element</title> - - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - - <script src="../../../jquery-1.7.2.js"></script> - <script src="../../../ui/jquery.ui.core.js"></script> - <script src="../../../ui/jquery.ui.widget.js"></script> - <script src="../../../ui/jquery.ui.mouse.js"></script> - <script src="../../../ui/jquery.ui.draggable.js"></script> - <script src="../../../ui/jquery.ui.position.js"></script> - - <style> - html, body { - height:100%; - width:100%; - margin:0; - /* force scroll bar*/ - min-height:800px; - min-width:800px; - - /* IE6 needs this */ - text-align:center; - } - .demo-description { - text-align:center; - padding:1.5em; - } - .demo-container { - background:#aaa; - width:80%; - height:80%; - - text-align:left; - margin:0 auto; - position:relative; - padding:10px; - } - .demo { - background:#eee; - overflow:hidden; - position:relative; - height:100%; - /* IE6 needs this */ - width:100%; - } - #parent { - width: 60%; - margin: 10px auto; - padding: 5px; - border: 1px solid #777; - background-color: #fbca93; - text-align: center; - cursor:move; - } - .positionable { - width: 75px; - height: 75px; - position: absolute; - display: block; - right: 0; - bottom: 0; - background-color: #bcd5e6; - text-align: center; - cursor:move; - } - .ui-flipped-top { - border-top: 3px solid #000000; - } - .ui-flipped-bottom { - border-bottom: 3px solid #000000; - } - .ui-flipped-left { - border-left: 3px solid #000000; - } - .ui-flipped-right { - border-right: 3px solid #000000; - } - select, input { - margin-left: 15px; - } - </style> - <script> - $(function() { - function position( using ) { - $( ".positionable" ).position({ - of: $( "#parent" ), - my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), - at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), - offset: $( "#offset" ).val(), - using: using, - within: $( ".demo" ), - collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() - }); - } - $( ".demo" ).css("overflow","scroll"); - - $( ".positionable" ).css( "opacity", 0.5 ); - - $( ":input" ).bind( "click keyup change", function() { position(); } ); - - $( "#parent" ).draggable({ - drag: function() { position(); } - }); - - $( ".positionable" ).draggable({ - drag: function( event, ui ) { - // reset offset before calculating it - $( "#offset" ).val( "0" ); - position(function( result ) { - var demo = $( ".demo" ); - $( "#offset" ).val( "" + ( ui.offset.left - result.left - demo.offset().left + demo.scrollLeft() ) + - " " + ( ui.offset.top - result.top - demo.offset().top + demo.scrollTop() ) ); - position(); - }); - } - }); - - position(); - }); - </script> -</head> -<body> - -<div class="demo-description"> - Use the form controls to configure the positioning, or drag the positioned element to modify its offset. - <br/>Drag around the parent element to see collision detection in action. -</div><!-- End demo-description --> - -<div class="demo-container"> -<div class="demo"> - - <div id="parent"> - <p>This is the position parent element.</p> - </div> - - <div class="positionable"> - <p>to position</p> - </div> - - <div class="positionable" style="width:120px; height: 40px;"> - <p>to position 2</p> - </div> - - <div style="padding: 20px; margin-top: 75px;"> - position... - <div style="padding-bottom: 20px;"> - <b>my:</b> - <select id="my_horizontal"> - <option value="left">left</option> - <option value="center">center</option> - <option value="right" selected="selected">right</option> - </select> - <select id="my_vertical"> - <option value="top">top</option> - <option value="middle">center</option> - <option value="bottom">bottom</option> - </select> - </div> - <div style="padding-bottom: 20px;"> - <b>at:</b> - <select id="at_horizontal"> - <option value="left">left</option> - <option value="center">center</option> - <option value="right" selected="selected">right</option> - </select> - <select id="at_vertical"> - <option value="top">top</option> - <option value="middle">center</option> - <option value="bottom">bottom</option> - </select> - </div> - <div style="padding-bottom: 20px;"> - <b>offset:</b> - <input id="offset" type="text" size="15"/> - </div> - <div style="padding-bottom: 20px;"> - <b>collision:</b> - <select id="collision_horizontal"> - <option value="flip">flip</option> - <option value="fit">fit</option> - <option value="none">none</option> - </select> - <select id="collision_vertical"> - <option value="flip">flip</option> - <option value="fit">fit</option> - <option value="none">none</option> - </select> - </div> - </div> - -</div><!-- End demo --> -</div> - -</body> -</html> diff --git a/tests/visual/tooltip/ajaxcontent.php b/tests/visual/tooltip/ajaxcontent.php deleted file mode 100644 index a689a734d..000000000 --- a/tests/visual/tooltip/ajaxcontent.php +++ /dev/null @@ -1,2 +0,0 @@ -<?php sleep(1); ?> -<strong>Hello</strong> world!
\ No newline at end of file diff --git a/tests/visual/tooltip/animations.html b/tests/visual/tooltip/animations.html index 38ee28f1d..24fe02905 100644 --- a/tests/visual/tooltip/animations.html +++ b/tests/visual/tooltip/animations.html @@ -1,73 +1,73 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> - <title>Tooltip Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.bounce.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.drop.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.explode.js"></script> - <!-- - <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> - --> - <script type="text/javascript"> + <title>Tooltip Visual Test: Animations</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.tooltip.js"></script> + <script src="../../../ui/jquery.effects.core.js"></script> + <script src="../../../ui/jquery.effects.blind.js"></script> + <script src="../../../ui/jquery.effects.bounce.js"></script> + <script src="../../../ui/jquery.effects.drop.js"></script> + <script src="../../../ui/jquery.effects.explode.js"></script> + <style> + pre { + width: 250px; + border: 1px solid #000; + padding: .5em; + } + </style> + <script> $(function() { - var animations = [{}, { - show: { - effect: "slideDown" - }, - hide: { - effect: "slideUp" - } - }, { - show: { - effect: "explode" - }, - hide: { - effect: "explode" - } - }, { - show: { - effect: "bounce" - }, - hide: { - effect: "blind" - } - }, - { - show: { - effect: "drop", - direction: "right" - }, - hide: { - effect: "drop", - direction: "right" - } - }]; - $.each(animations, function(index, animation) { - var text = JSON.stringify(animation); - $("<span></span>").attr("title", text).text(text).tooltip({ - show: animation.show, - hide: animation.hide - }).wrap("<li></li>").parent().appendTo("ul"); + $( "pre" ).each(function( index, elem ) { + $( elem ) + .attr( "title", "animated tooltips" ) + .tooltip( $.parseJSON( $( elem ).text() ) ); }); }); </script> </head> <body> -<div style="width:300px"> - <ul class="ui-widget ui-widget-header"> - </ul> -</div> +<pre>{}</pre> +<pre>{ + "show": { + "effect": "slideDown" + }, + "hide": { + "effect": "slideUp" + } +}</pre> +<pre>{ + "show": { + "effect": "explode" + }, + "hide": { + "effect": "explode" + } +}</pre> +<pre>{ + "show": { + "effect": "bounce" + }, + "hide": { + "effect": "blind" + } +}</pre> +<pre>{ + "show": { + "effect": "drop", + "direction": "right" + }, + "hide": { + "effect": "drop", + "direction": "right" + } +}</pre> + </body> </html> diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html index da811645c..e0ff27aa8 100644 --- a/tests/visual/tooltip/tooltip.html +++ b/tests/visual/tooltip/tooltip.html @@ -1,121 +1,104 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tooltip Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script> - <!-- - <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> - --> - <script type="text/javascript"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script src="../../../ui/jquery.ui.tooltip.js"></script> + <style> + .group { + margin-top: 2em; + } + </style> + <script> $(function() { - $.fn.themeswitcher && $('<div/>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); - - function enable() { - // default - $("#context1, form, #childish, #nested-input").tooltip(); - - // custom class, replaces ui-widget-content - $("#context2").tooltip({ - tooltipClass: "ui-widget-header" - }); - $("#right1").tooltip({ - tooltipClass: "ui-state-error" - }); - - // synchronous content - $("#footnotes").tooltip({ - items: "[href^='#']", - content: function() { - return $($(this).attr("href")).html(); - } - }); - // asynchronous content - $("#ajax").tooltip({ - content: function(response) { - $.get("ajaxcontent.php", response); - return "Loading..."; - } - }); - // asynchronous content with caching - var content; - $("#ajax2").tooltip({ - content: function(response) { - if (content) { - return content; - } - $.ajax({ - url: "ajaxcontent.php", - cache: false, - success: function(result) { - content = result; - response(result); - } - }); - return "Loading..."; - } - }); - - // custom position - $("#right2").tooltip({ - tooltipClass: "ui-state-highlight", - position: { - my: "center top", - at: "center bottom", - offset: "0 10" - } - }); + // default + $( "#context1, form, #childish, #nested-input" ).tooltip(); - $("#button1").button(); - $("#button2").button({ - icons: { - primary: "ui-icon-wrench" - } - }); - $("#button3, #button4").button({ - icons: { - primary: "ui-icon-wrench" - }, - text: false - }); - $("#buttons").tooltip({ - position: { - my: "center bottom", - at: "center top", - offset: "0 -5" + // custom class, replaces ui-widget-content + $( "#context2" ).tooltip({ + tooltipClass: "ui-widget-header" + }); + $( "#right1" ).tooltip({ + tooltipClass: "ui-state-error" + }); + + // synchronous content + $( "#footnotes" ).tooltip({ + items: "[href^='#']", + content: function() { + return $( $( this ).attr( "href" ) ).html(); + } + }); + + // asynchronous content + $( "#async" ).tooltip({ + content: function( response ) { + setTimeout(function() { + response( "I loaded <strong>asyncrhonously</strong>!" ); + }, 1000 ); + return "Loading..."; + } + }); + + // asynchronous content with caching + var content; + $( "#async2" ).tooltip({ + content: function( response ) { + if ( content ) { + return content; } - }); - } - enable(); - - $("#disable").toggle(function() { - $(":ui-tooltip").tooltip("disable"); - }, function() { - $(":ui-tooltip").tooltip("enable"); + setTimeout(function() { + content = "<strong>Hello</strong> world!"; + response( content ); + }, 1000 ); + return "Loading..."; + } + }); + + // custom position + $( "#right2" ).tooltip({ + tooltipClass: "ui-state-highlight", + position: { + my: "center top", + at: "center bottom", + offset: "0 10" + } + }); + + $( "#button1" ).button(); + $( "#button2" ).button({ + icons: { + primary: "ui-icon-wrench" + } + }); + $( "#button3, #button4" ).button({ + icons: { + primary: "ui-icon-wrench" + }, + text: false }); - $("#toggle").toggle(function() { - $(":ui-tooltip").tooltip("destroy"); - }, function() { - enable(); + $( "#buttons" ).tooltip({ + position: { + my: "center bottom", + at: "center top", + offset: "0 -5" + } }); }); </script> </head> <body> -<div style="width:300px"> - <ul id="context1" class="ui-widget ui-widget-header"> +<div> + <p>Lots of tooltipped elements close together.<br> + Mouse through them quickly and slowly.</p> + <ul id="context1"> <li><a href="#" title="Tooltip text 1">Anchor 1</a></li> <li><a href="#" title="Tooltip text 2">Anchor 2</a></li> <li><a href="#" title="Tooltip text 3">Anchor 3</a></li> @@ -124,68 +107,83 @@ <li><a href="#" title="Tooltip text 6 more Tooltip text Tooltip text ">Anchor 6</a></li> </ul> - <div id="right1" style="position: absolute; right: 1em" title="right aligned element"> - collision detection should kick in around here - </div> - - <div id="footnotes" style="margin: 2em 0"> - <a href="#footnote1">I'm a link to a footnote.</a> - <a href="#footnote2">I'm another link to a footnote.</a> + <div class="group" style="position: absolute; right: 1em; text-align: right;"> + <p>These elements are right aligned.<br> + One collides and one uses custom position.</p> + <p id="right1" title="right aligned element"> + collision detection should kick in around here + </p> + <p id="right2" title="right aligned element with custom position"> + right aligned with custom position + </p> </div> - <div id="right2" style="position: absolute; right: 1em" title="right aligned element with custom position"> - right aligned with custom position - </div> - - <div id="ajax" style="width: 100px;" class="ui-widget-content" title="never be seen"> - gets its content via ajax - </div> - <div id="ajax2" style="width: 100px;" class="ui-widget-content" title="never be seen"> - gets its content via ajax, caches the response + <div class="group"> + <p>These footnotes pull content form the elements they link to.</p> + <div id="footnotes"> + <a href="#footnote1">I'm a link to a footnote.</a> + <a href="#footnote2">I'm another link to a footnote.</a> + </div> </div> - <div id="context2" class="ui-widget ui-widget-content"> - <span title="something" style="border:1px solid blue">span</span> - <div title="something else" style="border:1px solid red;"> - div - <span title="something more" style="border:1px solid green;">nested span</span> + <div class="group"> + <p>These elements load their content asynchronously.<br> + There should be a loading message while the content is retrieved.</p> + <div id="async" style="width: 100px;" class="ui-widget-content" title="never be seen"> + async + </div> + <div id="async2" style="width: 100px;" class="ui-widget-content" title="never be seen"> + async + cache </div> </div> - <div id="childish" class="ui-widget ui-widget-content" style="margin: 2em 0; border: 1px solid black;" title="element with child elements"> - Text in <strong>bold</strong>. + <div class="group" style="width: 300px;"> + <p>Nested elements.</p> + <div id="context2"> + <div title="something else" style="border:1px solid red;"> + tooltipped + <span title="something more" style="border:1px solid green; padding-left: 50px;">nested tooltipped</span> + </div> + </div> + <div id="childish" style="border: 1px solid black;" title="element with child elements"> + Text in <strong>bold</strong>. + </div> </div> - <form style="margin: 2em 0;"> - <div> - <label for="first">First Name:</label> - <input id="first" title="Your first name is optional" /> - </div> - <div> - <label for="last">Last Name:</label> - <input id="last" title="Your last name is optional" /> + <div class="group"> + <p>Play around with focusing and hovering of form elements.</p> + <form> + <div> + <label for="first">First Name:</label> + <input id="first" title="Your first name is optional"> + </div> + <div> + <label for="last">Last Name:</label> + <input id="last" title="Your last name is optional"> + </div> + </form> + + <p>Some inputs nested inside labels:</p> + <div id="nested-input"> + <label title="test"><input type="checkbox">This is a test</label> + <label title="test2"><input type="checkbox">This is a test</label> + <label><input type="checkbox" title="test3">This is a test</label> + <label><input type="checkbox" title="test4">This is a test</label> </div> - </form> - <div id="nested-input"> - <label title="test"><input type="checkbox">This is a test</label> - <label title="test2"><input type="checkbox">This is a test</label> - <label><input type="checkbox" title="test3">This is a test</label> - <label><input type="checkbox" title="test4">This is a test</label> + <p>Some button widgets:</p> + <div id="buttons"> + <button id="button1" title="Button Tooltip">Button Label</button> + <button id="button2" title="Icon Button">Button with Icon</button> + <button id="button3">Icon Only Button 1</button> + <button id="button4">Icon Only Button 2</button> + </div> </div> - <div id="buttons"> - <button id="button1" title="Button Tooltip">Button Label</button> - <button id="button2" title="Icon Button">Button with Icon</button> - <button id="button3">Icon Only Button 1</button> - <button id="button4">Icon Only Button 2</button> + <div class="group"> + <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div> + <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div> </div> - - <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div> - <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div> - - <button id="disable">Toggle disabled</button> - <button id="toggle">Toggle widget</button> </div> <div style="height: 2000px"></div> diff --git a/themes/base/jquery.ui.accordion.css b/themes/base/jquery.ui.accordion.css index c9532a87f..32c1a7242 100644 --- a/themes/base/jquery.ui.accordion.css +++ b/themes/base/jquery.ui.accordion.css @@ -12,5 +12,4 @@ .ui-accordion .ui-accordion-noicons { padding-left: .7em; } .ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-header .ui-accordion-header-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } -.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; display: none; zoom: 1; } -.ui-accordion .ui-accordion-content-active { display: block; } +.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; zoom: 1; } diff --git a/ui/i18n/jquery.ui.datepicker-eu.js b/ui/i18n/jquery.ui.datepicker-eu.js index 4c40eebec..846ce3abc 100644 --- a/ui/i18n/jquery.ui.datepicker-eu.js +++ b/ui/i18n/jquery.ui.datepicker-eu.js @@ -6,15 +6,15 @@ jQuery(function($){ prevText: '<Aur', nextText: 'Hur>', currentText: 'Gaur', - monthNames: ['Urtarrila','Otsaila','Martxoa','Apirila','Maiatza','Ekaina', - 'Uztaila','Abuztua','Iraila','Urria','Azaroa','Abendua'], - monthNamesShort: ['Urt','Ots','Mar','Api','Mai','Eka', - 'Uzt','Abu','Ira','Urr','Aza','Abe'], - dayNames: ['Igandea','Astelehena','Asteartea','Asteazkena','Osteguna','Ostirala','Larunbata'], - dayNamesShort: ['Iga','Ast','Ast','Ast','Ost','Ost','Lar'], - dayNamesMin: ['Ig','As','As','As','Os','Os','La'], - weekHeader: 'Wk', - dateFormat: 'yy/mm/dd', + monthNames: ['urtarrila','otsaila','martxoa','apirila','maiatza','ekaina', + 'uztaila','abuztua','iraila','urria','azaroa','abendua'], + monthNamesShort: ['urt.','ots.','mar.','api.','mai.','eka.', + 'uzt.','abu.','ira.','urr.','aza.','abe.'], + dayNames: ['igandea','astelehena','asteartea','asteazkena','osteguna','ostirala','larunbata'], + dayNamesShort: ['ig.','al.','ar.','az.','og.','ol.','lr.'], + dayNamesMin: ['ig','al','ar','az','og','ol','lr'], + weekHeader: 'As', + dateFormat: 'yy-mm-dd', firstDay: 1, isRTL: false, showMonthAfterYear: false, diff --git a/ui/jquery.effects.core.js b/ui/jquery.effects.core.js index fe2bf298d..1bb1415a9 100644 --- a/ui/jquery.effects.core.js +++ b/ui/jquery.effects.core.js @@ -54,27 +54,27 @@ function getRGB(color) { } // Look for rgb(num,num,num) - if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) { + if ( (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) ) { return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)]; } // Look for rgb(num%,num%,num%) - if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color)) { + if ( (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color)) ) { return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55]; } // Look for #a0b1c2 - if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color)) { + if ( (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color)) ) { return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)]; } // Look for #fff - if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color)) { + if ( (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color)) ) { return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)]; } // Look for rgba(0, 0, 0, 0) == transparent in Safari 3 - if (result = /rgba\(0, 0, 0, 0\)/.exec(color)) { + if ( (result = /rgba\(0, 0, 0, 0\)/.exec(color)) ) { return colors.transparent; } @@ -94,7 +94,7 @@ function getColor(elem, attr) { } attr = "backgroundColor"; - } while ( elem = elem.parentNode ); + } while ( (elem = elem.parentNode) ); return getRGB(color); } diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index fe1771bc8..f713d25b8 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -63,7 +63,8 @@ $.widget( "ui.accordion", { this._focusable( this.headers ); this.headers.next() - .addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" ); + .addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" ) + .hide(); // don't allow collapsible: false and active: false if ( !options.collapsible && options.active === false ) { @@ -76,7 +77,9 @@ $.widget( "ui.accordion", { this.active = this._findActive( options.active ) .addClass( "ui-accordion-header-active ui-state-active" ) .toggleClass( "ui-corner-all ui-corner-top" ); - this.active.next().addClass( "ui-accordion-content-active" ); + this.active.next() + .addClass( "ui-accordion-content-active" ) + .show(); this._createIcons(); this.originalHeight = this.element[0].style.height; @@ -290,10 +293,9 @@ $.widget( "ui.accordion", { }, refresh: function() { - var heightStyle = this.options.heightStyle, - parent = this.element.parent(), - maxHeight, - overflow; + var maxHeight, overflow, + heightStyle = this.options.heightStyle, + parent = this.element.parent(); this.element.css( "height", this.originalHeight ); diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js index fab9691a3..e5cc9e693 100644 --- a/ui/jquery.ui.autocomplete.js +++ b/ui/jquery.ui.autocomplete.js @@ -57,16 +57,11 @@ $.widget( "ui.autocomplete", { this.isMultiLine = this.element.is( "textarea,[contenteditable]" ); this.valueMethod = this.element[ this.element.is( "input,textarea" ) ? "val" : "text" ]; + this.isNewMenu = true; this.element .addClass( "ui-autocomplete-input" ) - .attr( "autocomplete", "off" ) - // TODO verify these actually work as intended - .attr({ - role: "textbox", - "aria-autocomplete": "list", - "aria-haspopup": "true" - }); + .attr( "autocomplete", "off" ); this._bind({ keydown: function( event ) { @@ -115,7 +110,7 @@ $.widget( "ui.autocomplete", { } break; case keyCode.ESCAPE: - if ( this.menu.element.is(":visible") ) { + if ( this.menu.element.is( ":visible" ) ) { this._value( this.term ); this.close( event ); // Different browsers have different default behavior for escape @@ -183,12 +178,14 @@ $.widget( "ui.autocomplete", { }); this._initSource(); - this.menu = $( "<ul></ul>" ) + this.menu = $( "<ul>" ) .addClass( "ui-autocomplete" ) - .appendTo( this.document.find( this.options.appendTo || "body" )[0] ) + .appendTo( this.document.find( this.options.appendTo || "body" )[ 0 ] ) .menu({ // custom key handling for now - input: $() + input: $(), + // disable ARIA support, the live region takes care of that + role: null }) .zIndex( this.element.zIndex() + 1 ) .hide() @@ -213,7 +210,7 @@ $.widget( "ui.autocomplete", { if ( !$( event.target ).closest( ".ui-menu-item" ).length ) { this._delay(function() { var that = this; - this.document.one( 'mousedown', function( event ) { + this.document.one( "mousedown", function( event ) { if ( event.target !== that.element[ 0 ] && event.target !== menuElement && !$.contains( menuElement, event.target ) ) { @@ -224,14 +221,35 @@ $.widget( "ui.autocomplete", { } }, menufocus: function( event, ui ) { + // #7024 - Prevent accidental activation of menu items in Firefox + if ( this.isNewMenu ) { + this.isNewMenu = false; + if ( event.originalEvent && /^mouse/.test( event.originalEvent.type ) ) { + this.menu.blur(); + + this.document.one( "mousemove", function() { + $( event.target ).trigger( event.originalEvent ); + }); + + return; + } + } + // back compat for _renderItem using item.autocomplete, via #7810 // TODO remove the fallback, see #8156 var item = ui.item.data( "ui-autocomplete-item" ) || ui.item.data( "item.autocomplete" ); if ( false !== this._trigger( "focus", event, { item: item } ) ) { // use value to match what will end up in the input, if it was a key event - if ( /^key/.test(event.originalEvent.type) ) { + if ( event.originalEvent && /^key/.test( event.originalEvent.type ) ) { this._value( item.value ); } + } else { + // Normally the input is populated with the item's value as the + // menu is navigated, causing screen readers to notice a change and + // announce the item. Since the focus event was canceled, this doesn't + // happen, so we update the live region so that screen readers can + // still notice the change and announce it. + this.liveRegion.text( item.value ); } }, menuselect: function( event, ui ) { @@ -265,6 +283,13 @@ $.widget( "ui.autocomplete", { } }); + this.liveRegion = $( "<span>", { + role: "status", + "aria-live": "polite" + }) + .addClass( "ui-helper-hidden-accessible" ) + .insertAfter( this.element ); + if ( $.fn.bgiframe ) { this.menu.element.bgiframe(); } @@ -283,11 +308,9 @@ $.widget( "ui.autocomplete", { clearTimeout( this.searching ); this.element .removeClass( "ui-autocomplete-input" ) - .removeAttr( "autocomplete" ) - .removeAttr( "role" ) - .removeAttr( "aria-autocomplete" ) - .removeAttr( "aria-haspopup" ); + .removeAttr( "autocomplete" ); this.menu.element.remove(); + this.liveRegion.remove(); }, _setOption: function( key, value ) { @@ -304,13 +327,12 @@ $.widget( "ui.autocomplete", { }, _initSource: function() { - var that = this, - array, - url; + var array, url, + that = this; if ( $.isArray(this.options.source) ) { array = this.options.source; this.source = function( request, response ) { - response( $.ui.autocomplete.filter(array, request.term) ); + response( $.ui.autocomplete.filter( array, request.term ) ); }; } else if ( typeof this.options.source === "string" ) { url = this.options.source; @@ -408,9 +430,10 @@ $.widget( "ui.autocomplete", { _close: function( event ) { clearTimeout( this.closing ); - if ( this.menu.element.is(":visible") ) { + if ( this.menu.element.is( ":visible" ) ) { this.menu.element.hide(); this.menu.blur(); + this.isNewMenu = true; this._trigger( "close", event ); } }, @@ -426,7 +449,7 @@ $.widget( "ui.autocomplete", { if ( items.length && items[0].label && items[0].value ) { return items; } - return $.map( items, function(item) { + return $.map( items, function( item ) { if ( typeof item === "string" ) { return { label: item, @@ -457,7 +480,7 @@ $.widget( "ui.autocomplete", { }, this.options.position )); if ( this.options.autoFocus ) { - this.menu.next( new $.Event("mouseover") ); + this.menu.next(); } }, @@ -483,18 +506,18 @@ $.widget( "ui.autocomplete", { }, _renderItem: function( ul, item ) { - return $( "<li></li>" ) - .append( $( "<a></a>" ).text( item.label ) ) + return $( "<li>" ) + .append( $( "<a>" ).text( item.label ) ) .appendTo( ul ); }, _move: function( direction, event ) { - if ( !this.menu.element.is(":visible") ) { + if ( !this.menu.element.is( ":visible" ) ) { this.search( null, event ); return; } - if ( this.menu.isFirstItem() && /^previous/.test(direction) || - this.menu.isLastItem() && /^next/.test(direction) ) { + if ( this.menu.isFirstItem() && /^previous/.test( direction ) || + this.menu.isLastItem() && /^next/.test( direction ) ) { this._value( this.term ); this.menu.blur(); return; @@ -532,4 +555,35 @@ $.extend( $.ui.autocomplete, { } }); + +// live region extension, adding a `messages` option +// NOTE: This is an experimental API. We are still investigating +// a full solution for string manipulation and internationalization. +$.widget( "ui.autocomplete", $.ui.autocomplete, { + options: { + messages: { + noResults: "No search results.", + results: function(amount) { + return amount + ( amount > 1 ? " results are" : " result is" ) + + " available, use up and down arrow keys to navigate."; + } + } + }, + + __response: function( content ) { + var message; + this._superApply( arguments ); + if ( this.options.disabled || this.cancelSearch) { + return; + } + if ( content && content.length ) { + message = this.options.messages.results( content.length ); + } else { + message = this.options.messages.noResults; + } + this.liveRegion.text( message ); + } +}); + + }( jQuery )); diff --git a/ui/jquery.ui.button.js b/ui/jquery.ui.button.js index f84d748cf..810191775 100644 --- a/ui/jquery.ui.button.js +++ b/ui/jquery.ui.button.js @@ -73,7 +73,7 @@ $.widget( "ui.button", { focusClass = "ui-state-focus"; if ( options.label === null ) { - options.label = this.buttonElement.html(); + options.label = (this.type === "input" ? this.buttonElement.val() : this.buttonElement.html()); } this.buttonElement @@ -214,9 +214,9 @@ $.widget( "ui.button", { _determineButtonType: function() { var ancestor, labelSelector, checked; - if ( this.element.is(":checkbox") ) { + if ( this.element.is("[type=checkbox]") ) { this.type = "checkbox"; - } else if ( this.element.is(":radio") ) { + } else if ( this.element.is("[type=radio]") ) { this.type = "radio"; } else if ( this.element.is("input") ) { this.type = "input"; @@ -354,11 +354,10 @@ $.widget( "ui.button", { } }); -$.ui.button.version = "@VERSION"; - $.widget( "ui.buttonset", { + version: "@VERSION", options: { - items: ":button, :submit, :reset, :checkbox, :radio, a, :data(button)" + items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(button)" }, _create: function() { diff --git a/ui/jquery.ui.core.js b/ui/jquery.ui.core.js index 93353996e..d8fff91e1 100644 --- a/ui/jquery.ui.core.js +++ b/ui/jquery.ui.core.js @@ -119,49 +119,52 @@ $.fn.extend({ } }); -$.each( [ "Width", "Height" ], function( i, name ) { - var side = name === "Width" ? [ "Left", "Right" ] : [ "Top", "Bottom" ], - type = name.toLowerCase(), - orig = { - innerWidth: $.fn.innerWidth, - innerHeight: $.fn.innerHeight, - outerWidth: $.fn.outerWidth, - outerHeight: $.fn.outerHeight - }; +// support: jQuery <1.8 +if ( !$( "<a>" ).outerWidth( 1 ).jquery ) { + $.each( [ "Width", "Height" ], function( i, name ) { + var side = name === "Width" ? [ "Left", "Right" ] : [ "Top", "Bottom" ], + type = name.toLowerCase(), + orig = { + innerWidth: $.fn.innerWidth, + innerHeight: $.fn.innerHeight, + outerWidth: $.fn.outerWidth, + outerHeight: $.fn.outerHeight + }; + + function reduce( elem, size, border, margin ) { + $.each( side, function() { + size -= parseFloat( $.css( elem, "padding" + this ) ) || 0; + if ( border ) { + size -= parseFloat( $.css( elem, "border" + this + "Width" ) ) || 0; + } + if ( margin ) { + size -= parseFloat( $.css( elem, "margin" + this ) ) || 0; + } + }); + return size; + } - function reduce( elem, size, border, margin ) { - $.each( side, function() { - size -= parseFloat( $.css( elem, "padding" + this ) ) || 0; - if ( border ) { - size -= parseFloat( $.css( elem, "border" + this + "Width" ) ) || 0; + $.fn[ "inner" + name ] = function( size ) { + if ( size === undefined ) { + return orig[ "inner" + name ].call( this ); } - if ( margin ) { - size -= parseFloat( $.css( elem, "margin" + this ) ) || 0; - } - }); - return size; - } - - $.fn[ "inner" + name ] = function( size ) { - if ( size === undefined ) { - return orig[ "inner" + name ].call( this ); - } - return this.each(function() { - $( this ).css( type, reduce( this, size ) + "px" ); - }); - }; + return this.each(function() { + $( this ).css( type, reduce( this, size ) + "px" ); + }); + }; - $.fn[ "outer" + name] = function( size, margin ) { - if ( typeof size !== "number" ) { - return orig[ "outer" + name ].call( this, size ); - } + $.fn[ "outer" + name] = function( size, margin ) { + if ( typeof size !== "number" ) { + return orig[ "outer" + name ].call( this, size ); + } - return this.each(function() { - $( this).css( type, reduce( this, size, true, margin ) + "px" ); - }); - }; -}); + return this.each(function() { + $( this).css( type, reduce( this, size, true, margin ) + "px" ); + }); + }; + }); +} // selectors function focusable( element, isTabIndexNotNaN ) { diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index f60a1f78d..e48c26400 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -143,7 +143,14 @@ $.widget("ui.dialog", { .addClass( "ui-dialog-title" ) .attr( "id", titleId ) .html( title ) - .prependTo( uiDialogTitlebar ); + .prependTo( uiDialogTitlebar ), + + uiDialogButtonPane = ( this.uiDialogButtonPane = $( "<div>" ) ) + .addClass( "ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" ), + + uiButtonSet = ( this.uiButtonSet = $( "<div>" ) ) + .addClass( "ui-dialog-buttonset" ) + .appendTo( uiDialogButtonPane ); uiDialogTitlebar.find( "*" ).add( uiDialogTitlebar ).disableSelection(); this._hoverable( uiDialogTitlebarClose ); @@ -326,7 +333,7 @@ $.widget("ui.dialog", { // if there are no tabbable elements, set focus on the dialog itself hasFocus = this.element.find( ":tabbable" ); if ( !hasFocus.length ) { - hasFocus = uiDialog.find( ".ui-dialog-buttonpane :tabbable" ); + hasFocus = this.uiDialogButtonPane.find( ":tabbable" ); if ( !hasFocus.length ) { hasFocus = uiDialog; } @@ -345,7 +352,8 @@ $.widget("ui.dialog", { hasButtons = false; // if we already have a button pane, remove it - this.uiDialog.find( ".ui-dialog-buttonpane" ).remove(); + this.uiDialogButtonPane.remove(); + this.uiButtonSet.empty(); if ( typeof buttons === "object" && buttons !== null ) { $.each( buttons, function() { @@ -353,12 +361,6 @@ $.widget("ui.dialog", { }); } if ( hasButtons ) { - uiDialogButtonPane = $( "<div>" ) - .addClass( "ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" ); - uiButtonSet = $( "<div>" ) - .addClass( "ui-dialog-buttonset" ) - .appendTo( uiDialogButtonPane ); - $.each( buttons, function( name, props ) { props = $.isFunction( props ) ? { click: props, text: name } : @@ -369,13 +371,13 @@ $.widget("ui.dialog", { .click(function() { props.click.apply( that.element[0], arguments ); }) - .appendTo( uiButtonSet ); + .appendTo( that.uiButtonSet ); if ( $.fn.button ) { button.button(); } }); this.uiDialog.addClass( "ui-dialog-buttons" ); - uiDialogButtonPane.appendTo( this.uiDialog ); + this.uiDialogButtonPane.appendTo( this.uiDialog ); } else { this.uiDialog.removeClass( "ui-dialog-buttons" ); } diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 99df2e629..1bfd76716 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -26,6 +26,7 @@ $.widget( "ui.menu", { my: "left top", at: "right top" }, + role: "menu", // callbacks blur: null, @@ -42,7 +43,7 @@ $.widget( "ui.menu", { .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) .attr({ id: this.menuId, - role: "menu", + role: this.options.role, tabIndex: 0 }) // need to catch all clicks on disabled menu @@ -201,13 +202,11 @@ $.widget( "ui.menu", { event.preventDefault(); break; case $.ui.keyCode.ENTER: - if ( !this.active.is( ".ui-state-disabled" ) ) { - if ( this.active.children( "a[aria-haspopup='true']" ).length ) { - this.expand( event ); - } else { - this.select( event ); - } - } + this._activate( event ); + event.preventDefault(); + break; + case $.ui.keyCode.SPACE: + this._activate( event ); event.preventDefault(); break; case $.ui.keyCode.ESCAPE: @@ -259,6 +258,16 @@ $.widget( "ui.menu", { } }, + _activate: function( event ) { + if ( !this.active.is( ".ui-state-disabled" ) ) { + if ( this.active.children( "a[aria-haspopup='true']" ).length ) { + this.expand( event ); + } else { + this.select( event ); + } + } + }, + refresh: function() { // initialize nested menus var menus, @@ -267,7 +276,7 @@ $.widget( "ui.menu", { .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) .hide() .attr({ - role: "menu", + role: this.options.role, "aria-hidden": "true", "aria-expanded": "false" }); @@ -281,7 +290,7 @@ $.widget( "ui.menu", { .children( "a" ) .addClass( "ui-corner-all" ) .attr( "tabIndex", -1 ) - .attr( "role", "menuitem" ) + .attr( "role", this._itemRole() ) .attr( "id", function( i ) { return menuId + "-" + i; }); @@ -302,30 +311,26 @@ $.widget( "ui.menu", { }); }, + _itemRole: function() { + return { + menu: "menuitem", + listbox: "option" + }[ this.options.role ]; + }, + focus: function( event, item ) { - var nested, borderTop, paddingTop, offset, scroll, elementHeight, itemHeight; + var nested, focused; this.blur( event, event && event.type === "focus" ); - if ( this._hasScroll() ) { - borderTop = parseFloat( $.css( this.activeMenu[0], "borderTopWidth" ) ) || 0; - paddingTop = parseFloat( $.css( this.activeMenu[0], "paddingTop" ) ) || 0; - offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop; - scroll = this.activeMenu.scrollTop(); - elementHeight = this.activeMenu.height(); - itemHeight = item.height(); - - if ( offset < 0 ) { - this.activeMenu.scrollTop( scroll + offset ); - } else if ( offset + itemHeight > elementHeight ) { - this.activeMenu.scrollTop( scroll + offset - elementHeight + itemHeight ); - } - } + this._scrollIntoView( item ); this.active = item.first(); - this.element.attr( "aria-activedescendant", - this.active.children( "a" ) - .addClass( "ui-state-focus" ) - .attr( "id" ) ); + focused = this.active.children( "a" ).addClass( "ui-state-focus" ); + // only update aria-activedescendant if there's a role + // otherwise we assume focus is managed elsewhere + if ( this.options.role ) { + this.element.attr( "aria-activedescendant", focused.attr( "id" ) ); + } // highlight active parent menu item, if any this.active.parent().closest( ".ui-menu-item" ).children( "a:first" ).addClass( "ui-state-active" ); @@ -347,6 +352,24 @@ $.widget( "ui.menu", { this._trigger( "focus", event, { item: item } ); }, + _scrollIntoView: function( item ) { + var borderTop, paddingTop, offset, scroll, elementHeight, itemHeight; + if ( this._hasScroll() ) { + borderTop = parseFloat( $.css( this.activeMenu[0], "borderTopWidth" ) ) || 0; + paddingTop = parseFloat( $.css( this.activeMenu[0], "paddingTop" ) ) || 0; + offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop; + scroll = this.activeMenu.scrollTop(); + elementHeight = this.activeMenu.height(); + itemHeight = item.height(); + + if ( offset < 0 ) { + this.activeMenu.scrollTop( scroll + offset ); + } else if ( offset + itemHeight > elementHeight ) { + this.activeMenu.scrollTop( scroll + offset - elementHeight + itemHeight ); + } + } + }, + blur: function( event, fromFocus ) { if ( !fromFocus ) { clearTimeout( this.timer ); @@ -385,8 +408,8 @@ $.widget( "ui.menu", { var position = $.extend( {}, { of: this.active - }, $.type(this.options.position) === "function" ? - this.options.position(this.active) : + }, $.type( this.options.position ) === "function" ? + this.options.position( this.active ) : this.options.position ); diff --git a/ui/jquery.ui.mouse.js b/ui/jquery.ui.mouse.js index eaa953ad0..e2e06897c 100644 --- a/ui/jquery.ui.mouse.js +++ b/ui/jquery.ui.mouse.js @@ -20,7 +20,7 @@ $( document ).mouseup( function( e ) { $.widget("ui.mouse", { version: "@VERSION", options: { - cancel: ':input,option', + cancel: 'input,textarea,button,select,option', distance: 1, delay: 0 }, diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index b4433b618..6039cf648 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -171,12 +171,12 @@ $.widget("ui.resizable", $.ui.mouse, { this._handles.hide(); $(this.element) .addClass("ui-resizable-autohide") - .hover(function() { + .mouseenter(function() { if (o.disabled) return; $(this).removeClass("ui-resizable-autohide"); that._handles.show(); - }, - function(){ + }) + .mouseleave(function(){ if (o.disabled) return; if (!that.resizing) { $(this).addClass("ui-resizable-autohide"); diff --git a/ui/jquery.ui.slider.js b/ui/jquery.ui.slider.js index accd3e189..c302bfe8b 100644 --- a/ui/jquery.ui.slider.js +++ b/ui/jquery.ui.slider.js @@ -90,11 +90,12 @@ $.widget( "ui.slider", $.ui.mouse, { .click(function( event ) { event.preventDefault(); }) - .hover(function() { + .mouseenter(function() { if ( !o.disabled ) { $( this ).addClass( "ui-state-hover" ); } - }, function() { + }) + .mouseleave(function() { $( this ).removeClass( "ui-state-hover" ); }) .focus(function() { diff --git a/ui/jquery.ui.sortable.js b/ui/jquery.ui.sortable.js index 55a64590b..88c8aa374 100644 --- a/ui/jquery.ui.sortable.js +++ b/ui/jquery.ui.sortable.js @@ -731,9 +731,10 @@ $.widget("ui.sortable", $.ui.mouse, { var dist = 10000; var itemWithLeastDistance = null; var base = this.positionAbs[this.containers[innermostIndex].floating ? 'left' : 'top']; for (var j = this.items.length - 1; j >= 0; j--) { if(!$.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) continue; - var cur = this.items[j][this.containers[innermostIndex].floating ? 'left' : 'top']; + var cur = this.containers[innermostIndex].floating ? this.items[j].item.offset().left : this.items[j].item.offset().top; if(Math.abs(cur - base) < dist) { dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j]; + this.direction = (cur - base > 0) ? 'down' : 'up'; } } diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js index 026c50993..a693899da 100644 --- a/ui/jquery.ui.tabs.js +++ b/ui/jquery.ui.tabs.js @@ -25,7 +25,7 @@ function isLocal( anchor ) { // if it's manually set, i.e., a.href = "#foo" kills the normalization anchor = anchor.cloneNode( false ); return anchor.hash.length > 1 && - anchor.href.replace( rhash, "" ) === location.href.replace( rhash, "" ); + anchor.href.replace( rhash, "" ) === location.href.replace( rhash, "" ); } $.widget( "ui.tabs", { @@ -34,7 +34,8 @@ $.widget( "ui.tabs", { active: null, collapsible: false, event: "click", - fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 } + hide: null, + show: null, // callbacks activate: null, @@ -46,20 +47,20 @@ $.widget( "ui.tabs", { _create: function() { var panel, that = this, - options = that.options, + options = this.options, active = options.active; - that.running = false; + this.running = false; - that.element.addClass( "ui-tabs ui-widget ui-widget-content ui-corner-all" ); + this.element.addClass( "ui-tabs ui-widget ui-widget-content ui-corner-all" ); - that._processTabs(); + this._processTabs(); if ( active === null ) { // check the fragment identifier in the URL if ( location.hash ) { - that.anchors.each(function( i, tab ) { - if ( tab.hash === location.hash ) { + this.anchors.each(function( i, anchor ) { + if ( anchor.hash === location.hash ) { active = i; return false; } @@ -68,12 +69,12 @@ $.widget( "ui.tabs", { // check for a tab marked active via a class if ( active === null ) { - active = that.lis.filter( ".ui-tabs-active" ).index(); + active = this.lis.filter( ".ui-tabs-active" ).index(); } // no active tab, set to false if ( active === null || active === -1 ) { - active = that.lis.length ? 0 : false; + active = this.lis.length ? 0 : false; } } @@ -101,8 +102,6 @@ $.widget( "ui.tabs", { ) ).sort(); } - this._setupFx( options.fx ); - this._refresh(); // highlight selected tab @@ -111,7 +110,7 @@ $.widget( "ui.tabs", { // check for length avoids error when initializing empty list if ( options.active !== false && this.anchors.length ) { this.active = this._findActive( options.active ); - panel = that._getPanelForTab( this.active ); + panel = this._getPanelForTab( this.active ); panel.show(); this.lis.eq( options.active ).addClass( "ui-tabs-active ui-state-active" ); @@ -151,14 +150,10 @@ $.widget( "ui.tabs", { if ( key === "event" ) { this._setupEvents( value ); } - - if ( key === "fx" ) { - this._setupFx( value ); - } }, - _tabId: function( a ) { - return $( a ).attr( "aria-controls" ) || "ui-tabs-" + getNextTabId(); + _tabId: function( tab ) { + return tab.attr( "aria-controls" ) || "ui-tabs-" + getNextTabId(); }, _sanitizeSelector: function( hash ) { @@ -192,7 +187,7 @@ $.widget( "ui.tabs", { // was active, active tab still exists } else { // make sure active index is correct - options.active = this.anchors.index( this.active ); + options.active = this.lis.index( this.active ); } }, @@ -202,6 +197,7 @@ $.widget( "ui.tabs", { this.element.toggleClass( "ui-tabs-collapsible", options.collapsible ); this.list.addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" ); this.lis.addClass( "ui-state-default ui-corner-top" ); + this.anchors.addClass( "ui-tabs-anchor" ); this.panels.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ); this._setupDisabled( options.disabled ); @@ -224,7 +220,8 @@ $.widget( "ui.tabs", { this.panels = $(); this.anchors.each(function( i, a ) { - var selector, panel, id; + var selector, panel, id, + tab = $( a ).closest( "li" ); // inline tab if ( isLocal( a ) ) { @@ -232,7 +229,7 @@ $.widget( "ui.tabs", { panel = that.element.find( that._sanitizeSelector( selector ) ); // remote tab } else { - id = that._tabId( a ); + id = that._tabId( tab ); selector = "#" + id; panel = that.element.find( selector ); if ( !panel.length ) { @@ -244,7 +241,7 @@ $.widget( "ui.tabs", { if ( panel.length) { that.panels = that.panels.add( panel ); } - $( a ).attr( "aria-controls", selector.substring( 1 ) ); + tab.attr( "aria-controls", selector.substring( 1 ) ); }); }, @@ -278,49 +275,34 @@ $.widget( "ui.tabs", { this.options.disabled = disabled; }, - _setupFx: function( fx ) { - // set up animations - if ( fx ) { - if ( $.isArray( fx ) ) { - this.hideFx = fx[ 0 ]; - this.showFx = fx[ 1 ]; - } else { - this.hideFx = this.showFx = fx; - } - } - }, - _setupEvents: function( event ) { - // attach tab event handler, unbind to avoid duplicates from former tabifying... - this.anchors.unbind( ".tabs" ); - - // TODO: use event delegation via _bind() + var events = { + click: function( event ) { + event.preventDefault(); + } + }; if ( event ) { - this.anchors.bind( event.split( " " ).join( ".tabs " ) + ".tabs", - $.proxy( this, "_eventHandler" ) ); + $.each( event.split(" "), function( index, eventName ) { + events[ eventName ] = "_eventHandler"; + }); } - - // TODO: use event delegation via _bind() - // disable click in any case - this.anchors.bind( "click.tabs", function( event ){ - event.preventDefault(); - }); + this.anchors.unbind( ".tabs" ); + this._bind( this.anchors, events ); }, _eventHandler: function( event ) { - var that = this, - options = that.options, - active = that.active, - clicked = $( event.currentTarget ), - clickedIsActive = clicked[ 0 ] === active[ 0 ], + var options = this.options, + active = this.active, + anchor = $( event.currentTarget ), + tab = anchor.closest( "li" ), + clickedIsActive = tab[ 0 ] === active[ 0 ], collapsing = clickedIsActive && options.collapsible, - toShow = collapsing ? $() : that._getPanelForTab( clicked ), - toHide = !active.length ? $() : that._getPanelForTab( active ), - tab = clicked.closest( "li" ), + toShow = collapsing ? $() : this._getPanelForTab( tab ), + toHide = !active.length ? $() : this._getPanelForTab( active ), eventData = { oldTab: active, oldPanel: toHide, - newTab: collapsing ? $() : clicked, + newTab: collapsing ? $() : tab, newPanel: toShow }; @@ -330,32 +312,30 @@ $.widget( "ui.tabs", { // tab is already loading tab.hasClass( "ui-tabs-loading" ) || // can't switch durning an animation - that.running || + this.running || // click on active header, but not collapsible ( clickedIsActive && !options.collapsible ) || // allow canceling activation - ( that._trigger( "beforeActivate", event, eventData ) === false ) ) { - clicked[ 0 ].blur(); + ( this._trigger( "beforeActivate", event, eventData ) === false ) ) { return; } - options.active = collapsing ? false : that.anchors.index( clicked ); + options.active = collapsing ? false : this.lis.index( tab ); - that.active = clickedIsActive ? $() : clicked; - if ( that.xhr ) { - that.xhr.abort(); + this.active = clickedIsActive ? $() : tab; + if ( this.xhr ) { + this.xhr.abort(); } if ( !toHide.length && !toShow.length ) { - jQuery.error( "jQuery UI Tabs: Mismatching fragment identifier." ); + $.error( "jQuery UI Tabs: Mismatching fragment identifier." ); } if ( toShow.length ) { // TODO make passing in node possible - that.load( that.anchors.index( clicked ), event ); - clicked[ 0 ].blur(); + this.load( this.lis.index( tab ), event ); } - that._toggle( event, eventData ); + this._toggle( event, eventData ); }, // handles show/hide for selecting tabs @@ -364,7 +344,7 @@ $.widget( "ui.tabs", { toShow = eventData.newPanel, toHide = eventData.oldPanel; - that.running = true; + this.running = true; function complete() { that.running = false; @@ -374,11 +354,8 @@ $.widget( "ui.tabs", { function show() { eventData.newTab.closest( "li" ).addClass( "ui-tabs-active ui-state-active" ); - if ( toShow.length && that.showFx ) { - toShow - .animate( that.showFx, that.showFx.duration || "normal", function() { - complete(); - }); + if ( toShow.length && that.options.show ) { + that._show( toShow, that.options.show, complete ); } else { toShow.show(); complete(); @@ -386,8 +363,8 @@ $.widget( "ui.tabs", { } // start out by hiding, then showing, then completing - if ( toHide.length && that.hideFx ) { - toHide.animate( that.hideFx, that.hideFx.duration || "normal", function() { + if ( toHide.length && this.options.hide ) { + this._hide( toHide, this.options.hide, function() { eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" ); show(); }); @@ -399,31 +376,39 @@ $.widget( "ui.tabs", { }, _activate: function( index ) { - var active = this._findActive( index )[ 0 ]; + var anchor, + active = this._findActive( index ); // trying to activate the already active panel - if ( active === this.active[ 0 ] ) { + if ( active[ 0 ] === this.active[ 0 ] ) { return; } // trying to collapse, simulate a click on the current active header - active = active || this.active[ 0 ]; + if ( !active.length ) { + active = this.active; + } + anchor = active.find( ".ui-tabs-anchor" )[ 0 ]; this._eventHandler({ - target: active, - currentTarget: active, + target: anchor, + currentTarget: anchor, preventDefault: $.noop }); }, _findActive: function( selector ) { - return typeof selector === "number" ? this.anchors.eq( selector ) : - typeof selector === "string" ? this.anchors.filter( "[href$='" + selector + "']" ) : $(); + if ( typeof selector === "number" ) { + return this.lis.eq( selector ); + } + if ( typeof selector === "string" ) { + return this.anchors.filter( "[href$='" + selector + "']" ).closest( "li" ); + } + return $(); }, _getIndex: function( index ) { // meta-function to give users option to provide a href string instead of a numerical index. - // also sanitizes numerical indexes to valid values. if ( typeof index === "string" ) { index = this.anchors.index( this.anchors.filter( "[href$='" + index + "']" ) ); } @@ -441,6 +426,7 @@ $.widget( "ui.tabs", { this.list.removeClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" ); this.anchors + .removeClass( "ui-tabs-anchor" ) .unbind( ".tabs" ) .removeData( "href.tabs" ) .removeData( "load.tabs" ); @@ -513,10 +499,11 @@ $.widget( "ui.tabs", { load: function( index, event ) { index = this._getIndex( index ); var that = this, - anchor = this.anchors.eq( index ), - panel = that._getPanelForTab( anchor ), + tab = this.lis.eq( index ), + anchor = tab.find( ".ui-tabs-anchor" ), + panel = this._getPanelForTab( tab ), eventData = { - tab: anchor, + tab: tab, panel: panel }; @@ -533,27 +520,30 @@ $.widget( "ui.tabs", { } }); - if ( this.xhr ) { - this.lis.eq( index ).addClass( "ui-tabs-loading" ); + // support: jQuery <1.8 + // jQuery <1.8 returns false if the request is canceled in beforeSend, + // but as of 1.8, $.ajax() always returns a jqXHR object. + if ( this.xhr && this.xhr.statusText !== "canceled" ) { + tab.addClass( "ui-tabs-loading" ); this.xhr .success(function( response ) { - // TODO: IE resolves cached XHRs immediately - // remove when core #10467 is fixed + // support: jQuery <1.8 + // http://bugs.jquery.com/ticket/11778 setTimeout(function() { panel.html( response ); that._trigger( "load", event, eventData ); }, 1 ); }) .complete(function( jqXHR, status ) { - // TODO: IE resolves cached XHRs immediately - // remove when core #10467 is fixed + // support: jQuery <1.8 + // http://bugs.jquery.com/ticket/11778 setTimeout(function() { if ( status === "abort" ) { that.panels.stop( false, true ); } - that.lis.eq( index ).removeClass( "ui-tabs-loading" ); + tab.removeClass( "ui-tabs-loading" ); if ( jqXHR === that.xhr ) { delete that.xhr; @@ -740,10 +730,10 @@ if ( $.uiBackCompat !== false ) { .replace( /#\{label\}/g, label ) ), id = !url.indexOf( "#" ) ? url.replace( "#", "" ) : - this._tabId( li.find( "a" )[ 0 ] ); + this._tabId( li ); li.addClass( "ui-state-default ui-corner-top" ).data( "ui-tabs-destroy", true ); - li.find( "a" ).attr( "aria-controls", id ); + li.attr( "aria-controls", id ); doInsertAfter = index >= this.lis.length; @@ -786,7 +776,7 @@ if ( $.uiBackCompat !== false ) { index = this._getIndex( index ); var options = this.options, tab = this.lis.eq( index ).remove(), - panel = this._getPanelForTab( tab.find( "a[aria-controls]" ) ).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. @@ -825,8 +815,10 @@ if ( $.uiBackCompat !== false ) { idPrefix: "ui-tabs-" }, - _tabId: function( a ) { - return $( a ).attr( "aria-controls" ) || + _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(); } @@ -892,7 +884,8 @@ if ( $.uiBackCompat !== false ) { this._super(); if ( this.options.active !== false ) { this._trigger( "show", null, this._ui( - this.active[ 0 ], this._getPanelForTab( this.active )[ 0 ] ) ); + this.active.find( ".ui-tabs-anchor" )[ 0 ], + this._getPanelForTab( this.active )[ 0 ] ) ); } }, _trigger: function( type, event, data ) { @@ -902,13 +895,13 @@ if ( $.uiBackCompat !== false ) { } if ( type === "beforeActivate" && data.newTab.length ) { ret = this._super( "select", event, { - tab: data.newTab[ 0], + tab: data.newTab.find( ".ui-tabs-anchor" )[ 0], panel: data.newPanel[ 0 ], index: data.newTab.closest( "li" ).index() }); } else if ( type === "activate" && data.newTab.length ) { ret = this._super( "show", event, { - tab: data.newTab[ 0 ], + tab: data.newTab.find( ".ui-tabs-anchor" )[ 0 ], panel: data.newPanel[ 0 ], index: data.newTab.closest( "li" ).index() }); @@ -990,11 +983,81 @@ if ( $.uiBackCompat !== false ) { var _data = $.extend( {}, data ); if ( type === "load" ) { _data.panel = _data.panel[ 0 ]; - _data.tab = _data.tab[ 0 ]; + _data.tab = _data.tab.find( ".ui-tabs-anchor" )[ 0 ]; } return this._super( type, event, _data ); } }); + + // fx option + // The new animation options (show, hide) conflict with the old show callback. + // The old fx option wins over show/hide anyway (always favor back-compat). + // If a user wants to use the new animation API, they must give up the old API. + $.widget( "ui.tabs", $.ui.tabs, { + options: { + fx: null // e.g. { height: "toggle", opacity: "toggle", duration: 200 } + }, + + _getFx: function() { + var hide, show, + fx = this.options.fx; + + if ( fx ) { + if ( $.isArray( fx ) ) { + hide = fx[ 0 ]; + show = fx[ 1 ]; + } else { + hide = show = fx; + } + } + + return fx ? { show: show, hide: hide } : null; + }, + + _toggle: function( event, eventData ) { + var that = this, + toShow = eventData.newPanel, + toHide = eventData.oldPanel, + fx = this._getFx(); + + if ( !fx ) { + return this._super( event, eventData ); + } + + that.running = true; + + function complete() { + that.running = false; + that._trigger( "activate", event, eventData ); + } + + function show() { + eventData.newTab.closest( "li" ).addClass( "ui-tabs-active ui-state-active" ); + + if ( toShow.length && fx.show ) { + toShow + .animate( fx.show, fx.show.duration, function() { + complete(); + }); + } else { + toShow.show(); + complete(); + } + } + + // start out by hiding, then showing, then completing + if ( toHide.length && fx.hide ) { + toHide.animate( fx.hide, fx.hide.duration, function() { + eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" ); + show(); + }); + } else { + eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" ); + toHide.hide(); + show(); + } + } + }); } })( jQuery ); diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index 47a377bfd..1892d6555 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -14,6 +14,31 @@ var increments = 0; +function addDescribedBy( elem, id ) { + var describedby = (elem.attr( "aria-describedby" ) || "").split( /\s+/ ); + describedby.push( id ); + elem + .data( "ui-tooltip-id", id ) + .attr( "aria-describedby", $.trim( describedby.join( " " ) ) ); +} + +function removeDescribedBy( elem ) { + var id = elem.data( "ui-tooltip-id" ), + describedby = (elem.attr( "aria-describedby" ) || "").split( /\s+/ ), + index = $.inArray( id, describedby ); + if ( index !== -1 ) { + describedby.splice( index, 1 ); + } + + elem.removeData( "ui-tooltip-id" ); + describedby = $.trim( describedby.join( " " ) ); + if ( describedby ) { + elem.attr( "aria-describedby", describedby ); + } else { + elem.removeAttr( "aria-describedby" ); + } +} + $.widget( "ui.tooltip", { version: "@VERSION", options: { @@ -92,8 +117,8 @@ $.widget( "ui.tooltip", { target = $( event ? event.target : this.element ) .closest( this.options.items ); - // if aria-describedby exists, then the tooltip is already open - if ( !target.length || target.attr( "aria-describedby" ) ) { + // if ui-tooltip-id exists, then the tooltip is already open + if ( !target.length || target.data( "ui-tooltip-id" ) ) { return; } @@ -127,7 +152,7 @@ $.widget( "ui.tooltip", { // if we have a title, clear it to prevent the native tooltip // we have to check first to avoid defining a title if none exists // (we don't want to cause an element to start matching [title]) - + // // We use removeAttr only for key events, to allow IE to export the correct // accessible attributes. For mouse events, set to empty string to avoid // native tooltip showing up (happens only when removing inside mouseover). @@ -143,7 +168,7 @@ $.widget( "ui.tooltip", { var tooltip = this._find( target ); if ( !tooltip.length ) { tooltip = this._tooltip( target ); - target.attr( "aria-describedby", tooltip.attr( "id" ) ); + addDescribedBy( target, tooltip.attr( "id" ) ); } tooltip.find( ".ui-tooltip-content" ).html( content ); tooltip @@ -183,6 +208,7 @@ $.widget( "ui.tooltip", { // don't close if the element has focus // this prevents the tooltip from closing if you hover while focused + // // we have to check the event type because tabbing out of the document // may leave the element as the activeElement if ( !force && event && event.type !== "focusout" && @@ -195,7 +221,7 @@ $.widget( "ui.tooltip", { target.attr( "title", target.data( "ui-tooltip-title" ) ); } - target.removeAttr( "aria-describedby" ); + removeDescribedBy( target ); tooltip.stop( true ); this._hide( tooltip, this.options.hide, function() { @@ -232,7 +258,7 @@ $.widget( "ui.tooltip", { }, _find: function( target ) { - var id = target.attr( "aria-describedby" ); + var id = target.data( "ui-tooltip-id" ); return id ? $( "#" + id ) : $(); }, |