github/jquery-ui
1
1
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2026-05-13 03:01:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge with master

Browse Source
This commit is contained in:
Felix Nagel
2012-05-24 18:34:32 +02:00
parent ec6d88fae4 a1f604eb45
commit b30184d885
102 changed files with 1841 additions and 4798 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
.editorconfig Normal file
View File

@@ -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

218
AUTHORS.txt
View File

@@ -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>

77
README.md
View File

@@ -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.*

10
demos/accordion/custom-icons.html
View File

@@ -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>

11
demos/animate/default.html
View File

@@ -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>

8
demos/autocomplete/combobox.html
View File

@@ -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" ) ) {

4
demos/button/default.html
View File

@@ -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>

2
demos/position/default.html
View File

@@ -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

2
demos/progressbar/animated.html
View File

@@ -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() {

22
demos/spinner/default.html
View File

@@ -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" ) );

4
demos/tabs/manipulation.html
View File

@@ -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" );
});
});

33
demos/toggle/default.html
View File

@@ -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();

11
demos/widget/default.html
View File

@@ -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

28
grunt.js
View File

@@ -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" );

21
tests/index.css Normal file
View File

@@ -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;
}

35
tests/index.html
View File

@@ -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>

10
tests/index.js Normal file
View File

@@ -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" );
});

161
tests/static/button/default.html
View File

@@ -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>

1367
tests/static/datepicker/datepicker.html
View File

File diff suppressed because it is too large Load Diff

86
tests/static/datepicker/default.html
View File

@@ -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>

314
tests/static/icons.html
View File

@@ -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>

1
tests/static/static.css
View File

@@ -1 +0,0 @@
body { font-size: 62.5%; }

9
tests/static/static.js
View File

@@ -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'); }
);
});

4
tests/unit/autocomplete/autocomplete_common.js
View File

@@ -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",

37
tests/unit/autocomplete/autocomplete_core.js
View File

@@ -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 ) );

6
tests/unit/button/button_core.js
View File

@@ -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)") );

4
tests/unit/button/button_options.js
View File

@@ -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() {

12
tests/unit/button/button_tickets.js
View File

@@ -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" ) );
});

2
tests/unit/draggable/draggable_common.js
View File

@@ -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",

2
tests/unit/draggable/draggable_events.js
View File

@@ -5,7 +5,7 @@
module("draggable: events");
test("callbacks occurance count", function() {
test("callbacks occurrence count", function() {
expect(3);

8
tests/unit/draggable/draggable_options.js
View File

@@ -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");

36
tests/unit/index.html
View File

@@ -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>

2
tests/unit/menu/menu.html
View File

@@ -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>

1
tests/unit/menu/menu_common.js
View File

@@ -6,6 +6,7 @@ TestHelpers.commonWidgetTests( "menu", {
my: "left top",
at: "right top"
},
role: "menu",
// callbacks
blur: null,

13
tests/unit/menu/menu_core.js
View File

@@ -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);

143
tests/unit/menu/menu_events.js
View File

@@ -41,50 +41,63 @@ 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'" );
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'" );
}
}
});
},
blur: function( event, ui ) {
equal( event.originalEvent.type, "click", "blur triggered 'click'" );
equal( event.type, "menublur", "blur event.type is 'menublur'" );
click( $menu, "1" );
setTimeout( function() {
$menu.blur();
start();
}, 350);
});
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 focus of menu with active item", function() {
expect( 1 );
var element = $( "#menu1" ).menu({
focus: function( event, ui ) {
log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
}
});
$menu.find( "li a:first" ).trigger( "click" );
$( "<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");
});
test( "handle blur on custom item menu: click", function() {
expect( 4 );
var $menu = $( "#menu5" ).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"
});
click($('#menu5'),"1");
$( "<a>", { id: "remove"} ).appendTo("body").trigger( "click" );
$("#remove").remove();
});
*/
asyncTest( "handle submenu auto collapse: mouseleave", function() {
expect( 4 );
var $menu = $( "#menu2" ).menu(),
@@ -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);

6
tests/unit/menu/menu_methods.js
View File

@@ -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");
});
});

26
tests/unit/menu/menu_options.js
View File

@@ -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);

2
tests/unit/resizable/resizable_common.js
View File

@@ -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,

2
tests/unit/selectable/selectable_common.js
View File

@@ -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,

2
tests/unit/slider/slider_common.js
View File

@@ -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,

2
tests/unit/sortable/sortable_common.js
View File

@@ -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",

2
tests/unit/sortable/sortable_options.js
View File

@@ -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.");
});

2
tests/unit/tabs/tabs.html
View File

@@ -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>

3
tests/unit/tabs/tabs_common.js
View File

@@ -4,7 +4,8 @@ TestHelpers.commonWidgetTests( "tabs", {
collapsible: false,
disabled: false,
event: "click",
fx: null,
hide: null,
show: null,
// callbacks
activate: null,

2
tests/unit/tabs/tabs_common_deprecated.js
View File

@@ -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&#8230;</em>",
tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>",

13
tests/unit/tabs/tabs_core.js
View File

@@ -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 );
});

2
tests/unit/tabs/tabs_deprecated.html
View File

@@ -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>

61
tests/unit/tabs/tabs_deprecated.js
View File

@@ -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 );

28
tests/unit/tabs/tabs_events.js
View File

@@ -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();
}
});
}

22
tests/unit/tabs/tabs_methods.js
View File

@@ -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 );

18
tests/unit/tabs/tabs_options.js
View File

@@ -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 );
});

2
tests/unit/tabs/tabs_test_helpers.js
View File

@@ -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";

1
tests/unit/tooltip/tooltip.html
View File

@@ -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>

25
tests/unit/tooltip/tooltip_core.js
View File

@@ -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 ) );

2
tests/unit/tooltip/tooltip_events.js
View File

@@ -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" );

6
tests/unit/tooltip/tooltip_methods.js
View File

@@ -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;
});

16
tests/unit/tooltip/tooltip_options.js
View File

@@ -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 ) );

0
tests/visual/accordion/accordion.html → tests/visual/accordion/icons.html
View File

2
tests/visual/addClass/addClass_queue.html → tests/visual/addClass/queue.html
View File

@@ -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>

188
tests/visual/button/button.html
View File

@@ -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 id="toggle" style="margin-top: 2em;">
<input type="checkbox" id="check" /><label for="check">Toggle</label>
<div class="buttons">
<button type="button">button button</button>
<button type="button">button button</button>
<button type="button">button button</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>
<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">
<button type="submit">button submit</button>
<button type="submit">button submit</button>
<button type="submit">button submit</button>
</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="button" value="input button">
<input type="button" value="input button">
<input type="button" value="input button">
</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="submit" value="input submit">
<input type="submit" value="input submit">
<input type="submit" value="input submit">
</div>
<div style="margin-top: 2em;">
<button id="disable-widgets">Toggle disabled</button>
<button id="toggle-widgets">Toggle widget</button>
<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 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 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>

84
tests/visual/button/button_disabled_true.html
View File

@@ -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>

555
tests/visual/button/button_performance.html
View File

@@ -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>

42
tests/visual/button/button_ticket_5261.html
View File

@@ -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>

58
tests/visual/button/button_ticket_5278.html
View File

@@ -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>

26
tests/visual/button/performance.html Normal file
View File

@@ -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>

6
tests/visual/dialog/dialog_on_page_with_large_dom.html → tests/visual/dialog/performance.html
View File

@@ -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>

10
tests/visual/effects/effects.all.html → tests/visual/effects/all.html
View File

@@ -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>

106
tests/visual/effects/effects.all.js
View File

@@ -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);
});
});

12
tests/visual/effects/effects.all.css → tests/visual/effects/effects.css
View File

@@ -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;
}

107
tests/visual/effects/effects.js vendored Normal file
View File

@@ -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 );
});
});

8
tests/visual/effects/effects.scale.html → tests/visual/effects/scale.html
View File

@@ -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;

82
tests/visual/index.html Normal file
View File

@@ -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>

267
tests/visual/menu/drilldown.html
View File

@@ -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>

76
tests/visual/menu/menu.html
View File

@@ -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>

68
tests/visual/menu/tablemenu.html
View File

@@ -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>

204
tests/visual/position/position.html
View File

@@ -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: "↑";
.demo {
position: relative;
height: 500px;
width: 80%;
margin: 20px auto;
background: #eee;
}
#target {
width: 60%;
margin: 0 auto;
border: 1px solid #777;
background-color: #fbca93;
text-align: center;
cursor: move;
}
.positionable {
position: absolute;
top: -22px;
left: 5px;
background-color: #bcd5e6;
text-align: center;
}
.right:before {
left: auto;
right: 5px;
}
.bottom:before {
content: "↓";
top: auto;
bottom: -19px;
.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>
<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: 75px; height: 75px;">
<p>to position</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>
<div class="positionable" style="width:120px; height: 40px;">
<p>to position 2</p>
</div>
<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>

4
tests/visual/position/position_feedback.html
View File

@@ -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;

109
tests/visual/position/position_feedback_rotate.html
View File

@@ -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>

147
tests/visual/position/position_fit.html
View File

@@ -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>

76
tests/visual/position/position_flip.html
View File

@@ -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>

85
tests/visual/position/position_flipfit.html
View File

@@ -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>

42
tests/visual/position/position_margin.html
View File

@@ -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>

200
tests/visual/position/position_within.html
View File

@@ -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>

2
tests/visual/tooltip/ajaxcontent.php
View File

@@ -1,2 +0,0 @@
<?php sleep(1); ?>
<strong>Hello</strong> world!

122
tests/visual/tooltip/animations.html
View File

@@ -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>

308
tests/visual/tooltip/tooltip.html
View File

@@ -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();
// default
$( "#context1, form, #childish, #nested-input" ).tooltip();
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"
}
});
$("#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"
}
});
}
enable();
$("#disable").toggle(function() {
$(":ui-tooltip").tooltip("disable");
}, function() {
$(":ui-tooltip").tooltip("enable");
// custom class, replaces ui-widget-content
$( "#context2" ).tooltip({
tooltipClass: "ui-widget-header"
});
$("#toggle").toggle(function() {
$(":ui-tooltip").tooltip("destroy");
}, function() {
enable();
$( "#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;
}
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
});
$( "#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 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="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>
<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>
<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 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="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>
<form style="margin: 2em 0;">
<div>
<label for="first">First Name:</label>
<input id="first" title="Your first name is optional" />
<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>
<label for="last">Last Name:</label>
<input id="last" title="Your last name is optional" />
<div id="async2" style="width: 100px;" class="ui-widget-content" title="never be seen">
async + cache
</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>
</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" 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>
<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 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>
<button id="disable">Toggle disabled</button>
<button id="toggle">Toggle widget</button>
<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>
<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 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>
<div style="height: 2000px"></div>

3
themes/base/jquery.ui.accordion.css vendored
View File

@@ -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; }

18
ui/i18n/jquery.ui.datepicker-eu.js vendored
View File

@@ -6,15 +6,15 @@ jQuery(function($){
prevText: '&#x3C;Aur',
nextText: 'Hur&#x3E;',
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,

12
ui/jquery.effects.core.js vendored
View File

@@ -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);
}

14
ui/jquery.ui.accordion.js vendored
View File

@@ -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 );

112
ui/jquery.ui.autocomplete.js vendored
View File

@@ -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 ));

11
ui/jquery.ui.button.js vendored
View File

@@ -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() {

81
ui/jquery.ui.core.js vendored
View File

@@ -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;
}
$.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" );
});
};
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[ "outer" + name] = function( size, margin ) {
if ( typeof size !== "number" ) {
return orig[ "outer" + name ].call( this, size );
}
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" );
});
};
$.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 ) {

24
ui/jquery.ui.dialog.js vendored
View File

@@ -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" );
}

85
ui/jquery.ui.menu.js vendored
View File

@@ -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
);

2
ui/jquery.ui.mouse.js vendored
View File

@@ -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
},

6
ui/jquery.ui.resizable.js vendored
View File

@@ -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");

5
ui/jquery.ui.slider.js vendored
View File

@@ -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() {

3
ui/jquery.ui.sortable.js vendored
View File

@@ -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';
}
}

Some files were not shown because too many files have changed in this diff Show More