Merge branch 'selectmenu' of github.com:jquery/jquery-ui into selectmenu

This commit is contained in:
Felix Nagel 2013-11-26 00:18:25 +01:00
commit 5bc7fc2b1a
41 changed files with 60011 additions and 3272 deletions

23
.jscs.json Normal file
View File

@ -0,0 +1,23 @@
{
"requireCurlyBraces": [ "if", "else", "for", "while", "do" ],
"requireSpaceAfterKeywords": [ "if", "else", "for", "while", "do", "switch", "return" ],
"requireSpacesInFunctionExpression": {
"beforeOpeningCurlyBrace": true
},
"disallowSpacesInFunctionExpression": {
"beforeOpeningRoundBrace": true
},
"requireMultipleVarDecl": true,
"requireSpacesInsideObjectBrackets": "all",
"requireSpacesInsideArrayBrackets": "all",
"disallowLeftStickedOperators": [ "?", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<=" ],
"disallowRightStickedOperators": [ "?", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
"requireRightStickedOperators": [ "!" ],
"requireLeftStickedOperators": [ "," ],
"disallowKeywords": [ "with" ],
"disallowMultipleLineBreaks": true,
"disallowKeywordsOnNewLine": [ "else" ],
"requireLineFeedAtFileEnd": true,
"excludeFiles": [ "src/intro.js", "src/outro.js" ]
}

View File

@ -106,6 +106,7 @@ grunt.loadNpmTasks( "grunt-contrib-uglify" );
grunt.loadNpmTasks( "grunt-contrib-concat" ); grunt.loadNpmTasks( "grunt-contrib-concat" );
grunt.loadNpmTasks( "grunt-contrib-qunit" ); grunt.loadNpmTasks( "grunt-contrib-qunit" );
grunt.loadNpmTasks( "grunt-contrib-csslint" ); grunt.loadNpmTasks( "grunt-contrib-csslint" );
grunt.loadNpmTasks( "grunt-jscs-checker" );
grunt.loadNpmTasks( "grunt-html" ); grunt.loadNpmTasks( "grunt-html" );
grunt.loadNpmTasks( "grunt-compare-size" ); grunt.loadNpmTasks( "grunt-compare-size" );
grunt.loadNpmTasks( "grunt-git-authors" ); grunt.loadNpmTasks( "grunt-git-authors" );
@ -162,6 +163,13 @@ grunt.initConfig({
dest: "dist/jquery-ui.css" dest: "dist/jquery-ui.css"
} }
}, },
jscs: {
// datepicker, sortable, resizable and draggable are getting rewritten, ignore until that's done
ui: [ "ui/jquery.ui.*.js", "!ui/jquery.ui.datepicker.js", "!ui/jquery.ui.sortable.js", "!ui/jquery.ui.resizable.js", "!ui/jquery.ui.draggable.js" ],
// TODO enable this once we have a tool that can help with fixing formatting of existing files
// tests: "tests/unit/**/*.js",
grunt: "Gruntfile.js"
},
uglify: minify, uglify: minify,
htmllint: { htmllint: {
// ignore files that contain invalid html, used only for ajax content testing // ignore files that contain invalid html, used only for ajax content testing
@ -198,7 +206,7 @@ grunt.initConfig({
}); });
grunt.registerTask( "default", [ "lint", "test" ] ); grunt.registerTask( "default", [ "lint", "test" ] );
grunt.registerTask( "lint", [ "asciilint", "jshint", "csslint", "htmllint" ] ); grunt.registerTask( "lint", [ "asciilint", "jshint", "jscs", "csslint", "htmllint" ] );
grunt.registerTask( "test", [ "qunit" ] ); grunt.registerTask( "test", [ "qunit" ] );
grunt.registerTask( "sizer", [ "concat:ui", "uglify:main", "compare_size:all" ] ); grunt.registerTask( "sizer", [ "concat:ui", "uglify:main", "compare_size:all" ] );
grunt.registerTask( "sizer_all", [ "concat:ui", "uglify", "compare_size" ] ); grunt.registerTask( "sizer_all", [ "concat:ui", "uglify", "compare_size" ] );

View File

@ -23,7 +23,7 @@
$.widget( "custom.catcomplete", $.ui.autocomplete, { $.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() { _create: function() {
this._super(); this._super();
this.menu.option( "items", "> :not(.ui-autocomplete-category)" ); this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
}, },
_renderMenu: function( ul, items ) { _renderMenu: function( ul, items ) {
var that = this, var that = this,

View File

@ -11,7 +11,6 @@
<script src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>

View File

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Default functionality</title> <title>jQuery UI Selectmenu - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.10.2.js"></script> <script src="../../jquery-1.10.2.js"></script>

View File

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Default functionality</title> <title>jQuery UI Selectmenu - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.10.2.js"></script> <script src="../../jquery-1.10.2.js"></script>
@ -90,7 +91,7 @@
<option value="19">19</option> <option value="19">19</option>
</select> </select>
</fieldset> </fieldset>
</form> </form>
</div> </div>

View File

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu Demos</title> <title>jQuery UI Selectmenu Demos</title>
</head> </head>
<body> <body>

View File

@ -51,7 +51,7 @@
<div id="map"></div> <div id="map"></div>
<div class="demo-description"> <div class="demo-description">
<p>Google Maps integration, using spinners to change latidude and longitude.</p> <p>Google Maps integration, using spinners to change latitude and longitude.</p>
</div> </div>
</body> </body>
</html> </html>

View File

@ -29,7 +29,7 @@
var tabs = $( "#tabs" ).tabs(); var tabs = $( "#tabs" ).tabs();
// modal dialog init: custom buttons and a "close" callback reseting the form inside // modal dialog init: custom buttons and a "close" callback resetting the form inside
var dialog = $( "#dialog" ).dialog({ var dialog = $( "#dialog" ).dialog({
autoOpen: false, autoOpen: false,
modal: true, modal: true,

View File

@ -107,7 +107,7 @@
<button class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button> <button class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button>
</div> </div>
<button title="Share this video">Share</button> <button title="Share this video">Share</button>
<button data-icon="ui-icon-alert">Flag as inappropiate</button> <button data-icon="ui-icon-alert">Flag as inappropriate</button>
</div> </div>
<div class="demo-description"> <div class="demo-description">

View File

@ -149,7 +149,7 @@
} }
}); });
// click to set options after initalization // click to set options after initialization
$( "#black" ).click( function() { $( "#black" ).click( function() {
$( ":custom-colorize" ).colorize( "option", { $( ":custom-colorize" ).colorize( "option", {
red: 0, red: 0,

61905
external/jshint.js vendored

File diff suppressed because it is too large Load Diff

View File

@ -63,6 +63,7 @@
"grunt-contrib-qunit": "0.2.0", "grunt-contrib-qunit": "0.2.0",
"grunt-contrib-csslint": "0.1.1", "grunt-contrib-csslint": "0.1.1",
"grunt-compare-size": "0.4.0-rc.3", "grunt-compare-size": "0.4.0-rc.3",
"grunt-jscs-checker": "0.2.0",
"grunt-html": "0.3.3", "grunt-html": "0.3.3",
"grunt-git-authors": "1.2.0", "grunt-git-authors": "1.2.0",
"rimraf": "2.1.4", "rimraf": "2.1.4",

View File

@ -14,6 +14,7 @@
"unused": true, "unused": true,
"browser": true, "browser": true,
"es3": true,
"evil": true, "evil": true,
"jquery": true, "jquery": true,

View File

@ -3,8 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Tests</title> <title>jQuery UI Tests</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.core.css"> <link rel="stylesheet" href="../themes/base/jquery.ui.core.css">
<link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css"> <link rel="stylesheet" href="../themes/base/jquery.ui.theme.css">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<script src="jquery-1.10.2.js"></script> <script src="jquery-1.10.2.js"></script>
<script src="index.js"></script> <script src="index.js"></script>
@ -18,7 +18,7 @@
<p><a href="unit/index.html">Unit tests</a> exist for all functionality in jQuery UI. <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) The unit tests can be run locally (some tests require a web server with PHP)
to ensure proper functionality before committing changes. to ensure proper functionality before committing changes.
The unit tests are also run on <a href="http://swarm.jquery.com/user/jqueryui">TestSwarm</a> The unit tests are also run on <a href="http://swarm.jquery.org/project/jqueryui">TestSwarm</a>
for every commit.</p> for every commit.</p>
<h2>Visual Tests</h2> <h2>Visual Tests</h2>

View File

@ -52,6 +52,8 @@
<div id="dialog1"></div> <div id="dialog1"></div>
<div id="dialog2"></div> <div id="dialog2"></div>
<div id="form-dialog" title="Profile Information"> <div id="form-dialog" title="Profile Information">
<!-- create a spacer to ensure there's enough space to scroll -->
<div style="height: 250px;">...</div>
<fieldset> <fieldset>
<legend>Please share some personal information</legend> <legend>Please share some personal information</legend>
<label for="favorite-animal">Your favorite animal</label><input id="favorite-animal"> <label for="favorite-animal">Your favorite animal</label><input id="favorite-animal">

View File

@ -4,6 +4,7 @@
(function($) { (function($) {
// TODO add teardown callback to remove dialogs
module("dialog: core"); module("dialog: core");
test("title id", function() { test("title id", function() {
@ -40,7 +41,7 @@ test("widget method", function() {
}); });
asyncTest( "focus tabbable", function() { asyncTest( "focus tabbable", function() {
expect( 5 ); expect( 6 );
var element, var element,
options = { options = {
buttons: [{ buttons: [{
@ -50,6 +51,12 @@ asyncTest( "focus tabbable", function() {
}; };
function checkFocus( markup, options, testFn, next ) { function checkFocus( markup, options, testFn, next ) {
// Support: IE8
// For some reason the focus doesn't get set properly if we don't
// focus the body first.
$( "body" ).focus();
element = $( markup ).dialog( options ); element = $( markup ).dialog( options );
setTimeout(function() { setTimeout(function() {
testFn(); testFn();
@ -59,43 +66,57 @@ asyncTest( "focus tabbable", function() {
} }
function step1() { function step1() {
checkFocus( "<div><input><input autofocus></div>", options, function() { element = $( "<div><input><input></div>" ).dialog( options );
equal( document.activeElement, element.find( "input" )[ 1 ], setTimeout(function() {
"1. first element inside the dialog matching [autofocus]" ); var input = element.find( "input:last" ).focus().blur();
}, step2 ); element.dialog( "instance" )._focusTabbable();
setTimeout(function() {
equal( document.activeElement, input[ 0 ],
"1. an element that was focused previously." );
element.remove();
setTimeout( step2 );
});
});
} }
function step2() { function step2() {
checkFocus( "<div><input><input></div>", options, function() { checkFocus( "<div><input><input autofocus></div>", options, function() {
equal( document.activeElement, element.find( "input" )[ 0 ], equal( document.activeElement, element.find( "input" )[ 1 ],
"2. tabbable element inside the content element" ); "2. first element inside the dialog matching [autofocus]" );
}, step3 ); }, step3 );
} }
function step3() { function step3() {
checkFocus( "<div>text</div>", options, function() { checkFocus( "<div><input><input></div>", options, function() {
equal( document.activeElement, equal( document.activeElement, element.find( "input" )[ 0 ],
element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" )[ 0 ], "3. tabbable element inside the content element" );
"3. tabbable element inside the buttonpane" );
}, step4 ); }, step4 );
} }
function step4() { function step4() {
checkFocus( "<div>text</div>", {}, function() { checkFocus( "<div>text</div>", options, function() {
equal( document.activeElement, equal( document.activeElement,
element.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ], element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" )[ 0 ],
"4. the close button" ); "4. tabbable element inside the buttonpane" );
}, step5 ); }, step5 );
} }
function step5() { function step5() {
checkFocus( "<div>text</div>", {}, function() {
equal( document.activeElement,
element.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ],
"5. the close button" );
}, step6 );
}
function step6() {
element = $( "<div>text</div>" ).dialog({ element = $( "<div>text</div>" ).dialog({
autoOpen: false autoOpen: false
}); });
element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide(); element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide();
element.dialog( "open" ); element.dialog( "open" );
setTimeout(function() { setTimeout(function() {
equal( document.activeElement, element.parent()[ 0 ], "5. the dialog itself" ); equal( document.activeElement, element.parent()[ 0 ], "6. the dialog itself" );
element.remove(); element.remove();
start(); start();
}); });
@ -160,4 +181,51 @@ asyncTest( "#9048: multiple modal dialogs opened and closed in different order",
start(); start();
}); });
}); });
asyncTest( "interaction between overlay and other dialogs", function() {
$.widget( "ui.testWidget", $.ui.dialog, {
options: {
modal: true,
autoOpen: false
}
});
expect( 2 );
var first = $( "<div><input id='input-1'></div>" ).dialog({
modal: true
}),
firstInput = first.find( "input" ),
second = $( "<div><input id='input-2'></div>" ).testWidget(),
secondInput = second.find( "input" );
// Support: IE8
// For some reason the focus doesn't get set properly if we don't
// focus the body first.
$( "body" ).focus();
// Wait for the modal to init
setTimeout(function() {
second.testWidget( "open" );
// Simulate user tabbing from address bar to an element outside the dialog
$( "#favorite-animal" ).focus();
setTimeout(function() {
equal( document.activeElement, secondInput[ 0 ] );
// Last active dialog must receive focus
firstInput.focus();
$( "#favorite-animal" ).focus();
setTimeout(function() {
equal( document.activeElement, firstInput[ 0 ] );
// Cleanup
first.remove();
second.remove();
delete $.ui.testWidget;
delete $.fn.testWidget;
start();
});
});
});
});
})(jQuery); })(jQuery);

View File

@ -220,6 +220,11 @@ asyncTest( "#8958: dialog can be opened while opening", function() {
} }
}); });
// Support: IE8
// For some reason the #favorite-color input doesn't get focus if we don't
// focus the body first, causing the test to hang.
$( "body" ).focus();
$( "#favorite-animal" ) $( "#favorite-animal" )
// We focus the input to start the test. Once it receives focus, the // We focus the input to start the test. Once it receives focus, the
// dialog will open. Opening the dialog, will cause an element inside // dialog will open. Opening the dialog, will cause an element inside

View File

@ -31,6 +31,10 @@
<style> <style>
.ui-menu { .ui-menu {
font-size: 15px; font-size: 15px;
line-height: 15px;
}
.ui-menu .ui-menu-item {
padding: 0;
} }
#menu3 { #menu3 {
height: 250px; height: 250px;

View File

@ -7,7 +7,7 @@ TestHelpers.commonWidgetTests( "menu", {
items: "> *", items: "> *",
menus: "ul", menus: "ul",
position: { position: {
my: "left top", my: "left-1 top",
at: "right top" at: "right top"
}, },
role: "menu", role: "menu",

View File

@ -389,15 +389,15 @@ asyncTest( "handle keyboard navigation on menu with scroll and without submenus"
log( "keydown", true ); log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
equal( logOutput(), "keydown,10", "Keydown PAGE_DOWN" ); equal( logOutput(), "keydown,17", "Keydown PAGE_DOWN" );
log( "keydown", true ); log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
equal( logOutput(), "keydown,20", "Keydown PAGE_DOWN" ); equal( logOutput(), "keydown,34", "Keydown PAGE_DOWN" );
log( "keydown", true ); log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } );
equal( logOutput(), "keydown,10", "Keydown PAGE_UP" ); equal( logOutput(), "keydown,17", "Keydown PAGE_UP" );
log( "keydown", true ); log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } );
@ -484,11 +484,11 @@ asyncTest( "handle keyboard navigation on menu with scroll and with submenus", f
function menukeyboard3() { function menukeyboard3() {
log( "keydown", true ); log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
equal( logOutput(), "keydown,10", "Keydown PAGE_DOWN" ); equal( logOutput(), "keydown,17", "Keydown PAGE_DOWN" );
log( "keydown", true ); log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
equal( logOutput(), "keydown,20", "Keydown PAGE_DOWN" ); equal( logOutput(), "keydown,27", "Keydown PAGE_DOWN" );
log( "keydown", true ); log( "keydown", true );
element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } );

View File

@ -66,13 +66,12 @@ test( "{ icons: { submenu: 'custom' } }", function() {
test( "{ role: 'menu' } ", function() { test( "{ role: 'menu' } ", function() {
var element = $( "#menu1" ).menu(), var element = $( "#menu1" ).menu(),
items = element.find( "li" ); items = element.find( "li" );
expect( 2 + 4 * items.length ); expect( 2 + 3 * items.length );
equal( element.attr( "role" ), "menu" ); equal( element.attr( "role" ), "menu" );
ok( items.length > 0, "number of menu items" ); ok( items.length > 0, "number of menu items" );
items.each(function( item ) { items.each(function( item ) {
ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" );
equal( $( this ).attr( "role" ), "menuitem", "menu item ("+ item + ") role" ); equal( $( this ).attr( "role" ), "menuitem", "menu item ("+ item + ") role" );
ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" );
equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
}); });
}); });
@ -82,13 +81,12 @@ test( "{ role: 'listbox' } ", function() {
role: "listbox" role: "listbox"
}), }),
items = element.find( "li" ); items = element.find( "li" );
expect( 2 + 4 * items.length ); expect( 2 + 3 * items.length );
equal( element.attr( "role" ), "listbox" ); equal( element.attr( "role" ), "listbox" );
ok( items.length > 0, "number of menu items" ); ok( items.length > 0, "number of menu items" );
items.each(function( item ) { items.each(function( item ) {
ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" );
equal( $( this ).attr( "role" ), "option", "menu item ("+ item + ") role" ); equal( $( this ).attr( "role" ), "option", "menu item ("+ item + ") role" );
ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" );
equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
}); });
}); });
@ -98,13 +96,12 @@ test( "{ role: null }", function() {
role: null role: null
}), }),
items = element.find( "li" ); items = element.find( "li" );
expect( 2 + 4 * items.length ); expect( 2 + 3 * items.length );
strictEqual( element.attr( "role" ), undefined ); strictEqual( element.attr( "role" ), undefined );
ok( items.length > 0, "number of menu items" ); ok( items.length > 0, "number of menu items" );
items.each(function( item ) { items.each(function( item ) {
ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" );
equal( $( this ).attr( "role" ), undefined, "menu item ("+ item + ") role" ); equal( $( this ).attr( "role" ), undefined, "menu item ("+ item + ") role" );
ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" );
equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
}); });
}); });

View File

@ -59,7 +59,9 @@ QUnit.config.urlConfig.push({
jshintLoaded = false; jshintLoaded = false;
TestHelpers.testJshint = function( module ) { TestHelpers.testJshint = function( module ) {
if ( QUnit.urlParams.nojshint ) { // Function.prototype.bind check is needed because JSHint doesn't work in ES3 browsers anymore
// https://github.com/jshint/jshint/issues/1384
if ( QUnit.urlParams.nojshint || !Function.prototype.bind ) {
return; return;
} }

View File

@ -1,532 +1,525 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Example Page</title> <title>jQuery UI Example Page</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css"> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.10.2.js"></script> <script src="../../jquery-1.10.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> <script src="../../ui/jquery.ui.accordion.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> <script src="../../ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> <script src="../../ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> <script src="../../ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script> <script src="../../ui/jquery.ui.progressbar.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.selectable.js"></script> <script src="../../ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> <script src="../../ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> <script src="../../ui/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script>
<script type="text/javascript"> <script>
$(function(){ $(function(){
// Accordion // Accordion
$(".accordion").accordion({ header: "h3" }); $(".accordion").accordion({ header: "h3" });
$(".accordion").last().accordion("option", "icons", false); $(".accordion").last().accordion("option", "icons", false);
// Tabs
$('#tabs').tabs();
// Tabs // Dialog
$('#tabs').tabs(); $('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
// Dialog // Datepicker
$('#dialog').dialog({ $('#datepicker').datepicker({
autoOpen: false, inline: true,
width: 600, showWeek: true
buttons: { });
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link $('#multidatepicker').datepicker({
$('#dialog_link').click(function(){ numberOfMonths: 3,
$('#dialog').dialog('open'); showButtonPanel: true,
return false; inline: true
}); });
// Datepicker // Slider
$('#datepicker').datepicker({ $('.slider').slider({
inline: true, range: true,
showWeek: true values: [17, 67]
}); });
$('#multidatepicker').datepicker({
numberOfMonths: 3,
showButtonPanel: true,
inline: true
});
// Slider
$('.slider').slider({
range: true,
values: [17, 67]
});
$("#eq > span").each(function() {
var value = parseInt($(this).text());
$(this).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
// Progressbar
$("#progressbar").progressbar({
value: 20
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
$(".buttonset > button").button()
.next()
.button({
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
})
.parent()
.buttonset();
$('#beginning').button({
text: false,
icons: {
primary: 'ui-icon-seek-start'
}
});
$('#rewind').button({
text: false,
icons: {
primary: 'ui-icon-seek-prev'
}
});
$('#play').button({
text: false,
icons: {
primary: 'ui-icon-play'
}
});
$('#stop').button({
text: false,
icons: {
primary: 'ui-icon-stop'
}
});
$('#forward').button({
text: false,
icons: {
primary: 'ui-icon-seek-next'
}
});
$('#end').button({
text: false,
icons: {
primary: 'ui-icon-seek-end'
}
});
$("#shuffle").button();
$("#repeat").buttonset();
$("#eq > span").each(function() {
var value = parseInt($(this).text());
$(this).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
}); });
</script> });
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; clear:both; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
.columnbox { height: 150px; width: 48%; float:left; margin-right: 1%; }
#eq span { height:120px; float:left; margin:15px }
.buttonset {margin-bottom: 5px; }
#toolbar { padding: 10px 4px; }
</style>
</head>
<body>
<!-- <p style="font-size: 1.3em; line-height: 1.5; margin: 1em 0; width: 50%;">This page demonstrates the widgets using a theme.</p> -->
<div id="switcher" style="position:absolute; right: 20px; top: 20px;"></div>
<!-- Accordion --> // Progressbar
<h2 class="demoHeaders">Accordion</h2> $("#progressbar").progressbar({
<div class="columnbox"> value: 20
<div class="accordion"> });
<div>
<h3><a href="#">First</a></h3> //hover states on the static widgets
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> $('#dialog_link, ul#icons li').hover(
</div> function() { $(this).addClass('ui-state-hover'); },
<div> function() { $(this).removeClass('ui-state-hover'); }
<h3><a href="#">Second</a></h3> );
<div>Phasellus mattis tincidunt nibh.</div>
</div> $(".buttonset > button").button()
<div> .next()
<h3><a href="#">Third</a></h3> .button({
<div>Nam dui erat, auctor a, dignissim quis.</div> text: false,
</div> icons: {
</div> primary: "ui-icon-triangle-1-s"
}
})
.parent()
.buttonset();
$('#beginning').button({
text: false,
icons: {
primary: 'ui-icon-seek-start'
}
});
$('#rewind').button({
text: false,
icons: {
primary: 'ui-icon-seek-prev'
}
});
$('#play').button({
text: false,
icons: {
primary: 'ui-icon-play'
}
});
$('#stop').button({
text: false,
icons: {
primary: 'ui-icon-stop'
}
});
$('#forward').button({
text: false,
icons: {
primary: 'ui-icon-seek-next'
}
});
$('#end').button({
text: false,
icons: {
primary: 'ui-icon-seek-end'
}
});
$("#shuffle").button();
$("#repeat").buttonset();
});
</script>
<style>
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; clear:both; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
.columnbox { height: 150px; width: 48%; float:left; margin-right: 1%; }
#eq span { height:120px; float:left; margin:15px }
.buttonset {margin-bottom: 5px; }
#toolbar { padding: 10px 4px; }
</style>
</head>
<body>
<div id="switcher" style="position:absolute; right: 20px; top: 20px;"></div>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div class="columnbox">
<div class="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div> </div>
<div class="columnbox"> <div>
<div class="accordion"> <h3><a href="#">Second</a></h3>
<div> <div>Phasellus mattis tincidunt nibh.</div>
<h3><a href="#">First no icons</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second no icons</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third no icons</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</div> </div>
<div>
<h3><a href="#">Third</a></h3>
<!-- Tabs --> <div>Nam dui erat, auctor a, dignissim quis.</div>
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div> </div>
</div>
<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller--> </div>
<h2 class="demoHeaders">Dialog</h2> <div class="columnbox">
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p> <div class="accordion">
<div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" ><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title">Inline Dialog</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" ><span class="ui-icon ui-icon-closethick" >close</span></a></div><div class="ui-dialog-content ui-widget-content" > <h3><a href="#">First no icons</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div><div class="ui-resizable-handle ui-resizable-n" ></div><div class="ui-resizable-handle ui-resizable-e" ></div><div class="ui-resizable-handle ui-resizable-s" ></div><div class="ui-resizable-handle ui-resizable-w" ></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" ></div><div class="ui-resizable-handle ui-resizable-sw" ></div><div class="ui-resizable-handle ui-resizable-ne" ></div><div class="ui-resizable-handle ui-resizable-nw" ></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Ok</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button></div></div>
<h2 class="demoHeaders">Overlay and Shadow Classes <em>(not currently used in UI widgets)</em></h2>
<div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;" class="fakewindowcontain">
<p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p>
<!-- ui-dialog -->
<div class="ui-overlay"><div class="ui-widget-overlay"></div><div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;"></div></div>
<div style="position: absolute; width: 280px; height: 130px;left: 50px; top: 30px; padding: 10px;" class="ui-widget ui-widget-content ui-corner-all">
<div class="ui-dialog-content ui-widget-content" style="background: none; border: 0;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div> </div>
<div>
<h3><a href="#">Second no icons</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third no icons</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</div>
<!-- ui-dialog --> <!-- Tabs -->
<div id="dialog" title="Dialog Title"> <h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
<h2 class="demoHeaders">Dialog</h2>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" ><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title">Inline Dialog</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" ><span class="ui-icon ui-icon-closethick" >close</span></a></div><div class="ui-dialog-content ui-widget-content" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><div class="ui-resizable-handle ui-resizable-n" ></div><div class="ui-resizable-handle ui-resizable-e" ></div><div class="ui-resizable-handle ui-resizable-s" ></div><div class="ui-resizable-handle ui-resizable-w" ></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" ></div><div class="ui-resizable-handle ui-resizable-sw" ></div><div class="ui-resizable-handle ui-resizable-ne" ></div><div class="ui-resizable-handle ui-resizable-nw" ></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Ok</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button></div></div>
<h2 class="demoHeaders">Overlay and Shadow Classes <em>(not currently used in UI widgets)</em></h2>
<div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;" class="fakewindowcontain">
<p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p>
<!-- ui-dialog -->
<div class="ui-overlay"><div class="ui-widget-overlay"></div><div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;"></div></div>
<div style="position: absolute; width: 280px; height: 130px;left: 50px; top: 30px; padding: 10px;" class="ui-widget ui-widget-content ui-corner-all">
<div class="ui-dialog-content ui-widget-content" style="background: none; border: 0;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div> </div>
</div>
</div>
<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h2 class="demoHeaders">Framework Icons (content color preview)</h2> <h2 class="demoHeaders">Framework Icons (content color preview)</h2>
<ul id="icons" class="ui-widget ui-helper-clearfix"> <ul id="icons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></li>
<li 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></li> <li 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></li>
<li 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></li> <li 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></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li>
<li 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></li> <li 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></li>
<li 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></li> <li 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></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li>
<li 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></li> <li 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></li>
<li 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></li> <li 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></li>
<li 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></li> <li 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></li>
<li 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></li> <li 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></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
<li 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></li> <li 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></li>
<li 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></li> <li 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></li>
<li 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></li> <li 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></li>
<li 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></li> <li 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></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li>
</ul> </ul>
<!-- Slider --> <!-- Slider -->
<h2 class="demoHeaders">Slider</h2> <h2 class="demoHeaders">Slider</h2>
<div class="columnbox"> <div class="columnbox">
<div class="slider"></div> <div class="slider"></div>
</div> </div>
<div class="columnbox"> <div class="columnbox">
<div id="eq"> <div id="eq">
<span>88</span> <span>88</span>
<span>77</span> <span>77</span>
<span>55</span> <span>55</span>
<span>33</span> <span>33</span>
<span>40</span> <span>40</span>
<span>45</span> <span>45</span>
<span>70</span> <span>70</span>
</div> </div>
</div> </div>
<!-- Datepicker --> <!-- Datepicker -->
<h2 class="demoHeaders">Datepicker</h2> <h2 class="demoHeaders">Datepicker</h2>
<div class="columnbox" style="width: 32%"> <div class="columnbox" style="width: 32%">
<div id="datepicker"></div> <div id="datepicker"></div>
</div> </div>
<div class="columnbox" style="width: 66%; height: 220px;"> <div class="columnbox" style="width: 66%; height: 220px;">
<div id="multidatepicker"></div> <div id="multidatepicker"></div>
</div> </div>
<!-- Progressbar --> <!-- Progressbar -->
<h2 class="demoHeaders">Progressbar</h2> <h2 class="demoHeaders">Progressbar</h2>
<div id="progressbar"></div> <div id="progressbar"></div>
<!-- Highlight / Error --> <!-- Highlight / Error -->
<h2 class="demoHeaders">Highlight / Error</h2> <h2 class="demoHeaders">Highlight / Error</h2>
<div class="ui-widget"> <div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span> <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.</p> <strong>Hey!</strong> Sample ui-state-highlight style.</p>
</div> </div>
</div> </div>
<br/> <br/>
<div class="ui-widget"> <div class="ui-widget">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong>Alert:</strong> Sample ui-state-error style.</p> <strong>Alert:</strong> Sample ui-state-error style.</p>
</div> </div>
</div> </div>
<h2 class="demoHeaders">Button</h2> <h2 class="demoHeaders">Button</h2>
<div class="buttonset"> <div class="buttonset">
<button id="rerun">Run last action</button> <button id="rerun">Run last action</button>
<button id="select">Select an action</button> <button id="select">Select an action</button>
</div> </div>
<span id="toolbar" class="ui-widget-header ui-corner-all"> <span id="toolbar" class="ui-widget-header ui-corner-all">
<button id="beginning">go to beginning</button> <button id="beginning">go to beginning</button>
<button id="rewind">rewind</button> <button id="rewind">rewind</button>
<button id="play">play</button> <button id="play">play</button>
<button id="stop">stop</button> <button id="stop">stop</button>
<button id="forward">fast forward</button> <button id="forward">fast forward</button>
<button id="end">go to end</button> <button id="end">go to end</button>
<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label> <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
<span id="repeat"> <span id="repeat">
<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label> <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label> <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label> <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
</span> </span>
</span> </span>
<!-- theme switcher --> <!-- theme switcher -->
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script> <script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script> <script>
$('#switcher').themeswitcher(); $('#switcher').themeswitcher();
</script> </script>
</body>
</body>
</html> </html>

View File

@ -14,6 +14,7 @@
"unused": true, "unused": true,
"browser": true, "browser": true,
"es3": true,
"jquery": true, "jquery": true,
"globals": { "globals": {

View File

@ -86,7 +86,7 @@ $.widget( "ui.autocomplete", {
suppressInput = false; suppressInput = false;
suppressKeyPressRepeat = false; suppressKeyPressRepeat = false;
var keyCode = $.ui.keyCode; var keyCode = $.ui.keyCode;
switch( event.keyCode ) { switch ( event.keyCode ) {
case keyCode.PAGE_UP: case keyCode.PAGE_UP:
suppressKeyPress = true; suppressKeyPress = true;
this._move( "previousPage", event ); this._move( "previousPage", event );
@ -149,7 +149,7 @@ $.widget( "ui.autocomplete", {
// replicate some key handlers to allow them to repeat in Firefox and Opera // replicate some key handlers to allow them to repeat in Firefox and Opera
var keyCode = $.ui.keyCode; var keyCode = $.ui.keyCode;
switch( event.keyCode ) { switch ( event.keyCode ) {
case keyCode.PAGE_UP: case keyCode.PAGE_UP:
this._move( "previousPage", event ); this._move( "previousPage", event );
break; break;
@ -570,7 +570,6 @@ $.extend( $.ui.autocomplete, {
} }
}); });
// live region extension, adding a `messages` option // live region extension, adding a `messages` option
// NOTE: This is an experimental API. We are still investigating // NOTE: This is an experimental API. We are still investigating
// a full solution for string manipulation and internationalization. // a full solution for string manipulation and internationalization.

View File

@ -211,10 +211,6 @@ if ( $( "<a>" ).data( "a-b", "a" ).removeData( "a-b" ).data( "a-b" ) ) {
})( $.fn.removeData ); })( $.fn.removeData );
} }
// deprecated // deprecated
$.ui.ie = !!/msie [\w.]+/.exec( navigator.userAgent.toLowerCase() ); $.ui.ie = !!/msie [\w.]+/.exec( navigator.userAgent.toLowerCase() );

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

@ -86,25 +86,25 @@ $.widget( "ui.dialog", {
_create: function() { _create: function() {
this.originalCss = { this.originalCss = {
display: this.element[0].style.display, display: this.element[ 0 ].style.display,
width: this.element[0].style.width, width: this.element[ 0 ].style.width,
minHeight: this.element[0].style.minHeight, minHeight: this.element[ 0 ].style.minHeight,
maxHeight: this.element[0].style.maxHeight, maxHeight: this.element[ 0 ].style.maxHeight,
height: this.element[0].style.height height: this.element[ 0 ].style.height
}; };
this.originalPosition = { this.originalPosition = {
parent: this.element.parent(), parent: this.element.parent(),
index: this.element.parent().children().index( this.element ) index: this.element.parent().children().index( this.element )
}; };
this.originalTitle = this.element.attr("title"); this.originalTitle = this.element.attr( "title" );
this.options.title = this.options.title || this.originalTitle; this.options.title = this.options.title || this.originalTitle;
this._createWrapper(); this._createWrapper();
this.element this.element
.show() .show()
.removeAttr("title") .removeAttr( "title" )
.addClass("ui-dialog-content ui-widget-content") .addClass( "ui-dialog-content ui-widget-content" )
.appendTo( this.uiDialog ); .appendTo( this.uiDialog );
this._createTitlebar(); this._createTitlebar();
@ -118,6 +118,8 @@ $.widget( "ui.dialog", {
} }
this._isOpen = false; this._isOpen = false;
this._trackFocus();
}, },
_init: function() { _init: function() {
@ -142,7 +144,7 @@ $.widget( "ui.dialog", {
this.element this.element
.removeUniqueId() .removeUniqueId()
.removeClass("ui-dialog-content ui-widget-content") .removeClass( "ui-dialog-content ui-widget-content" )
.css( this.originalCss ) .css( this.originalCss )
// Without detaching first, the following becomes really slow // Without detaching first, the following becomes really slow
.detach(); .detach();
@ -155,7 +157,7 @@ $.widget( "ui.dialog", {
next = originalPosition.parent.children().eq( originalPosition.index ); next = originalPosition.parent.children().eq( originalPosition.index );
// Don't try to place the dialog next to itself (#8613) // Don't try to place the dialog next to itself (#8613)
if ( next.length && next[0] !== this.element[0] ) { if ( next.length && next[ 0 ] !== this.element[ 0 ] ) {
next.before( this.element ); next.before( this.element );
} else { } else {
originalPosition.parent.append( this.element ); originalPosition.parent.append( this.element );
@ -178,9 +180,11 @@ $.widget( "ui.dialog", {
} }
this._isOpen = false; this._isOpen = false;
this._focusedElement = null;
this._destroyOverlay(); this._destroyOverlay();
this._untrackInstance();
if ( !this.opener.filter(":focusable").focus().length ) { if ( !this.opener.filter( ":focusable" ).focus().length ) {
// support: IE9 // support: IE9
// IE9 throws an "Unspecified error" accessing document.activeElement from an <iframe> // IE9 throws an "Unspecified error" accessing document.activeElement from an <iframe>
@ -240,7 +244,7 @@ $.widget( "ui.dialog", {
} }
this._isOpen = true; this._isOpen = true;
this.opener = $( this.document[0].activeElement ); this.opener = $( this.document[ 0 ].activeElement );
this._size(); this._size();
this._position(); this._position();
@ -248,28 +252,32 @@ $.widget( "ui.dialog", {
this._moveToTop( null, true ); this._moveToTop( null, true );
this._show( this.uiDialog, this.options.show, function() { this._show( this.uiDialog, this.options.show, function() {
that._focusTabbable(); that._focusTabbable();
that._trigger("focus"); that._trigger( "focus" );
}); });
this._trigger("open"); this._trigger( "open" );
}, },
_focusTabbable: function() { _focusTabbable: function() {
// Set focus to the first match: // Set focus to the first match:
// 1. First element inside the dialog matching [autofocus] // 1. An element that was focused previously
// 2. Tabbable element inside the content element // 2. First element inside the dialog matching [autofocus]
// 3. Tabbable element inside the buttonpane // 3. Tabbable element inside the content element
// 4. The close button // 4. Tabbable element inside the buttonpane
// 5. The dialog itself // 5. The close button
var hasFocus = this.element.find("[autofocus]"); // 6. The dialog itself
if ( !hasFocus.length ) { var hasFocus = this._focusedElement;
hasFocus = this.element.find(":tabbable"); if ( !hasFocus ) {
hasFocus = this.element.find( "[autofocus]" );
} }
if ( !hasFocus.length ) { if ( !hasFocus.length ) {
hasFocus = this.uiDialogButtonPane.find(":tabbable"); hasFocus = this.element.find( ":tabbable" );
} }
if ( !hasFocus.length ) { if ( !hasFocus.length ) {
hasFocus = this.uiDialogTitlebarClose.filter(":tabbable"); hasFocus = this.uiDialogButtonPane.find( ":tabbable" );
}
if ( !hasFocus.length ) {
hasFocus = this.uiDialogTitlebarClose.filter( ":tabbable" );
} }
if ( !hasFocus.length ) { if ( !hasFocus.length ) {
hasFocus = this.uiDialog; hasFocus = this.uiDialog;
@ -319,9 +327,9 @@ $.widget( "ui.dialog", {
if ( event.keyCode !== $.ui.keyCode.TAB ) { if ( event.keyCode !== $.ui.keyCode.TAB ) {
return; return;
} }
var tabbables = this.uiDialog.find(":tabbable"), var tabbables = this.uiDialog.find( ":tabbable" ),
first = tabbables.filter(":first"), first = tabbables.filter( ":first" ),
last = tabbables.filter(":last"); last = tabbables.filter( ":last" );
if ( ( event.target === last[0] || event.target === this.uiDialog[0] ) && !event.shiftKey ) { if ( ( event.target === last[0] || event.target === this.uiDialog[0] ) && !event.shiftKey ) {
first.focus( 1 ); first.focus( 1 );
@ -341,9 +349,9 @@ $.widget( "ui.dialog", {
// We assume that any existing aria-describedby attribute means // We assume that any existing aria-describedby attribute means
// that the dialog content is marked up properly // that the dialog content is marked up properly
// otherwise we brute force the content as the description // otherwise we brute force the content as the description
if ( !this.element.find("[aria-describedby]").length ) { if ( !this.element.find( "[aria-describedby]" ).length ) {
this.uiDialog.attr({ this.uiDialog.attr({
"aria-describedby": this.element.uniqueId().attr("id") "aria-describedby": this.element.uniqueId().attr( "id" )
}); });
} }
}, },
@ -351,15 +359,15 @@ $.widget( "ui.dialog", {
_createTitlebar: function() { _createTitlebar: function() {
var uiDialogTitle; var uiDialogTitle;
this.uiDialogTitlebar = $("<div>") this.uiDialogTitlebar = $( "<div>" )
.addClass("ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix") .addClass( "ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" )
.prependTo( this.uiDialog ); .prependTo( this.uiDialog );
this._on( this.uiDialogTitlebar, { this._on( this.uiDialogTitlebar, {
mousedown: function( event ) { mousedown: function( event ) {
// Don't prevent click on close button (#8838) // Don't prevent click on close button (#8838)
// Focusing a dialog that is partially scrolled out of view // Focusing a dialog that is partially scrolled out of view
// causes the browser to scroll it into view, preventing the click event // causes the browser to scroll it into view, preventing the click event
if ( !$( event.target ).closest(".ui-dialog-titlebar-close") ) { if ( !$( event.target ).closest( ".ui-dialog-titlebar-close" ) ) {
// Dialog isn't getting focus when dragging (#8063) // Dialog isn't getting focus when dragging (#8063)
this.uiDialog.focus(); this.uiDialog.focus();
} }
@ -377,7 +385,7 @@ $.widget( "ui.dialog", {
}, },
text: false text: false
}) })
.addClass("ui-dialog-titlebar-close") .addClass( "ui-dialog-titlebar-close" )
.appendTo( this.uiDialogTitlebar ); .appendTo( this.uiDialogTitlebar );
this._on( this.uiDialogTitlebarClose, { this._on( this.uiDialogTitlebarClose, {
click: function( event ) { click: function( event ) {
@ -386,30 +394,30 @@ $.widget( "ui.dialog", {
} }
}); });
uiDialogTitle = $("<span>") uiDialogTitle = $( "<span>" )
.uniqueId() .uniqueId()
.addClass("ui-dialog-title") .addClass( "ui-dialog-title" )
.prependTo( this.uiDialogTitlebar ); .prependTo( this.uiDialogTitlebar );
this._title( uiDialogTitle ); this._title( uiDialogTitle );
this.uiDialog.attr({ this.uiDialog.attr({
"aria-labelledby": uiDialogTitle.attr("id") "aria-labelledby": uiDialogTitle.attr( "id" )
}); });
}, },
_title: function( title ) { _title: function( title ) {
if ( !this.options.title ) { if ( !this.options.title ) {
title.html("&#160;"); title.html( "&#160;" );
} }
title.text( this.options.title ); title.text( this.options.title );
}, },
_createButtonPane: function() { _createButtonPane: function() {
this.uiDialogButtonPane = $("<div>") this.uiDialogButtonPane = $( "<div>" )
.addClass("ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"); .addClass( "ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" );
this.uiButtonSet = $("<div>") this.uiButtonSet = $( "<div>" )
.addClass("ui-dialog-buttonset") .addClass( "ui-dialog-buttonset" )
.appendTo( this.uiDialogButtonPane ); .appendTo( this.uiDialogButtonPane );
this._createButtons(); this._createButtons();
@ -424,7 +432,7 @@ $.widget( "ui.dialog", {
this.uiButtonSet.empty(); this.uiButtonSet.empty();
if ( $.isEmptyObject( buttons ) || ($.isArray( buttons ) && !buttons.length) ) { if ( $.isEmptyObject( buttons ) || ($.isArray( buttons ) && !buttons.length) ) {
this.uiDialog.removeClass("ui-dialog-buttons"); this.uiDialog.removeClass( "ui-dialog-buttons" );
return; return;
} }
@ -438,7 +446,7 @@ $.widget( "ui.dialog", {
// Change the context for the click callback to be the main element // Change the context for the click callback to be the main element
click = props.click; click = props.click;
props.click = function() { props.click = function() {
click.apply( that.element[0], arguments ); click.apply( that.element[ 0 ], arguments );
}; };
buttonOptions = { buttonOptions = {
icons: props.icons, icons: props.icons,
@ -450,7 +458,7 @@ $.widget( "ui.dialog", {
.button( buttonOptions ) .button( buttonOptions )
.appendTo( that.uiButtonSet ); .appendTo( that.uiButtonSet );
}); });
this.uiDialog.addClass("ui-dialog-buttons"); this.uiDialog.addClass( "ui-dialog-buttons" );
this.uiDialogButtonPane.appendTo( this.uiDialog ); this.uiDialogButtonPane.appendTo( this.uiDialog );
}, },
@ -470,7 +478,7 @@ $.widget( "ui.dialog", {
handle: ".ui-dialog-titlebar", handle: ".ui-dialog-titlebar",
containment: "document", containment: "document",
start: function( event, ui ) { start: function( event, ui ) {
$( this ).addClass("ui-dialog-dragging"); $( this ).addClass( "ui-dialog-dragging" );
that._blockFrames(); that._blockFrames();
that._trigger( "dragStart", event, filteredUi( ui ) ); that._trigger( "dragStart", event, filteredUi( ui ) );
}, },
@ -487,7 +495,7 @@ $.widget( "ui.dialog", {
"top" + (top >= 0 ? "+" : "") + top, "top" + (top >= 0 ? "+" : "") + top,
of: that.window of: that.window
}; };
$( this ).removeClass("ui-dialog-dragging"); $( this ).removeClass( "ui-dialog-dragging" );
that._unblockFrames(); that._unblockFrames();
that._trigger( "dragStop", event, filteredUi( ui ) ); that._trigger( "dragStop", event, filteredUi( ui ) );
} }
@ -524,7 +532,7 @@ $.widget( "ui.dialog", {
minHeight: this._minHeight(), minHeight: this._minHeight(),
handles: resizeHandles, handles: resizeHandles,
start: function( event, ui ) { start: function( event, ui ) {
$( this ).addClass("ui-dialog-resizing"); $( this ).addClass( "ui-dialog-resizing" );
that._blockFrames(); that._blockFrames();
that._trigger( "resizeStart", event, filteredUi( ui ) ); that._trigger( "resizeStart", event, filteredUi( ui ) );
}, },
@ -544,7 +552,7 @@ $.widget( "ui.dialog", {
"top" + (top >= 0 ? "+" : "") + top, "top" + (top >= 0 ? "+" : "") + top,
of: that.window of: that.window
}; };
$( this ).removeClass("ui-dialog-resizing"); $( this ).removeClass( "ui-dialog-resizing" );
that._unblockFrames(); that._unblockFrames();
that._trigger( "resizeStop", event, filteredUi( ui ) ); that._trigger( "resizeStop", event, filteredUi( ui ) );
} }
@ -552,6 +560,33 @@ $.widget( "ui.dialog", {
.css( "position", position ); .css( "position", position );
}, },
_trackFocus: function() {
this._on( this.widget(), {
"focusin": function( event ) {
this._untrackInstance();
this._trackingInstances().unshift( this );
this._focusedElement = $( event.target );
}
});
},
_untrackInstance: function() {
var instances = this._trackingInstances(),
exists = $.inArray( this, instances );
if ( exists !== -1 ) {
instances.splice( exists, 1 );
}
},
_trackingInstances: function() {
var instances = this.document.data( "ui-dialog-instances" );
if ( !instances ) {
instances = [];
this.document.data( "ui-dialog-instances", instances );
}
return instances;
},
_minHeight: function() { _minHeight: function() {
var options = this.options; var options = this.options;
@ -562,7 +597,7 @@ $.widget( "ui.dialog", {
_position: function() { _position: function() {
// Need to show the dialog to get the actual offset in the position plugin // Need to show the dialog to get the actual offset in the position plugin
var isVisible = this.uiDialog.is(":visible"); var isVisible = this.uiDialog.is( ":visible" );
if ( !isVisible ) { if ( !isVisible ) {
this.uiDialog.show(); this.uiDialog.show();
} }
@ -592,7 +627,7 @@ $.widget( "ui.dialog", {
this._size(); this._size();
this._position(); this._position();
} }
if ( this.uiDialog.is(":data(ui-resizable)") ) { if ( this.uiDialog.is( ":data(ui-resizable)" ) ) {
this.uiDialog.resizable( "option", resizableOptions ); this.uiDialog.resizable( "option", resizableOptions );
} }
}, },
@ -629,9 +664,9 @@ $.widget( "ui.dialog", {
} }
if ( key === "draggable" ) { if ( key === "draggable" ) {
isDraggable = uiDialog.is(":data(ui-draggable)"); isDraggable = uiDialog.is( ":data(ui-draggable)" );
if ( isDraggable && !value ) { if ( isDraggable && !value ) {
uiDialog.draggable("destroy"); uiDialog.draggable( "destroy" );
} }
if ( !isDraggable && value ) { if ( !isDraggable && value ) {
@ -645,9 +680,9 @@ $.widget( "ui.dialog", {
if ( key === "resizable" ) { if ( key === "resizable" ) {
// currently resizable, becoming non-resizable // currently resizable, becoming non-resizable
isResizable = uiDialog.is(":data(ui-resizable)"); isResizable = uiDialog.is( ":data(ui-resizable)" );
if ( isResizable && !value ) { if ( isResizable && !value ) {
uiDialog.resizable("destroy"); uiDialog.resizable( "destroy" );
} }
// currently resizable, changing handles // currently resizable, changing handles
@ -662,7 +697,7 @@ $.widget( "ui.dialog", {
} }
if ( key === "title" ) { if ( key === "title" ) {
this._title( this.uiDialogTitlebar.find(".ui-dialog-title") ); this._title( this.uiDialogTitlebar.find( ".ui-dialog-title" ) );
} }
}, },
@ -706,7 +741,7 @@ $.widget( "ui.dialog", {
this.element.height( Math.max( 0, options.height - nonContentHeight ) ); this.element.height( Math.max( 0, options.height - nonContentHeight ) );
} }
if (this.uiDialog.is(":data(ui-resizable)") ) { if ( this.uiDialog.is( ":data(ui-resizable)" ) ) {
this.uiDialog.resizable( "option", "minHeight", this._minHeight() ); this.uiDialog.resizable( "option", "minHeight", this._minHeight() );
} }
}, },
@ -734,13 +769,13 @@ $.widget( "ui.dialog", {
}, },
_allowInteraction: function( event ) { _allowInteraction: function( event ) {
if ( $( event.target ).closest(".ui-dialog").length ) { if ( $( event.target ).closest( ".ui-dialog" ).length ) {
return true; return true;
} }
// TODO: Remove hack when datepicker implements // TODO: Remove hack when datepicker implements
// the .ui-front logic (#8989) // the .ui-front logic (#8989)
return !!$( event.target ).closest(".ui-datepicker").length; return !!$( event.target ).closest( ".ui-datepicker" ).length;
}, },
_createOverlay: function() { _createOverlay: function() {
@ -768,15 +803,14 @@ $.widget( "ui.dialog", {
if ( !this._allowInteraction( event ) ) { if ( !this._allowInteraction( event ) ) {
event.preventDefault(); event.preventDefault();
this.document.find( ".ui-dialog:visible:last .ui-dialog-content" ) this._trackingInstances()[ 0 ]._focusTabbable();
.data( this.widgetFullName )._focusTabbable();
} }
} }
}); });
} }
this.overlay = $("<div>") this.overlay = $( "<div>" )
.addClass("ui-widget-overlay ui-front") .addClass( "ui-widget-overlay ui-front" )
.appendTo( this._appendTo() ); .appendTo( this._appendTo() );
this._on( this.overlay, { this._on( this.overlay, {
mousedown: "_keepFocus" mousedown: "_keepFocus"
@ -807,4 +841,4 @@ $.widget( "ui.dialog", {
} }
}); });
}( jQuery ) ); }( jQuery ));

View File

@ -284,7 +284,7 @@ $.ui.ddmanager = {
} }
// Filter out elements in the current dragged item // Filter out elements in the current dragged item
for ( j=0; j < list.length; j++ ) { for ( j = 0; j < list.length; j++ ) {
if ( list[ j ] === m[ i ].element[ 0 ] ) { if ( list[ j ] === m[ i ].element[ 0 ] ) {
m[ i ].proportions().height = 0; m[ i ].proportions().height = 0;
continue droppablesLoop; continue droppablesLoop;
@ -362,7 +362,7 @@ $.ui.ddmanager = {
if ( this.options.greedy ) { if ( this.options.greedy ) {
// find droppable parents with same scope // find droppable parents with same scope
scope = this.options.scope; scope = this.options.scope;
parent = this.element.parents( ":data(ui-droppable)" ).filter(function () { parent = this.element.parents( ":data(ui-droppable)" ).filter(function() {
return $( this ).droppable( "instance" ).options.scope === scope; return $( this ).droppable( "instance" ).options.scope === scope;
}); });

View File

@ -56,7 +56,7 @@ $.effects.effect.blind = function( o, done ) {
// start at 0 if we are showing // start at 0 if we are showing
if ( show ) { if ( show ) {
wrapper.css( ref, 0 ); wrapper.css( ref, 0 );
if ( ! motion ) { if ( !motion ) {
wrapper.css( ref2, margin + distance ); wrapper.css( ref2, margin + distance );
} }
} }

View File

@ -41,11 +41,11 @@ $.effects.effect.explode = function( o, done ) {
} }
// clone the element for each row and cell. // clone the element for each row and cell.
for( i = 0; i < rows ; i++ ) { // ===> for ( i = 0; i < rows ; i++ ) { // ===>
top = offset.top + i * height; top = offset.top + i * height;
my = i - ( rows - 1 ) / 2 ; my = i - ( rows - 1 ) / 2 ;
for( j = 0; j < cells ; j++ ) { // ||| for ( j = 0; j < cells ; j++ ) { // |||
left = offset.left + j * width; left = offset.left + j * width;
mx = j - ( cells - 1 ) / 2 ; mx = j - ( cells - 1 ) / 2 ;

View File

@ -42,7 +42,7 @@ $.effects.effect.scale = function( o, done ) {
// Set default origin and restore for show/hide // Set default origin and restore for show/hide
if ( mode !== "effect" ) { if ( mode !== "effect" ) {
options.origin = origin || ["middle","center"]; options.origin = origin || [ "middle", "center" ];
options.restore = true; options.restore = true;
} }

View File

@ -22,7 +22,7 @@ $.effects.effect.shake = function( o, done ) {
distance = o.distance || 20, distance = o.distance || 20,
times = o.times || 3, times = o.times || 3,
anims = times * 2 + 1, anims = times * 2 + 1,
speed = Math.round(o.duration/anims), speed = Math.round( o.duration / anims ),
ref = (direction === "up" || direction === "down") ? "top" : "left", ref = (direction === "up" || direction === "down") ? "top" : "left",
positiveMotion = (direction === "up" || direction === "left"), positiveMotion = (direction === "up" || direction === "left"),
animation = {}, animation = {},

View File

@ -125,7 +125,7 @@ $.effects.effect.size = function( o, done ) {
hProps = hProps.concat([ "marginLeft", "marginRight" ]); hProps = hProps.concat([ "marginLeft", "marginRight" ]);
props2 = props0.concat(vProps).concat(hProps); props2 = props0.concat(vProps).concat(hProps);
el.find( "*[width]" ).each( function(){ el.find( "*[width]" ).each( function() {
var child = $( this ), var child = $( this ),
c_original = { c_original = {
height: child.height(), height: child.height(),
@ -183,7 +183,7 @@ $.effects.effect.size = function( o, done ) {
if ( el.to.opacity === 0 ) { if ( el.to.opacity === 0 ) {
el.css( "opacity", el.from.opacity ); el.css( "opacity", el.from.opacity );
} }
if( mode === "hide" ) { if ( mode === "hide" ) {
el.hide(); el.hide();
} }
$.effects.restore( el, props ); $.effects.restore( el, props );

View File

@ -22,8 +22,8 @@ $.effects.effect.transfer = function( o, done ) {
fixLeft = targetFixed ? body.scrollLeft() : 0, fixLeft = targetFixed ? body.scrollLeft() : 0,
endPosition = target.offset(), endPosition = target.offset(),
animation = { animation = {
top: endPosition.top - fixTop , top: endPosition.top - fixTop,
left: endPosition.left - fixLeft , left: endPosition.left - fixLeft,
height: target.innerHeight(), height: target.innerHeight(),
width: target.innerWidth() width: target.innerWidth()
}, },
@ -32,8 +32,8 @@ $.effects.effect.transfer = function( o, done ) {
.appendTo( document.body ) .appendTo( document.body )
.addClass( o.className ) .addClass( o.className )
.css({ .css({
top: startPosition.top - fixTop , top: startPosition.top - fixTop,
left: startPosition.left - fixLeft , left: startPosition.left - fixLeft,
height: elem.innerHeight(), height: elem.innerHeight(),
width: elem.innerWidth(), width: elem.innerWidth(),
position: targetFixed ? "fixed" : "absolute" position: targetFixed ? "fixed" : "absolute"

View File

@ -33,7 +33,7 @@ $.effects = {
// plusequals test for += 100 -= 100 // plusequals test for += 100 -= 100
rplusequals = /^([\-+])=\s*(\d+\.?\d*)/, rplusequals = /^([\-+])=\s*(\d+\.?\d*)/,
// a set of RE's that can match strings and generate color tuples. // a set of RE's that can match strings and generate color tuples.
stringParsers = [{ stringParsers = [ {
re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/, re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
parse: function( execResult ) { parse: function( execResult ) {
return [ return [
@ -84,7 +84,7 @@ $.effects = {
execResult[ 4 ] execResult[ 4 ]
]; ];
} }
}], } ],
// jQuery.Color( ) // jQuery.Color( )
color = jQuery.Color = function( color, green, blue, alpha ) { color = jQuery.Color = function( color, green, blue, alpha ) {
@ -443,18 +443,18 @@ color.fn.parse.prototype = color.fn;
function hue2rgb( p, q, h ) { function hue2rgb( p, q, h ) {
h = ( h + 1 ) % 1; h = ( h + 1 ) % 1;
if ( h * 6 < 1 ) { if ( h * 6 < 1 ) {
return p + (q - p) * h * 6; return p + ( q - p ) * h * 6;
} }
if ( h * 2 < 1) { if ( h * 2 < 1) {
return q; return q;
} }
if ( h * 3 < 2 ) { if ( h * 3 < 2 ) {
return p + (q - p) * ((2/3) - h) * 6; return p + ( q - p ) * ( ( 2 / 3 ) - h ) * 6;
} }
return p; return p;
} }
spaces.hsla.to = function ( rgba ) { spaces.hsla.to = function( rgba ) {
if ( rgba[ 0 ] == null || rgba[ 1 ] == null || rgba[ 2 ] == null ) { if ( rgba[ 0 ] == null || rgba[ 1 ] == null || rgba[ 2 ] == null ) {
return [ null, null, null, rgba[ 3 ] ]; return [ null, null, null, rgba[ 3 ] ];
} }
@ -491,7 +491,7 @@ spaces.hsla.to = function ( rgba ) {
return [ Math.round(h) % 360, s, l, a == null ? 1 : a ]; return [ Math.round(h) % 360, s, l, a == null ? 1 : a ];
}; };
spaces.hsla.from = function ( hsla ) { spaces.hsla.from = function( hsla ) {
if ( hsla[ 0 ] == null || hsla[ 1 ] == null || hsla[ 2 ] == null ) { if ( hsla[ 0 ] == null || hsla[ 1 ] == null || hsla[ 2 ] == null ) {
return [ null, null, null, hsla[ 3 ] ]; return [ null, null, null, hsla[ 3 ] ];
} }
@ -510,7 +510,6 @@ spaces.hsla.from = function ( hsla ) {
]; ];
}; };
each( spaces, function( spaceName, space ) { each( spaces, function( spaceName, space ) {
var props = space.props, var props = space.props,
cache = space.cache, cache = space.cache,
@ -680,7 +679,6 @@ colors = jQuery.Color.names = {
})( jQuery ); })( jQuery );
/******************************************************************************/ /******************************************************************************/
/****************************** CLASS ANIMATIONS ******************************/ /****************************** CLASS ANIMATIONS ******************************/
/******************************************************************************/ /******************************************************************************/
@ -735,7 +733,6 @@ function getElementStyles( elem ) {
return styles; return styles;
} }
function styleDifference( oldStyle, newStyle ) { function styleDifference( oldStyle, newStyle ) {
var diff = {}, var diff = {},
name, value; name, value;
@ -897,7 +894,7 @@ $.extend( $.effects, {
// Saves a set of properties in a data storage // Saves a set of properties in a data storage
save: function( element, set ) { save: function( element, set ) {
for( var i=0; i < set.length; i++ ) { for ( var i = 0; i < set.length; i++ ) {
if ( set[ i ] !== null ) { if ( set[ i ] !== null ) {
element.data( dataSpace + set[ i ], element[ 0 ].style[ set[ i ] ] ); element.data( dataSpace + set[ i ], element[ 0 ].style[ set[ i ] ] );
} }
@ -907,7 +904,7 @@ $.extend( $.effects, {
// Restores a set of previously saved properties from a data storage // Restores a set of previously saved properties from a data storage
restore: function( element, set ) { restore: function( element, set ) {
var val, i; var val, i;
for( i=0; i < set.length; i++ ) { for ( i = 0; i < set.length; i++ ) {
if ( set[ i ] !== null ) { if ( set[ i ] !== null ) {
val = element.data( dataSpace + set[ i ] ); val = element.data( dataSpace + set[ i ] );
// support: jQuery 1.6.2 // support: jQuery 1.6.2
@ -1040,7 +1037,6 @@ $.extend( $.effects, {
} }
} }
return element; return element;
}, },
@ -1250,10 +1246,10 @@ $.each( [ "Quad", "Cubic", "Quart", "Quint", "Expo" ], function( i, name ) {
}); });
$.extend( baseEasings, { $.extend( baseEasings, {
Sine: function ( p ) { Sine: function( p ) {
return 1 - Math.cos( p * Math.PI / 2 ); return 1 - Math.cos( p * Math.PI / 2 );
}, },
Circ: function ( p ) { Circ: function( p ) {
return 1 - Math.sqrt( 1 - p * p ); return 1 - Math.sqrt( 1 - p * p );
}, },
Elastic: function( p ) { Elastic: function( p ) {
@ -1263,7 +1259,7 @@ $.extend( baseEasings, {
Back: function( p ) { Back: function( p ) {
return p * p * ( 3 * p - 2 ); return p * p * ( 3 * p - 2 );
}, },
Bounce: function ( p ) { Bounce: function( p ) {
var pow2, var pow2,
bounce = 4; bounce = 4;

View File

@ -56,7 +56,9 @@ $.widget("ui.mouse", {
_mouseDown: function(event) { _mouseDown: function(event) {
// don't let more than one widget handle mouseStart // don't let more than one widget handle mouseStart
if( mouseHandled ) { return; } if ( mouseHandled ) {
return;
}
// we may have missed mouseup (out of window) // we may have missed mouseup (out of window)
(this._mouseStarted && this._mouseUp(event)); (this._mouseStarted && this._mouseUp(event));
@ -114,9 +116,9 @@ $.widget("ui.mouse", {
// IE mouseup check - mouseup happened when mouse was out of window // IE mouseup check - mouseup happened when mouse was out of window
if ($.ui.ie && ( !document.documentMode || document.documentMode < 9 ) && !event.button) { if ($.ui.ie && ( !document.documentMode || document.documentMode < 9 ) && !event.button) {
return this._mouseUp(event); return this._mouseUp(event);
}
// Iframe mouseup check - mouseup occurred in another document // Iframe mouseup check - mouseup occurred in another document
else if ( !event.which ) { } else if ( !event.which ) {
return this._mouseUp( event ); return this._mouseUp( event );
} }

View File

@ -400,8 +400,7 @@ $.ui.position = {
if ( newOverRight < 0 || newOverRight < abs( overLeft ) ) { if ( newOverRight < 0 || newOverRight < abs( overLeft ) ) {
position.left += myOffset + atOffset + offset; position.left += myOffset + atOffset + offset;
} }
} } else if ( overRight > 0 ) {
else if ( overRight > 0 ) {
newOverLeft = position.left - data.collisionPosition.marginLeft + myOffset + atOffset + offset - offsetLeft; newOverLeft = position.left - data.collisionPosition.marginLeft + myOffset + atOffset + offset - offsetLeft;
if ( newOverLeft > 0 || abs( newOverLeft ) < overRight ) { if ( newOverLeft > 0 || abs( newOverLeft ) < overRight ) {
position.left += myOffset + atOffset + offset; position.left += myOffset + atOffset + offset;
@ -435,8 +434,7 @@ $.ui.position = {
if ( ( position.top + myOffset + atOffset + offset) > overTop && ( newOverBottom < 0 || newOverBottom < abs( overTop ) ) ) { if ( ( position.top + myOffset + atOffset + offset) > overTop && ( newOverBottom < 0 || newOverBottom < abs( overTop ) ) ) {
position.top += myOffset + atOffset + offset; position.top += myOffset + atOffset + offset;
} }
} } else if ( overBottom > 0 ) {
else if ( overBottom > 0 ) {
newOverTop = position.top - data.collisionPosition.marginTop + myOffset + atOffset + offset - offsetTop; newOverTop = position.top - data.collisionPosition.marginTop + myOffset + atOffset + offset - offsetTop;
if ( ( position.top + myOffset + atOffset + offset) > overBottom && ( newOverTop > 0 || abs( newOverTop ) < overBottom ) ) { if ( ( position.top + myOffset + atOffset + offset) > overBottom && ( newOverTop > 0 || abs( newOverTop ) < overBottom ) ) {
position.top += myOffset + atOffset + offset; position.top += myOffset + atOffset + offset;
@ -457,7 +455,7 @@ $.ui.position = {
}; };
// fraction support test // fraction support test
(function () { (function() {
var testElement, testElementParent, testElementStyle, offsetLeft, i, var testElement, testElementParent, testElementStyle, offsetLeft, i,
body = document.getElementsByTagName( "body" )[ 0 ], body = document.getElementsByTagName( "body" )[ 0 ],
div = document.createElement( "div" ); div = document.createElement( "div" );

View File

@ -83,7 +83,7 @@ $.widget("ui.selectable", $.ui.mouse, {
var that = this, var that = this,
options = this.options; options = this.options;
this.opos = [event.pageX, event.pageY]; this.opos = [ event.pageX, event.pageY ];
if (this.options.disabled) { if (this.options.disabled) {
return; return;
@ -166,7 +166,7 @@ $.widget("ui.selectable", $.ui.mouse, {
if (x1 > x2) { tmp = x2; x2 = x1; x1 = tmp; } if (x1 > x2) { tmp = x2; x2 = x1; x1 = tmp; }
if (y1 > y2) { tmp = y2; y2 = y1; y1 = tmp; } if (y1 > y2) { tmp = y2; y2 = y1; y1 = tmp; }
this.helper.css({left: x1, top: y1, width: x2-x1, height: y2-y1}); this.helper.css({ left: x1, top: y1, width: x2 - x1, height: y2 - y1 });
this.selectees.each(function() { this.selectees.each(function() {
var selectee = $.data(this, "selectable-item"), var selectee = $.data(this, "selectable-item"),

View File

@ -423,7 +423,7 @@ $.widget( "ui.slider", $.ui.mouse, {
this.options.value = this._values( 0 ); this.options.value = this._values( 0 );
this.options.values = null; this.options.values = null;
} else if ( value === "max" ) { } else if ( value === "max" ) {
this.options.value = this._values( this.options.values.length-1 ); this.options.value = this._values( this.options.values.length - 1 );
this.options.values = null; this.options.values = null;
} }
} }

View File

@ -301,7 +301,7 @@ $.widget( "ui.spinner", {
if ( incremental ) { if ( incremental ) {
return $.isFunction( incremental ) ? return $.isFunction( incremental ) ?
incremental( i ) : incremental( i ) :
Math.floor( i*i*i/50000 - i*i/500 + 17*i/200 + 1 ); Math.floor( i * i * i / 50000 - i * i / 500 + 17 * i / 200 + 1 );
} }
return 1; return 1;