diff options
| author | Felix Nagel <info@felixnagel.com> | 2012-05-24 18:34:32 +0200 |
|---|---|---|
| committer | Felix Nagel <info@felixnagel.com> | 2012-05-24 18:34:32 +0200 |
| commit | b30184d885329317b9dbd70835d2c4d154f98475 (patch) | |
| tree | 445acc2481e8456211c3e893e7789fe4b5978791 /tests/visual | |
| parent | ec6d88fae464ffb432df6c8d2ed06ee9fa5b4dae (diff) | |
| parent | a1f604eb453208c80ec17c42c7bb4e3a1c624102 (diff) | |
| download | jquery-ui-b30184d885329317b9dbd70835d2c4d154f98475.tar.gz jquery-ui-b30184d885329317b9dbd70835d2c4d154f98475.zip | |
Merge with master
Diffstat (limited to 'tests/visual')
29 files changed, 669 insertions, 2317 deletions
diff --git a/tests/visual/accordion/accordion.html b/tests/visual/accordion/icons.html index a9cf1d129..a9cf1d129 100644 --- a/tests/visual/accordion/accordion.html +++ b/tests/visual/accordion/icons.html diff --git a/tests/visual/addClass/addClass_queue.html b/tests/visual/addClass/queue.html index 616f2c7f9..21f4cc1cb 100644 --- a/tests/visual/addClass/addClass_queue.html +++ b/tests/visual/addClass/queue.html @@ -43,7 +43,7 @@ <body> <p>WHAT: The two boxes animate from black to red to green to blue.</p> -<p>The first box should start with a delay, the second box should start immediately.</p> +<p>EXPECTED: The first box should start with a delay, the second box should start immediately.</p> <div id="box1" class="box"></div> <div id="box2" class="box"></div> diff --git a/tests/visual/button/button.html b/tests/visual/button/button.html index 7aef71f97..20bae191f 100644 --- a/tests/visual/button/button.html +++ b/tests/visual/button/button.html @@ -1,140 +1,94 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>Button Visual push: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <style type="text/css"> - #toolbar { margin-top: 2em; padding:0.2em; } - #ops1, #ops2, #format, #mode { margin-right: 1em } - </style> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../external/jquery.metadata.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>Button Visual Test</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script> $(function() { - var buttons = $('#push button, #check').button(); - var buttonSets = $('#radio0, #radio1, #radio2, #ops1, #format, #ops2, #mode, #inputs, #anchors').buttonset(); - - buttons.add(buttonSets).click(function(event) { - var target = $(event.target); - if (target.closest('.ui-button:not(.ui-state-disabled)').length) { - $("<div></div>") - .text("Clicked " + (target.text() || target.val())) - .appendTo("#log"); - window.console && console.log(this, arguments); - } + $( ".buttons" ).each(function() { + $( this ).children() + .eq( 0 ) + .button({ + text: false, + icons: { + primary: "ui-icon-help" + } + }) + .end() + .eq( 1 ) + .button({ + icons: { + primary: "ui-icon-help" + }, + disabled: true + }) + .end() + .eq( 2 ) + .button(); }); - - $("#disable-widgets").toggle(function() { - buttons.button("disable"); - buttonSets.buttonset("disable"); - }, function() { - buttons.button("enable"); - buttonSets.buttonset("enable"); - }); - $("#toggle-widgets").toggle(function() { - buttons.button(); - buttonSets.buttonset(); - }, function() { - buttons.button("destroy"); - buttonSets.buttonset("destroy"); - }).click(); }); </script> </head> <body> -<div id="push"> - <div> - No icon - <button>Simple button, only text</button> - <button class="ui-priority-secondary">Secondary priority button</button> - </div> - <br/> - <div> - With icon - <button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> - <button class="{button:{icons:{primary:'ui-icon-locked'}}}">Primary icon</button> - <button class="{button:{icons:{secondary:'ui-icon-triangle-1-s'}}}">Secondary icon</button> - <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Both icons</button> - <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons and no text</button> - </div> +<div class="buttons"> + <button>button</button> + <button>button</button> + <button>button</button> +</div> + +<div class="buttons"> + <button type="button">button button</button> + <button type="button">button button</button> + <button type="button">button button</button> </div> -<div id="toggle" style="margin-top: 2em;"> - <input type="checkbox" id="check" /><label for="check">Toggle</label> +<div class="buttons"> + <button type="submit">button submit</button> + <button type="submit">button submit</button> + <button type="submit">button submit</button> </div> -<div id="radio0" style="margin-top: 2em;"> - <input type="radio" id="radio01" name="radio" checked="checked" /><label for="radio01">Choice 1</label> - <input type="radio" id="radio02" name="radio" /><label for="radio02">Choice 2</label> - <input type="radio" id="radio03" name="radio" /><label for="radio03">Choice 3</label> +<div class="buttons"> + <input type="button" value="input button"> + <input type="button" value="input button"> + <input type="button" value="input button"> </div> -<form> - <div id="radio1" style="margin-top: 2em;"> - <input type="radio" id="radio11" name="radio" /><label for="radio11">Choice 1</label> - <input type="radio" id="radio12" name="radio" checked="checked" /><label for="radio12">Choice 2</label> - <input type="radio" id="radio13" name="radio" /><label for="radio13">Choice 3</label> - </div> -</form> -<form> - <div id="radio2" style="margin-top: 2em;"> - <input type="radio" id="radio21" name="radio" /><label for="radio21">Choice 1</label> - <input type="radio" id="radio22" name="radio" /><label for="radio22">Choice 2</label> - <input type="radio" id="radio23" name="radio" checked="checked" /><label for="radio23">Choice 3</label> - </div> -</form> -<div id="toolbar" class="ui-widget-header ui-corner-all ui-helper-clearfix"> - <span id="ops1"> - <button class="{button:{icons:{primary:'ui-icon-folder-open'},text:false}}">Open</button> - <button class="{button:{icons:{primary:'ui-icon-disk'},text:false}}">Save</button> - <button class="{button:{icons:{primary:'ui-icon-trash'},text:false}}">Delete</button> - </span> - <span id="format"> - <input type="checkbox" id="check1" /><label for="check1">B</label> - <input type="checkbox" id="check2" /><label for="check2">I</label> - <input type="checkbox" id="check3" /><label for="check3">U</label> - </span> - <span id="ops2"> - <button class="{button:{icons:{primary:'ui-icon-print'},text:false}}">Print...</button> - <button class="{button:{icons:{primary:'ui-icon-mail-closed'},text:false}}">Mail to...</button> - </span> - <span id="mode"> - <input type="radio" id="mode1" name="radio2" checked="checked" /><label for="mode1">Edit</label> - <input type="radio" id="mode2" name="radio2" /><label for="mode2">View</label> - </span> +<div class="buttons"> + <input type="submit" value="input submit"> + <input type="submit" value="input submit"> + <input type="submit" value="input submit"> </div> -<div id="inputs" style="margin-top: 2em;"> - <input type="submit" value="Submit button" /> - <input type="reset" value="Reset button" class="{button:{label:'Custom reset'}}" /> +<div class="buttons"> + <input type="checkbox" id="input-checkbox0"> + <input type="checkbox" id="input-checkbox1"> + <input type="checkbox" id="input-checkbox2"> + <label for="input-checkbox0">input checkbox</label> + <label for="input-checkbox1">input checkbox</label> + <label for="input-checkbox2">input checkbox</label> </div> -<div id="anchors" style="margin-top: 2em;"> - <a href="#">Anchor 1</a> - <a href="#" class="{button:{icons:{primary:'ui-icon-print'},text:false}}">Anchor 2</a> - <a href="#" class="{button:{icons:{primary:'ui-icon-mail-closed'},text:false}}">Anchor 3</a> - <a href="#">Anchor 4</a> +<div class="buttons"> + <input type="radio" id="input-radio0" name="radio"> + <input type="radio" id="input-radio1" name="radio"> + <input type="radio" id="input-radio2" name="radio"> + <label for="input-radio0">input radio</label> + <label for="input-radio1">input radio</label> + <label for="input-radio2">input radio</label> </div> -<div style="margin-top: 2em;"> - <button id="disable-widgets">Toggle disabled</button> - <button id="toggle-widgets">Toggle widget</button> +<div class="buttons"> + <a href="#">anchor</a> + <a href="#">anchor</a> + <a href="#">anchor</a> </div> -<div id="log"></div> -<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> -<script type="text/javascript"> - $.fn.themeswitcher && $('<div></div>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); -</script> </body> </html> diff --git a/tests/visual/button/button_disabled_true.html b/tests/visual/button/button_disabled_true.html deleted file mode 100644 index 83a3e9cd6..000000000 --- a/tests/visual/button/button_disabled_true.html +++ /dev/null @@ -1,84 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Button Visual Test : Button disabled true</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> - $(function() { - - $("#button1").button({ - disabled: true - }); - - $("#anchor1").button({ - disabled: true - }); - - $("#inputbutton1").button({ - disabled: true - }); - - $("#radio1, #radio2, #radio3").button({ - disabled: true - }); - - $("#checkbox1, #checkbox2, #checkbox3").button({ - disabled: true - }); - - }); - </script> -</head> -<body> - -<fieldset> - <legend>button</legend> - <button disabled="disabled">button</button> - <hr /> - <button id="button1">button</button> -</fieldset> - -<fieldset> - <legend>anchor</legend> - <a href="javascript:void(0)">anchor 1</a> # Attribute "disabled" not allowed on element "a" at this point. - <hr /> - <a href="javascript:void(0)" id="anchor1">anchor 1</a> -</fieldset> - -<fieldset> - <legend>input type="button"</legend> - <input type="button" disabled="disabled" value="input button 1" /> - <hr /> - <input type="button" id="inputbutton1" value="input button 1" /> -</fieldset> - -<fieldset> - <legend>input type="radio"</legend> - <input type="radio" name="radioletter" id="radioa" disabled="disabled" /><label for="radioa">radio a</label> - <input type="radio" name="radioletter" id="radiob" disabled="disabled" /><label for="radiob">radio b</label> - <input type="radio" name="radioletter" id="radioc" disabled="disabled" /><label for="radioc">radio c</label> - <hr /> - <input type="radio" name="radionumber" id="radio1" /><label for="radio1">radio 1</label> - <input type="radio" name="radionumber" id="radio2" /><label for="radio2">radio 2</label> - <input type="radio" name="radionumber" id="radio3" /><label for="radio3">radio 3</label> -</fieldset> - -<fieldset> - <legend>input type="checkbox"</legend> - <input type="checkbox" id="checkboxa" disabled="disabled" /><label for="checkboxa">checkbox a</label> - <input type="checkbox" id="checkboxb" disabled="disabled" /><label for="checkboxb">checkbox b</label> - <input type="checkbox" id="checkboxc" disabled="disabled" /><label for="checkboxc">checkbox c</label> - <hr /> - <input type="checkbox" id="checkbox1" /><label for="checkbox1">checkbox 1</label> - <input type="checkbox" id="checkbox2" /><label for="checkbox2">checkbox 2</label> - <input type="checkbox" id="checkbox3" /><label for="checkbox3">checkbox 3</label> -</fieldset> - -</body> -</html> diff --git a/tests/visual/button/button_performance.html b/tests/visual/button/button_performance.html deleted file mode 100644 index 8ff6d0320..000000000 --- a/tests/visual/button/button_performance.html +++ /dev/null @@ -1,555 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Button Visual push: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <style type="text/css"> - #toolbar { margin-top: 2em; padding:0.2em; } - #ops1, #ops2, #format, #mode { margin-right: 1em } - </style> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../external/jquery.metadata.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> - $(function() { - var start = +new Date(); - $("button").button(); - var end = +new Date(); - $("<p></p>").text( "Time to initialize: " + (end - start) + "ms" ).prependTo("body"); - }); - </script> -</head> -<body> - -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> - -</body> -</html> diff --git a/tests/visual/button/button_ticket_5261.html b/tests/visual/button/button_ticket_5261.html deleted file mode 100644 index 7eddc33ae..000000000 --- a/tests/visual/button/button_ticket_5261.html +++ /dev/null @@ -1,42 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Button Visual Test : Button ticket #5261</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> - $(function() { - - $('#id1').button().change(function(e) { - console.log('change', e); - }); - $('#id1').bind('change', function(e) { - console.log('bound change', e); - }); - $("body").live('change', function(e) { - console.log('live change on body', e); - }); - $(document).delegate('input', 'change', function(e) { - console.log('delegated input change', e); - }); - $(document).change(function(e) { - console.log('delegated change on document', e); - }); - - }); - </script> -</head> -<body> - -<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/5261">#5261 - button change events don't fire in IE 7/8</a></h1> - -<input name="1" id="id1" type="checkbox"/> -<label for="id1">Checkbox</label> - -</body> -</html> diff --git a/tests/visual/button/button_ticket_5278.html b/tests/visual/button/button_ticket_5278.html deleted file mode 100644 index eed6ebdb0..000000000 --- a/tests/visual/button/button_ticket_5278.html +++ /dev/null @@ -1,58 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Button Visual Test : Button ticket #5278</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> - $(function() { - - $('#id1, #id2, #id3, #id4').button(); - - $('#r1, #r2, #r3, #r4').button(); - - }); - </script> -</head> -<body> - -<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/5278">#5278 - ui.buttons doesn't visually reset on form "reset" event or input "change" event</a></h1> - -<form> - -<input name="a1" id="id1" type="checkbox"/> -<label for="id1">Checkbox</label> - -<input name="a2" id="id2" type="checkbox"/> -<label for="id2">Checkbox</label> - -<input name="a3" id="id3" type="checkbox" checked="checked" /> -<label for="id3">Checkbox</label> - -<input name="a4" id="id4" type="checkbox"/> -<label for="id4">Checkbox</label> - -<input type="reset"/> - -<input name="r" id="r1" type="radio"/> -<label for="r1">Radio</label> - -<input name="r" id="r2" type="radio"/> -<label for="r2">Radio</label> - -<input name="r" id="r3" type="radio" checked="checked" /> -<label for="r3">Radio</label> - -<input name="r" id="r4" type="radio"/> -<label for="r4">Radio</label> - - -</form> - -</body> -</html> diff --git a/tests/visual/button/performance.html b/tests/visual/button/performance.html new file mode 100644 index 000000000..1d1884bc2 --- /dev/null +++ b/tests/visual/button/performance.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Button Visual Test: Initialization Performance</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script> + $(function() { + var start, + html = new Array( 500 ).join( "<button>button</button>" ); + $( html ).appendTo( "body" ); + + start = $.now(); + $( "button" ).button(); + $( "<p>" ).text( "Time to initialize: " + ($.now() - start) + "ms" ).prependTo( "body" ); + }); + </script> +</head> +<body> + +</body> +</html> diff --git a/tests/visual/dialog/dialog_on_page_with_large_dom.html b/tests/visual/dialog/performance.html index d807b3e3f..e84f4b328 100644 --- a/tests/visual/dialog/dialog_on_page_with_large_dom.html +++ b/tests/visual/dialog/performance.html @@ -3,7 +3,6 @@ <head> <meta charset="utf-8"> <title>Dialog Visual Test - Modal Dialog in Large DOM</title> - <link rel="stylesheet" href="../visual.css"> <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> <script src="../../../jquery-1.7.2.js"></script> <script src="../../../external/jquery.bgiframe-2.1.2.js"></script> @@ -37,6 +36,9 @@ </head> <body> +<p>WHAT: A single dialog is created on a page with a large DOM.</p> +<p>EXPECTED: Creating and opening the dialog should be fast, regardless of page size.</p> + <button id="opener">open dialog</button> <div id="dialog" title="Dialog Title"> <p> Dialog Content </p> @@ -51,7 +53,7 @@ <div><div><div><div><div><div><div><div><div><div> <div><div><div><div><div><div><div><div><div><div> <div><div><div><div><div><div><div><div><div><div> -<div><p>This <span>is</span> <span>a</span> <strong>large</strong> <abbr>DOM</abbr></p>.</div> +<div><p>This <span>is</span> <span>a</span> <strong>large</strong> <abbr>DOM</abbr>.</p></div> <input> <select> <option>option 1</option> diff --git a/tests/visual/effects/effects.all.html b/tests/visual/effects/all.html index acb8dc41a..15bfcd254 100644 --- a/tests/visual/effects/effects.all.html +++ b/tests/visual/effects/all.html @@ -3,7 +3,7 @@ <head> <meta charset="utf-8"> <title>jQuery UI Effects Test Suite</title> - <link rel="stylesheet" href="effects.all.css" type="text/css"> + <link rel="stylesheet" href="effects.css"> <script src="../../../jquery-1.7.2.js"></script> <script src="../../../ui/jquery.effects.core.js"></script> <script src="../../../ui/jquery.effects.blind.js"></script> @@ -19,7 +19,7 @@ <script src="../../../ui/jquery.effects.shake.js"></script> <script src="../../../ui/jquery.effects.slide.js"></script> <script src="../../../ui/jquery.effects.transfer.js"></script> - <script src="effects.all.js"></script> + <script src="effects.js"></script> </head> <body> @@ -186,19 +186,19 @@ <p>Transfer to first element</p> </div> </li> - + <li> <div class="effect" id="addClass"> <p>addClass</p> </div> </li> - + <li> <div class="effect" id="removeClass"> <p>removeClass</p> </div> </li> - + <li> <div class="effect" id="toggleClass"> <p>toggleClass</p> diff --git a/tests/visual/effects/effects.all.js b/tests/visual/effects/effects.all.js deleted file mode 100644 index a28c41a89..000000000 --- a/tests/visual/effects/effects.all.js +++ /dev/null @@ -1,106 +0,0 @@ - -$(function() { - var duration = 1000, wait = 500; - - $("div.effect") - .hover(function() { $(this).addClass("hover"); }, - function() { $(this).removeClass("hover"); }); - - var effect = function(el, n, o) { - - $.extend(o, { - easing: "easeOutQuint" - }); - - $(el).bind("click", function() { - - $(this).addClass("current") - // delaying the initial animation makes sure that the queue stays in tact - .delay( 10 ) - .hide( n, o, duration ) - .delay( wait ) - .show( n, o, duration, function() { - $( this ).removeClass("current"); - }); - }); - - }; - - $("#hide").click(function() { - var el = $(this); - el.addClass("current").hide(duration, function() { - setTimeout(function() { - el.show(duration, function() { el.removeClass("current"); }); - }, wait); - }); - }); - - effect("#blindLeft", "blind", { direction: "left" }); - effect("#blindUp", "blind", { direction: "up" }); - effect("#blindRight", "blind", { direction: "right" }); - effect("#blindDown", "blind", { direction: "down" }); - - effect("#bounce3times", "bounce", { times: 3 }); - - effect("#clipHorizontally", "clip", { direction: "horizontal" }); - effect("#clipVertically", "clip", { direction: "vertical" }); - - effect("#dropDown", "drop", { direction: "down" }); - effect("#dropUp", "drop", { direction: "up" }); - effect("#dropLeft", "drop", { direction: "left" }); - effect("#dropRight", "drop", { direction: "right" }); - - effect("#explode9", "explode", {}); - effect("#explode36", "explode", { pieces: 36 }); - - effect("#fade", "fade", {}); - - effect("#fold", "fold", { size: 50 }); - - effect("#highlight", "highlight", {}); - - effect("#pulsate", "pulsate", { times: 2 }); - - effect("#puff", "puff", { times: 2 }); - effect("#scale", "scale", {}); - effect("#size", "size", {}); - $("#sizeToggle").bind("click", function() { - var opts = { to: { width: 300, height: 300 }}; - $(this).addClass('current') - .toggle("size", opts, duration) - .delay(wait) - .toggle("size", opts, duration, function() { - $(this).removeClass("current"); - }); - }); - - $("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); }); - - effect("#slideDown", "slide", { direction: "down" }); - effect("#slideUp", "slide", { direction: "up" }); - effect("#slideLeft", "slide", { direction: "left" }); - effect("#slideRight", "slide", { direction: "right" }); - - $("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); }); - - $("#addClass").click(function() { - $(this).addClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration, function() { - $(this).removeClass("current"); - }); - }); - $("#removeClass").click(function() { - $(this).addClass("current").removeClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration); - }); - $("#toggleClass").click(function() { - $(this).toggleClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration); - }); -}); diff --git a/tests/visual/effects/effects.all.css b/tests/visual/effects/effects.css index 1d531b026..460019f24 100644 --- a/tests/visual/effects/effects.all.css +++ b/tests/visual/effects/effects.css @@ -1,13 +1,9 @@ - -body,html { - margin: 0; +body { + margin: 1em; padding: 0; - font-size: 12px; - font-family: Arial; background: #191919; color: #fff; } -body { margin: 1em; } ul.effects { list-style-type: none; @@ -16,8 +12,6 @@ ul.effects { } ul.effects li { - list-style-type: none; - margin: 0; padding: 0; width: 120px; height: 100px; @@ -44,7 +38,7 @@ div.current { div.effect p { color: #191919; font-weight: bold; - margin: 0px; + margin: 0; padding: 10px; } diff --git a/tests/visual/effects/effects.js b/tests/visual/effects/effects.js new file mode 100644 index 000000000..624e0b128 --- /dev/null +++ b/tests/visual/effects/effects.js @@ -0,0 +1,107 @@ +$(function() { + +var duration = 1000, + wait = 500; + +function effect( elem, name, options ) { + $.extend( options, { + easing: "easeOutQuint" + }); + + $( elem ).click(function() { + $( this ) + .addClass( "current" ) + // delaying the initial animation makes sure that the queue stays in tact + .delay( 10 ) + .hide( name, options, duration ) + .delay( wait ) + .show( name, options, duration, function() { + $( this ).removeClass( "current" ); + }); + }); +} + +$( "#hide" ).click(function() { + $( this ) + .addClass( "current" ) + .hide( duration ) + .delay( wait ) + .show( duration, function() { + $( this ).removeClass( "current" ); + }); +}); + +effect( "#blindLeft", "blind", { direction: "left" } ); +effect( "#blindUp", "blind", { direction: "up" } ); +effect( "#blindRight", "blind", { direction: "right" } ); +effect( "#blindDown", "blind", { direction: "down" } ); + +effect( "#bounce3times", "bounce", { times: 3 } ); + +effect( "#clipHorizontally", "clip", { direction: "horizontal" } ); +effect( "#clipVertically", "clip", { direction: "vertical" } ); + +effect( "#dropDown", "drop", { direction: "down" } ); +effect( "#dropUp", "drop", { direction: "up" } ); +effect( "#dropLeft", "drop", { direction: "left" } ); +effect( "#dropRight", "drop", { direction: "right" } ); + +effect( "#explode9", "explode", {} ); +effect( "#explode36", "explode", { pieces: 36 } ); + +effect( "#fade", "fade", {} ); + +effect( "#fold", "fold", { size: 50 } ); + +effect( "#highlight", "highlight", {} ); + +effect( "#pulsate", "pulsate", { times: 2 } ); + +effect( "#puff", "puff", { times: 2 } ); +effect( "#scale", "scale", {} ); +effect( "#size", "size", {} ); +$( "#sizeToggle" ).click(function() { + var options = { to: { width: 300, height: 300 } }; + $( this ) + .addClass( "current" ) + .toggle( "size", options, duration ) + .delay( wait ) + .toggle( "size", options, duration, function() { + $( this ).removeClass( "current" ); + }); +}); + +$( "#shake" ).click(function() { + $( this ) + .addClass( "current" ) + .effect( "shake", {}, 100, function() { + $( this ).removeClass( "current" ); + }); +}); + +effect( "#slideDown", "slide", { direction: "down" } ); +effect( "#slideUp", "slide", { direction: "up" } ); +effect( "#slideLeft", "slide", { direction: "left" } ); +effect( "#slideRight", "slide", { direction: "right" } ); + +$( "#transfer" ).click(function() { + $( this ) + .addClass( "current" ) + .effect( "transfer", { to: "div:eq(0)" }, 1000, function() { + $( this ).removeClass( "current" ); + }); +}); + +$( "#addClass" ).click(function() { + $( this ).addClass( "current", duration, function() { + $( this ).removeClass( "current" ); + }); +}); +$( "#removeClass" ).click(function() { + $( this ).addClass( "current" ).removeClass( "current", duration ); +}); +$( "#toggleClass" ).click(function() { + $( this ).toggleClass( "current", duration ); +}); + +}); diff --git a/tests/visual/effects/effects.scale.html b/tests/visual/effects/scale.html index 708543257..add2ba01c 100644 --- a/tests/visual/effects/effects.scale.html +++ b/tests/visual/effects/scale.html @@ -3,13 +3,12 @@ <head> <meta charset="utf-8"> <title>jQuery UI Effects Test Suite</title> - <link rel="stylesheet" href="effects.all.css" type="text/css"> + <link rel="stylesheet" href="effects.css"> <script src="../../../jquery-1.7.2.js"></script> <script src="../../../ui/jquery.effects.core.js"></script> <script src="../../../ui/jquery.effects.scale.js"></script> - <script src="effects.all.js"></script> <script> - jQuery(function( $ ) { + $(function() { var test = $( "#testBox" ), opts = $( ".arg" ), optsRev = $( opts.get().reverse() ), @@ -82,9 +81,8 @@ } }); </script> - <style type="text/css"> + <style> #testArea { -/* border: 5px dashed #777;*/ width: 200px; height: 200px; position: relative; diff --git a/tests/visual/index.html b/tests/visual/index.html new file mode 100644 index 000000000..0d5aceffa --- /dev/null +++ b/tests/visual/index.html @@ -0,0 +1,82 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Visual Tests</title> + + <link rel="stylesheet" href="../../themes/base/jquery.ui.core.css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css"> + <link rel="stylesheet" href="../index.css"> + <script src="../jquery-1.7.2.js"></script> + <script src="../index.js"></script> +</head> +<body> + +<div id="main"> + <h1>jQuery UI Visual Tests</h1> + <div> + <h2>Accordion</h2> + <ul> + <li><a href="accordion/icons.html">Icons</a></li> + </ul> + + <h2>addClass</h2> + <ul> + <li><a href="addClass/queue.html">Queue</a></li> + </ul> + + <h2>Button</h2> + <ul> + <li><a href="button/button.html">General</a></li> + <li><a href="button/performance.html">Performance</a></li> + </ul> + + <h2>Dialog</h2> + <ul> + <li><a href="dialog/performance.html">Performance</a></li> + </ul> + + <h2>Effects</h2> + <ul> + <li><a href="effects/all.html">All</a></li> + <li><a href="effects/scale.html">Scale</a></li> + </ul> + + <h2>Menu</h2> + <ul> + <li><a href="menu/menu.html">General</a></li> + </ul> + + <h2>Position</h2> + <ul> + <li><a href="position/position.html">General</a></li> + <li><a href="position/position_feedback.html">Feedback</a></li> + </ul> + + <h2>Tooltip</h2> + <ul> + <li><a href="tooltip/tooltip.html">General</a></li> + <li><a href="tooltip/animations.html">Animations</a></li> + </ul> + + <h2>Compound</h2> + <ul> + <li><a href="compound/accordion_tabs.html">Accordion in Tabs</a></li> + <li><a href="compound/datepicker_dialog.html">Datepicker in Dialog</a></li> + <li><a href="compound/dialog_widgets.html">Various Widgets in Dialog</a></li> + <li><a href="compound/draggable_accordion.html">Draggable Accordion</a></li> + <li><a href="compound/draggable_accordion_accordion_tabs_draggable.html">Nested Widgets</a></li> + <li><a href="compound/sortable_accordion_sortable_tabs.html">Sortable Tabs in Sortable Accordion</a></li> + <li><a href="compound/tabs_tabs.html">Nested Tabs</a></li> + <li><a href="compound/tabs_tooltips.html">Tabs with Tooltips</a></li> + </ul> + + <h2>General</h2> + <ul> + <li><a href="theme.html">Theme</a></li> + </ul> + </div> +</div> + +</body> +</html> diff --git a/tests/visual/menu/drilldown.html b/tests/visual/menu/drilldown.html deleted file mode 100644 index 7b40fc62f..000000000 --- a/tests/visual/menu/drilldown.html +++ /dev/null @@ -1,267 +0,0 @@ -<!doctype html> -<html> -<head> - <meta charset="utf-8"> - <title>Menu Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> - <script type="text/javascript"> - $(function() { - $.fn.themeswitcher && $('<div/>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); - - $.widget("ui.drilldown", { - _init: function() { - var that = this; - this.active = this.element.find(">ul").attr("tabindex", 0); - - // hide submenus and create indicator icons - this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show(); - - this.element.find("ul").menu({ - // disable built-in key handling - input: $(), - focus: function(event, ui) { - that.activeItem = ui.item; - }, - select: function(event, ui) { - if (this != that.active[0]) { - return; - } - var nested = $(">ul", ui.item); - if (nested.length) { - that._open(nested); - } else { - that.element.find("h3").text(ui.item.text()); - that.options.select.apply(this, arguments); - } - } - }); - - this.back = this.element.children(":last").button({ - icons: { - primary: "ui-icon-carat-1-w" - } - }).click(function() { - that.up(); - return false; - }).hide(); - }, - - _open: function(submenu) { - this.active = submenu.show().css({ - opacity: 0 - }).position({ - my: "left top", - at: "right top", - of: this.widget() - }).position({ - my: "left top", - at: "left top", - of: this.widget(), - using: function(to) { - $(this).animate({ - left: to.left, - top: to.top, - opacity: 1 - }); - } - }); - this.back.show(); - }, - - up: function() { - if (this.active.parent()[0] == this.element[0]) { - return; - } - this.active.position({ - my: "left top", - at: "right top", - of: this.widget(), - using: function(to) { - $(this).animate({ - left: to.left, - top: to.top, - opacity: 0 - }); - } - }); - this.active = this.active.parent().parent().show(); - this.activeItem = this.active.data("menu").active; - if (!this.active.parent().parent().is(":ui-menu")) { - this.back.hide(); - } - }, - - down: function(event) { - var nested = this.activeItem.find(">ul"); - if (nested.length) { - this._open(nested); - nested.menu("focus", event, nested.children(":first")) - } - }, - - show: function() { - }, - - hide: function() { - }, - - widget: function() { - return this.element.find(">ul"); - } - }); - - var drilldown = $("#drilldown").drilldown({ - select: function(event, ui) { - $("#log").append("<div>Selected " + ui.item.text() + "</div>"); - } - }); - - drilldown.drilldown("widget").keydown(function(event) { - var menu = drilldown.data("drilldown").active.data("menu"); - if (menu.widget().is(":hidden")) - return; - event.stopPropagation(); - switch (event.keyCode) { - case $.ui.keyCode.PAGE_UP: - menu.previousPage(); - break; - case $.ui.keyCode.PAGE_DOWN: - menu.nextPage(); - break; - case $.ui.keyCode.UP: - menu.previous(); - break; - case $.ui.keyCode.LEFT: - drilldown.drilldown("up"); - break; - case $.ui.keyCode.RIGHT: - drilldown.drilldown("down"); - break; - case $.ui.keyCode.DOWN: - menu.next(); - event.preventDefault(); - break; - case $.ui.keyCode.ENTER: - case $.ui.keyCode.TAB: - menu.select(); - drilldown.drilldown("hide"); - event.preventDefault(); - break; - case $.ui.keyCode.ESCAPE: - drilldown.drilldown("hide", event); - break; - default: - clearTimeout(menu.filterTimer); - var prev = menu.previousFilter || ""; - var character = String.fromCharCode(event.keyCode); - var skip = false; - if (character == prev) { - skip = true; - } else { - character = prev + character; - } - - var match = menu.widget().children("li").filter(function() { - return new RegExp("^" + character, "i").test($("a", this).text()); - }); - var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match; - if (!match.length) { - character = String.fromCharCode(event.keyCode); - match = menu.widget().children("li").filter(function() { - return new RegExp("^" + character, "i").test($(this).text()); - }); - } - if (match.length) { - menu.focus(event, match); - if (match.length > 1) { - menu.previousFilter = character; - menu.filterTimer = setTimeout(function() { - delete menu.previousFilter; - }, 1000); - } else { - delete menu.previousFilter; - } - } else { - delete menu.previousFilter; - } - } - }); - }); - </script> - <style> - body { font-size:62.5%; } - .ui-menu { width: 200px; height: 170px; } - .ui-menu .ui-menu { position: absolute; } - .ui-menu .ui-icon { float: right; } - </style> -</head> -<body> - -<div id="drilldown"> - <h3>Make a selection...</h3> - <ul> - <li> - <a href="#">Amsterdam</a> - <ul> - <li><a href="#">Aberdeen</a></li> - <li><a href="#">Ada</a></li> - <li> - <a href="#">Adamsville</a> - <ul> - <li><a href="#">Anaheim</a></li> - <li> - <a href="#">Cologne</a> - <ul> - <li><a href="#">Mberdeen</a></li> - <li><a href="#">Mda</a></li> - <li><a href="#">Mdamsville</a></li> - <li><a href="#">Mddyston</a></li> - <li><a href="#">Mmesville</a></li> - </ul> - </li> - <li><a href="#">Frankfurt</a></li> - </ul> - </li> - <li><a href="#">Addyston</a></li> - <li><a href="#">Amesville</a></li> - </ul> - </li> - <li><a href="#">Anaheim</a></li> - <li><a href="#">Cologne</a></li> - <li><a href="#">Frankfurt</a></li> - <li> - <a href="#">Magdeburg</a> - <ul> - <li><a href="#">Mberdeen</a></li> - <li><a href="#">Mda</a></li> - <li><a href="#">Mdamsville</a></li> - <li><a href="#">Mddyston</a></li> - <li><a href="#">Mmesville</a></li> - </ul> - </li> - <li><a href="#">Munich</a></li> - <li><a href="#">Utrecht</a></li> - <li><a href="#">Zurich</a></li> - </ul> - <a href="#">Go back</a> -</div> - -<div class="ui-widget" style="clear: left; margin-top:2em; font-family:Arial"> - Log: - <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div> -</div> - -</body> -</html> diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html index 548f25db4..f92de61db 100644 --- a/tests/visual/menu/menu.html +++ b/tests/visual/menu/menu.html @@ -3,53 +3,30 @@ <head> <meta charset="utf-8"> <title>Menu Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.menu.js"></script> + <script> $(function() { - $.fn.themeswitcher && $('<div/>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); - - function create() { - menus.menu({ - select: function(event, ui) { - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); - } - }); - - $("#menu5").menu({ - select: function(event, ui) { - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); - }, - menus: "div" - }); - - $("#menu6").menu({ - select: function(event, ui) { - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); - }, - menus: ".menuElement" - }); + function logger( event, ui ) { + $( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" ); } - var menus = $("#menu1, #menu2, #menu3, .menu4"); - create(); + $( "#menu1, #menu2, #menu3, .menu4" ).menu({ + select: logger + }); - $("#toggle-destroy").toggle(function() { - menus.menu("destroy"); - }, create); - $("#toggle-disable").toggle(function() { - menus.menu("disable"); - }, function() { - menus.menu("enable"); + $( "#menu5" ).menu({ + menus: "div", + select: logger + }); + + $( "#menu6" ).menu({ + menus: ".menuElement", + select: logger }); }); </script> @@ -64,6 +41,7 @@ </head> <body> +<h2>Default inline menu</h2> <ul id="menu1"> <li><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> @@ -74,6 +52,7 @@ <li><a href="#">Salzburg</a></li> </ul> +<h2>Inline with disabled items and submenus</h2> <ul id="menu2"> <li class="ui-state-disabled"><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> @@ -114,6 +93,7 @@ <li class="ui-state-disabled"><a href="#">Amesville</a></li> </ul> +<h2>Menu with icons</h2> <ul id="menu3"> <li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li> <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li> @@ -152,6 +132,7 @@ </li> </ul> +<h2>Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour</h2> <ul class="menu4"> <li><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> @@ -193,6 +174,7 @@ <li><a href="#">Amesville</a></li> </ul> +<h2>Menu with custom markup</h2> <div id="menu5"> <blockquote><a href="#">Aberdeen</a></blockquote> <blockquote><a href="#">Ada</a></blockquote> @@ -231,6 +213,7 @@ </blockquote> </div> +<h2>Menu with custom markup, multi-line items</h2> <div class="menuElement" id="menu6"> <div class="address-item"> <a href="#"> @@ -274,13 +257,10 @@ </div> </div> -<div class="ui-widget" style="clear: left; margin-top:2em; font-family:Arial"> +<div style="position: absolute; top: 1em; right: 1em;"> Log: - <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div> + <div id="log" style="height: 400px; width: 300px; overflow: auto; border: 1px solid #000;"></div> </div> -<button id="toggle-disable">Disable / Enable</button> -<button id="toggle-destroy">Destroy / Create</button> - </body> </html>
\ No newline at end of file diff --git a/tests/visual/menu/tablemenu.html b/tests/visual/menu/tablemenu.html deleted file mode 100644 index ca4345aed..000000000 --- a/tests/visual/menu/tablemenu.html +++ /dev/null @@ -1,68 +0,0 @@ -<!doctype html> -<html> -<head> - <meta charset="utf-8"> - <title>Menu Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var table = $("table"); - var colgroup = table.find("colgroup"); - var menu = $("<ul>").insertAfter(table); - var thead = table.find("thead"); - thead.children("tr").addClass("ui-state-default"); - var rows = table.find("tbody tr"); - $("<table>").width("100%").append(colgroup.clone()).append(thead).wrap("<li>").parent().appendTo(menu); - rows.each(function() { - $("<table>").width("100%").append(colgroup.clone()).append(this).wrap("<li><a></a></li>").parent().parent().appendTo(menu); - }); - - menu.menu({ - select: function(event, ui) { - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); - } - }); - }); - </script> - <style> - body { font-size:62.5%; } - .ui-menu { width: 200px; } - </style> -</head> -<body> - -<table> - <colgroup><col style="width: 50%"><col style="width: 50%"></colgroup> - <thead> - <tr> - <th>Firstname</th> - <th>Lastname</th> - </tr> - </thead> - <tbody> - <tr> - <td>Scott</td> - <td>Gonzo</td> - </tr> - <tr> - <td>Richy</td> - <td>Worth</td> - </tr> - </tbody> -</table> - -<div class="ui-widget" style="clear: left; margin-top:2em; font-family:Arial"> - Log: - <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div> -</div> - -<button id="toggle-disable">Disable / Enable</button> -<button id="toggle-destroy">Destroy / Create</button> - -</body> -</html> diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index 64c5d2300..545dc6993 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -1,91 +1,143 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>Position Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var inputs = $("input"); - $("ul").insertAfter(inputs); - $(window).resize(function() { - inputs.each(function() { - var input = $(this).position({ - my: this.id.replace(/-/, " "), - at: this.id.replace(/-/, " "), - of: "#container", - collision: "none" - }); - var menu = $(this).next().menu() - menu.position({ - my: "left+30 top+20", - at: "left bottom", - of: this, - using: function( position, feedback ) { - input.val(feedback.horizontal + " " + feedback.vertical) - $(this).offset( position ); - $(this) - .removeClass("left right top bottom center middle") - .addClass(feedback.horizontal) - .addClass(feedback.vertical); - } - }); - }); - }).resize(); - }); - </script> + <meta charset="utf-8"> + <title>Position Visual Test</title> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.mouse.js"></script> + <script src="../../../ui/jquery.ui.draggable.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> <style> - input, .ui-menu { position: absolute; } - .ui-menu { width: 200px; } - html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; } - #container { width: 95%; height: 95%; border: 1px solid black; margin: auto; } - .ui-menu:before { - font-size: 12pt; - content: "↑"; - position: absolute; - top: -22px; - left: 5px; + .demo { + position: relative; + height: 500px; + width: 80%; + margin: 20px auto; + background: #eee; } - .right:before { - left: auto; - right: 5px; + #target { + width: 60%; + margin: 0 auto; + border: 1px solid #777; + background-color: #fbca93; + text-align: center; + cursor: move; } - .bottom:before { - content: "↓"; - top: auto; - bottom: -19px; + .positionable { + position: absolute; + background-color: #bcd5e6; + text-align: center; + } + .extra-margin { + margin: 0 15px 15px 0; } </style> + <script> + $(function() { + var within = $( ".demo" ), + positionable = $( ".positionable" ); + function position() { + positionable.position({ + of: $( "#target" ), + my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), + at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), + within: within, + collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() + }); + } + + positionable.css( "opacity", 0.5 ); + + $( "#target" ).draggable({ + drag: function() { position(); } + }); + + $( "#within" ).click(function() { + within = within.is( ".demo" ) ? $( window ) : $( ".demo" ); + position(); + }); + + $( "#margin" ).click(function() { + positionable.toggleClass( "extra-margin" ); + position(); + }); + + $( "select, input" ).bind( "click keyup change", function() { position(); } ); + + position(); + }); + </script> </head> <body> -<div id="container"></div> +<div class="demo"> + <div id="target"> + <p>This is the position target element.</p> + </div> + + <div class="positionable" style="width: 75px; height: 75px;"> + <p>to position</p> + </div> -<input id="left-top" /> -<input id="left-center" /> -<input id="left-bottom" /> -<input id="center-top" /> -<input id="center-center" /> -<input id="center-bottom" /> -<input id="right-top" /> -<input id="right-center" /> -<input id="right-bottom" /> + <div class="positionable" style="width:120px; height: 40px;"> + <p>to position 2</p> + </div> -<ul> - <li><a href="#">Java</a></li> - <li><a href="#">JavaScript</a></li> - <li><a href="#">Perl</a></li> - <li><a href="#">Ruby</a></li> - <li><a href="#">C++</a></li> - <li><a href="#">Python</a></li> - <li><a href="#">C#</a></li> -</ul> + <form style="padding: 20px; margin-top: 75px;"> + <h2>Position configuration:</h2> + <div style="padding-bottom: 20px;"> + <b>my:</b> + <select id="my_horizontal"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right" selected="selected">right</option> + </select> + <select id="my_vertical"> + <option value="top">top</option> + <option value="middle">center</option> + <option value="bottom">bottom</option> + </select> + </div> + <div style="padding-bottom: 20px;"> + <b>at:</b> + <select id="at_horizontal"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right" selected="selected">right</option> + </select> + <select id="at_vertical"> + <option value="top">top</option> + <option value="middle">center</option> + <option value="bottom">bottom</option> + </select> + </div> + <div style="padding-bottom: 20px;"> + <b>collision:</b> + <select id="collision_horizontal"> + <option value="flip">flip</option> + <option value="fit">fit</option> + <option value="flipfit">flipfit</option> + <option value="none">none</option> + </select> + <select id="collision_vertical"> + <option value="flip">flip</option> + <option value="fit">fit</option> + <option value="flipfit">flipfit</option> + <option value="none">none</option> + </select> + </div> + <div> + <label for="within">within:</label> + <input id="within" type="checkbox" checked="checked"> + </div> + <div> + <label for="margin">extra margin:</label> + <input id="margin" type="checkbox"> + </div> + </form> +</div> </body> </html> diff --git a/tests/visual/position/position_feedback.html b/tests/visual/position/position_feedback.html index 006a1be02..bea1dd2c2 100644 --- a/tests/visual/position/position_feedback.html +++ b/tests/visual/position/position_feedback.html @@ -2,8 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>Position Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css"> + <title>Position Visual Test: Feedback</title> <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> <script src="../../../jquery-1.7.2.js"></script> <script src="../../../ui/jquery.ui.core.js"></script> @@ -86,6 +85,7 @@ width: 75px; height: 25px; padding: 5px; + font-size: 62.5%; } #target { height: 75px; diff --git a/tests/visual/position/position_feedback_rotate.html b/tests/visual/position/position_feedback_rotate.html deleted file mode 100644 index 11138b112..000000000 --- a/tests/visual/position/position_feedback_rotate.html +++ /dev/null @@ -1,109 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>Position Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css"> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> - <script src="../../../jquery-1.7.2.js"></script> - <script src="../../../ui/jquery.ui.core.js"></script> - <script src="../../../ui/jquery.ui.widget.js"></script> - <script src="../../../ui/jquery.ui.position.js"></script> - <script src="../../../ui/jquery.ui.menu.js"></script> - <script> - $(function() { - function using( position, feedback ) { - var angleRad = Math.atan2( - feedback.target.top + feedback.target.height / 2 - feedback.element.top - feedback.element.height / 2, - feedback.target.left + feedback.target.width / 2 - feedback.element.left - feedback.element.width / 2 - ) * 180 / Math.PI, - angle = Math.round( angleRad * 100) / 100; - $( this ) - .css( position ) - .text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important + " " + angle + "°" ) - .css({ - "-webkit-transform": "rotate(" + angle + "deg)", - "-moz-transform": "rotate(" + angle + "deg)", - "-ms-transform": "rotate(" + angle + "deg)", - "-o-transform": "rotate(" + angle + "deg)", - "transform": "rotate(" + angle + "deg)" - }); - } - - var element = $( ".element" ), - target = $( "#target" ).position({ - my: "center", - at: "center", - of: window - }), - targetOffset = target.offset(); - oppositeElement = element.clone().width( 50 ).appendTo( "body" ), - leftElement = element.clone().width( 50 ).height( 150 ).appendTo( "body" ), - rightElement = element.clone().height( 150 ).width( 150 ).appendTo( "body" ); - - $.each([ - "center top-100", - "right+25 top-50", - "right+75 top", - "right+75 center", - "right+75 bottom", - "right+25 bottom+50", - "center bottom+100", - "left-25 bottom+50", - "left-75 bottom", - "left-75 center", - "left-75 top", - "left-25 top-50" - ], function( index, direction ) { - element.clone().insertAfter( target ).position({ - my: "center", - at: direction, - of: target, - using: using - }); - }); - - element.width( 150 ); - $( document ).on( "mousemove", function( event ) { - var base = { - my: "left top", - at: "left top", - of: target, - using: using - }; - element.position( $.extend({ - offset: (event.pageX - targetOffset.left) + " " + (event.pageY - targetOffset.top) - }, base )); - oppositeElement.position( $.extend({ - offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top)) - }, base )); - leftElement.position( $.extend({ - offset: (-0.9 * (event.pageX - targetOffset.left)) + " " + (0.9 * (event.pageY - targetOffset.top)) - }, base )); - rightElement.position( $.extend({ - offset: (0.9 * (event.pageX - targetOffset.left)) + " " + (-0.9 * (event.pageY - targetOffset.top)) - }, base )); - }); - }); - </script> - <style> - #target, .element { - position: absolute; - border: 1px solid black; - border-radius: 5px; - width: 75px; - height: 25px; - padding: 5px; - } - #target { - height: 75px; - } - </style> -</head> -<body> - -<div id="target">all around me</div> -<div class="element"></div> - -</body> -</html> diff --git a/tests/visual/position/position_fit.html b/tests/visual/position/position_fit.html deleted file mode 100644 index a70423c79..000000000 --- a/tests/visual/position/position_fit.html +++ /dev/null @@ -1,147 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Position Visual Test: Fit</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var inputs = $("input"); - $("ul").insertAfter(inputs); - inputs.each(function(index) { - $(this).position({ - my: $(this).data("position"), - at: $(this).data("position"), - of: "#container"+index, - collision: "none" - }); - if(index < 3) { - $(this).next().menu().position({ - my: "left top", - at: "left bottom", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 3 && index < 6) { - $(this).next().menu().position({ - my: "right top", - at: "right bottom", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 6 && index < 9) { - $(this).next().menu().position({ - my: "center top", - at: "center bottom", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 9 && index < 12) { - $(this).next().menu().position({ - my: "left top", - at: "left bottom", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 12 && index < 15) { - $(this).next().menu().position({ - my: "center center", - at: "center center", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 15) { - $(this).next().menu().position({ - my: "left bottom", - at: "left top", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - }); - }); - </script> - <style> - input, .ui-menu { position: absolute; } - .ui-menu { width: 300px; } - #ui-menu-9, #ui-menu-10, #ui-menu-11, #ui-menu-12, #ui-menu-13, #ui-menu-14, #ui-menu-15, #ui-menu-16, #ui-menu-17 { width: auto; } - html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; } - .container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 15px; margin-bottom: 135px; } - .container2 { width: 200px; height: 100px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 15px; margin-bottom: 135px; } - </style> -</head> -<body> - -<div id="container0" class="container"></div> -<div id="container1" class="container"></div> -<div id="container2" class="container"></div> -<div style="clear:both;"></div> -<div id="container3" class="container"></div> -<div id="container4" class="container"></div> -<div id="container5" class="container"></div> -<div style="clear:both;"></div> -<div id="container6" class="container"></div> -<div id="container7" class="container"></div> -<div id="container8" class="container"></div> -<div style="clear:both;"></div> -<div id="container9" class="container2"></div> -<div id="container10" class="container2"></div> -<div id="container11" class="container2"></div> -<div style="clear:both;"></div> -<div id="container12" class="container2"></div> -<div id="container13" class="container2"></div> -<div id="container14" class="container2"></div> -<div style="clear:both;"></div> -<div id="container15" class="container2"></div> -<div id="container16" class="container2"></div> -<div id="container17" class="container2"></div> - -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> - -<input data-position="left top" /> -<input data-position="center center" /> -<input data-position="right bottom" /> -<input data-position="left top" /> -<input data-position="center center" /> -<input data-position="right bottom" /> -<input data-position="left top" /> -<input data-position="center center" /> -<input data-position="right bottom" /> - -<ul> - <li><a href="#">Java</a></li> - <li><a href="#">JavaScript</a></li> - <li><a href="#">Perl</a></li> - <li><a href="#">Ruby</a></li> - <li><a href="#">C++</a></li> - <li><a href="#">Python</a></li> - <li><a href="#">C#</a></li> -</ul> - -</body> -</html> diff --git a/tests/visual/position/position_flip.html b/tests/visual/position/position_flip.html deleted file mode 100644 index b67c76fb3..000000000 --- a/tests/visual/position/position_flip.html +++ /dev/null @@ -1,76 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Position Visual Test: Flip</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var inputs = $("input"); - $("ul").insertAfter(inputs); - inputs.each(function(index) { - $(this).position({ - my: $(this).data("position"), - at: $(this).data("position"), - of: "#container"+index, - collision: "none" - }); - $(this).next().menu().position({ - my: "left top", - at: "left bottom", - of: this, - within: "#container"+index - }); - }); - }); - </script> - <style> - input, .ui-menu { position: absolute; } - .ui-menu { width: 300px; } - #ui-menu-6, #ui-menu-7, #ui-menu-8 { width: auto; } - html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; } - .container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 150px; } - </style> -</head> -<body> - -<div id="container0" class="container"></div> -<div id="container1" class="container"></div> -<div id="container2" class="container"></div><br> -<div style="clear:both;"></div> -<div id="container3" class="container" style="width:300px;"></div> -<div id="container4" class="container" style="width:300px;"></div> -<div id="container5" class="container" style="width:300px;"></div> -<div style="clear:both;"></div> -<div id="container6" class="container" style="height:100px; margin-bottom: 500px;"></div> -<div id="container7" class="container" style="height:100px; margin-bottom: 500px;"></div> -<div id="container8" class="container" style="height:100px; margin-bottom: 500px;"></div> - -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left center" /> -<input data-position="center center" /> -<input data-position="right center" /> -<input data-position="left bottom" /> -<input data-position="center center" /> -<input data-position="right bottom" /> - -<ul> - <li><a href="#">Java</a></li> - <li><a href="#">JavaScript</a></li> - <li><a href="#">Perl</a></li> - <li><a href="#">Ruby</a></li> - <li><a href="#">C++</a></li> - <li><a href="#">Python</a></li> - <li><a href="#">C#</a></li> -</ul> - -</body> -</html> diff --git a/tests/visual/position/position_flipfit.html b/tests/visual/position/position_flipfit.html deleted file mode 100644 index 840dd5868..000000000 --- a/tests/visual/position/position_flipfit.html +++ /dev/null @@ -1,85 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Position Visual Test: FlipFit</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var inputs = $("input"); - $("ul").insertAfter(inputs); - inputs.each(function(index) { - $(this).position({ - my: $(this).data("position"), - at: $(this).data("position"), - of: "#container"+index, - collision: "none" - }); - $(this).next().menu().position({ - my: index > 2 && index < 6 ? "right top" : "left top", - at: index > 2 && index < 6 ? "right bottom" : "left bottom", - of: this, - within: "#container"+index, - collision: "flipfit" - }); - }); - }); - </script> - <style> - input, .ui-menu { position: absolute; } - .ui-menu { width: 300px; } - #ui-menu-3, #ui-menu-4, #ui-menu-5 { width: 185px; } - #ui-menu-9, #ui-menu-10, #ui-menu-11 { width: auto; } - html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; } - .container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 150px; } - </style> -</head> -<body> - -<div id="container0" class="container"></div> -<div id="container1" class="container"></div> -<div id="container2" class="container"></div><br> -<div style="clear:both;"></div> -<div id="container3" class="container"></div> -<div id="container4" class="container"></div> -<div id="container5" class="container"></div><br> -<div style="clear:both;"></div> -<div id="container6" class="container" style="width:300px;"></div> -<div id="container7" class="container" style="width:300px;"></div> -<div id="container8" class="container" style="width:300px;"></div> -<div style="clear:both;"></div> -<div id="container9" class="container" style="height:100px; margin-bottom: 500px;"></div> -<div id="container10" class="container" style="height:100px; margin-bottom: 500px;"></div> -<div id="container11" class="container" style="height:100px; margin-bottom: 500px;"></div> - -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left center" /> -<input data-position="center center" /> -<input data-position="right center" /> -<input data-position="left bottom" /> -<input data-position="center center" /> -<input data-position="right bottom" /> - -<ul> - <li><a href="#">Java</a></li> - <li><a href="#">JavaScript</a></li> - <li><a href="#">Perl</a></li> - <li><a href="#">Ruby</a></li> - <li><a href="#">C++</a></li> - <li><a href="#">Python</a></li> - <li><a href="#">C#</a></li> -</ul> - -</body> -</html> diff --git a/tests/visual/position/position_margin.html b/tests/visual/position/position_margin.html deleted file mode 100644 index 2e3b63266..000000000 --- a/tests/visual/position/position_margin.html +++ /dev/null @@ -1,42 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Position Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript"> - $(function() { - $( "#elem" ).position({ - my: "right bottom", - at: "right bottom", - of: window, - collision: "fit" - }); - }); - </script> - <style> - #elem { - position: absolute; - top: 100px; - left: 100px; - width: 200px; - height: 200px; - box-shadow: 10px 10px 5px #888; - -moz-box-shadow: 10px 10px 5px #888; - -webkit-box-shadow: 10px 10px 5px #888; - background-color: #aaa; - margin: 15px; - } - </style> -</head> -<body> - -<div id="elem"></div> - -</body> -</html> diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html deleted file mode 100644 index 692cb1067..000000000 --- a/tests/visual/position/position_within.html +++ /dev/null @@ -1,200 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>Position Visual Test: Containing Element</title> - - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - - <script src="../../../jquery-1.7.2.js"></script> - <script src="../../../ui/jquery.ui.core.js"></script> - <script src="../../../ui/jquery.ui.widget.js"></script> - <script src="../../../ui/jquery.ui.mouse.js"></script> - <script src="../../../ui/jquery.ui.draggable.js"></script> - <script src="../../../ui/jquery.ui.position.js"></script> - - <style> - html, body { - height:100%; - width:100%; - margin:0; - /* force scroll bar*/ - min-height:800px; - min-width:800px; - - /* IE6 needs this */ - text-align:center; - } - .demo-description { - text-align:center; - padding:1.5em; - } - .demo-container { - background:#aaa; - width:80%; - height:80%; - - text-align:left; - margin:0 auto; - position:relative; - padding:10px; - } - .demo { - background:#eee; - overflow:hidden; - position:relative; - height:100%; - /* IE6 needs this */ - width:100%; - } - #parent { - width: 60%; - margin: 10px auto; - padding: 5px; - border: 1px solid #777; - background-color: #fbca93; - text-align: center; - cursor:move; - } - .positionable { - width: 75px; - height: 75px; - position: absolute; - display: block; - right: 0; - bottom: 0; - background-color: #bcd5e6; - text-align: center; - cursor:move; - } - .ui-flipped-top { - border-top: 3px solid #000000; - } - .ui-flipped-bottom { - border-bottom: 3px solid #000000; - } - .ui-flipped-left { - border-left: 3px solid #000000; - } - .ui-flipped-right { - border-right: 3px solid #000000; - } - select, input { - margin-left: 15px; - } - </style> - <script> - $(function() { - function position( using ) { - $( ".positionable" ).position({ - of: $( "#parent" ), - my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), - at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), - offset: $( "#offset" ).val(), - using: using, - within: $( ".demo" ), - collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() - }); - } - $( ".demo" ).css("overflow","scroll"); - - $( ".positionable" ).css( "opacity", 0.5 ); - - $( ":input" ).bind( "click keyup change", function() { position(); } ); - - $( "#parent" ).draggable({ - drag: function() { position(); } - }); - - $( ".positionable" ).draggable({ - drag: function( event, ui ) { - // reset offset before calculating it - $( "#offset" ).val( "0" ); - position(function( result ) { - var demo = $( ".demo" ); - $( "#offset" ).val( "" + ( ui.offset.left - result.left - demo.offset().left + demo.scrollLeft() ) + - " " + ( ui.offset.top - result.top - demo.offset().top + demo.scrollTop() ) ); - position(); - }); - } - }); - - position(); - }); - </script> -</head> -<body> - -<div class="demo-description"> - Use the form controls to configure the positioning, or drag the positioned element to modify its offset. - <br/>Drag around the parent element to see collision detection in action. -</div><!-- End demo-description --> - -<div class="demo-container"> -<div class="demo"> - - <div id="parent"> - <p>This is the position parent element.</p> - </div> - - <div class="positionable"> - <p>to position</p> - </div> - - <div class="positionable" style="width:120px; height: 40px;"> - <p>to position 2</p> - </div> - - <div style="padding: 20px; margin-top: 75px;"> - position... - <div style="padding-bottom: 20px;"> - <b>my:</b> - <select id="my_horizontal"> - <option value="left">left</option> - <option value="center">center</option> - <option value="right" selected="selected">right</option> - </select> - <select id="my_vertical"> - <option value="top">top</option> - <option value="middle">center</option> - <option value="bottom">bottom</option> - </select> - </div> - <div style="padding-bottom: 20px;"> - <b>at:</b> - <select id="at_horizontal"> - <option value="left">left</option> - <option value="center">center</option> - <option value="right" selected="selected">right</option> - </select> - <select id="at_vertical"> - <option value="top">top</option> - <option value="middle">center</option> - <option value="bottom">bottom</option> - </select> - </div> - <div style="padding-bottom: 20px;"> - <b>offset:</b> - <input id="offset" type="text" size="15"/> - </div> - <div style="padding-bottom: 20px;"> - <b>collision:</b> - <select id="collision_horizontal"> - <option value="flip">flip</option> - <option value="fit">fit</option> - <option value="none">none</option> - </select> - <select id="collision_vertical"> - <option value="flip">flip</option> - <option value="fit">fit</option> - <option value="none">none</option> - </select> - </div> - </div> - -</div><!-- End demo --> -</div> - -</body> -</html> diff --git a/tests/visual/tooltip/ajaxcontent.php b/tests/visual/tooltip/ajaxcontent.php deleted file mode 100644 index a689a734d..000000000 --- a/tests/visual/tooltip/ajaxcontent.php +++ /dev/null @@ -1,2 +0,0 @@ -<?php sleep(1); ?> -<strong>Hello</strong> world!
\ No newline at end of file diff --git a/tests/visual/tooltip/animations.html b/tests/visual/tooltip/animations.html index 38ee28f1d..24fe02905 100644 --- a/tests/visual/tooltip/animations.html +++ b/tests/visual/tooltip/animations.html @@ -1,73 +1,73 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> - <title>Tooltip Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.bounce.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.drop.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.explode.js"></script> - <!-- - <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> - --> - <script type="text/javascript"> + <title>Tooltip Visual Test: Animations</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.tooltip.js"></script> + <script src="../../../ui/jquery.effects.core.js"></script> + <script src="../../../ui/jquery.effects.blind.js"></script> + <script src="../../../ui/jquery.effects.bounce.js"></script> + <script src="../../../ui/jquery.effects.drop.js"></script> + <script src="../../../ui/jquery.effects.explode.js"></script> + <style> + pre { + width: 250px; + border: 1px solid #000; + padding: .5em; + } + </style> + <script> $(function() { - var animations = [{}, { - show: { - effect: "slideDown" - }, - hide: { - effect: "slideUp" - } - }, { - show: { - effect: "explode" - }, - hide: { - effect: "explode" - } - }, { - show: { - effect: "bounce" - }, - hide: { - effect: "blind" - } - }, - { - show: { - effect: "drop", - direction: "right" - }, - hide: { - effect: "drop", - direction: "right" - } - }]; - $.each(animations, function(index, animation) { - var text = JSON.stringify(animation); - $("<span></span>").attr("title", text).text(text).tooltip({ - show: animation.show, - hide: animation.hide - }).wrap("<li></li>").parent().appendTo("ul"); + $( "pre" ).each(function( index, elem ) { + $( elem ) + .attr( "title", "animated tooltips" ) + .tooltip( $.parseJSON( $( elem ).text() ) ); }); }); </script> </head> <body> -<div style="width:300px"> - <ul class="ui-widget ui-widget-header"> - </ul> -</div> +<pre>{}</pre> +<pre>{ + "show": { + "effect": "slideDown" + }, + "hide": { + "effect": "slideUp" + } +}</pre> +<pre>{ + "show": { + "effect": "explode" + }, + "hide": { + "effect": "explode" + } +}</pre> +<pre>{ + "show": { + "effect": "bounce" + }, + "hide": { + "effect": "blind" + } +}</pre> +<pre>{ + "show": { + "effect": "drop", + "direction": "right" + }, + "hide": { + "effect": "drop", + "direction": "right" + } +}</pre> + </body> </html> diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html index da811645c..e0ff27aa8 100644 --- a/tests/visual/tooltip/tooltip.html +++ b/tests/visual/tooltip/tooltip.html @@ -1,121 +1,104 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tooltip Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script> - <!-- - <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> - --> - <script type="text/javascript"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script src="../../../ui/jquery.ui.tooltip.js"></script> + <style> + .group { + margin-top: 2em; + } + </style> + <script> $(function() { - $.fn.themeswitcher && $('<div/>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); - - function enable() { - // default - $("#context1, form, #childish, #nested-input").tooltip(); - - // custom class, replaces ui-widget-content - $("#context2").tooltip({ - tooltipClass: "ui-widget-header" - }); - $("#right1").tooltip({ - tooltipClass: "ui-state-error" - }); - - // synchronous content - $("#footnotes").tooltip({ - items: "[href^='#']", - content: function() { - return $($(this).attr("href")).html(); - } - }); - // asynchronous content - $("#ajax").tooltip({ - content: function(response) { - $.get("ajaxcontent.php", response); - return "Loading..."; - } - }); - // asynchronous content with caching - var content; - $("#ajax2").tooltip({ - content: function(response) { - if (content) { - return content; - } - $.ajax({ - url: "ajaxcontent.php", - cache: false, - success: function(result) { - content = result; - response(result); - } - }); - return "Loading..."; - } - }); - - // custom position - $("#right2").tooltip({ - tooltipClass: "ui-state-highlight", - position: { - my: "center top", - at: "center bottom", - offset: "0 10" - } - }); + // default + $( "#context1, form, #childish, #nested-input" ).tooltip(); - $("#button1").button(); - $("#button2").button({ - icons: { - primary: "ui-icon-wrench" - } - }); - $("#button3, #button4").button({ - icons: { - primary: "ui-icon-wrench" - }, - text: false - }); - $("#buttons").tooltip({ - position: { - my: "center bottom", - at: "center top", - offset: "0 -5" + // custom class, replaces ui-widget-content + $( "#context2" ).tooltip({ + tooltipClass: "ui-widget-header" + }); + $( "#right1" ).tooltip({ + tooltipClass: "ui-state-error" + }); + + // synchronous content + $( "#footnotes" ).tooltip({ + items: "[href^='#']", + content: function() { + return $( $( this ).attr( "href" ) ).html(); + } + }); + + // asynchronous content + $( "#async" ).tooltip({ + content: function( response ) { + setTimeout(function() { + response( "I loaded <strong>asyncrhonously</strong>!" ); + }, 1000 ); + return "Loading..."; + } + }); + + // asynchronous content with caching + var content; + $( "#async2" ).tooltip({ + content: function( response ) { + if ( content ) { + return content; } - }); - } - enable(); - - $("#disable").toggle(function() { - $(":ui-tooltip").tooltip("disable"); - }, function() { - $(":ui-tooltip").tooltip("enable"); + setTimeout(function() { + content = "<strong>Hello</strong> world!"; + response( content ); + }, 1000 ); + return "Loading..."; + } + }); + + // custom position + $( "#right2" ).tooltip({ + tooltipClass: "ui-state-highlight", + position: { + my: "center top", + at: "center bottom", + offset: "0 10" + } + }); + + $( "#button1" ).button(); + $( "#button2" ).button({ + icons: { + primary: "ui-icon-wrench" + } + }); + $( "#button3, #button4" ).button({ + icons: { + primary: "ui-icon-wrench" + }, + text: false }); - $("#toggle").toggle(function() { - $(":ui-tooltip").tooltip("destroy"); - }, function() { - enable(); + $( "#buttons" ).tooltip({ + position: { + my: "center bottom", + at: "center top", + offset: "0 -5" + } }); }); </script> </head> <body> -<div style="width:300px"> - <ul id="context1" class="ui-widget ui-widget-header"> +<div> + <p>Lots of tooltipped elements close together.<br> + Mouse through them quickly and slowly.</p> + <ul id="context1"> <li><a href="#" title="Tooltip text 1">Anchor 1</a></li> <li><a href="#" title="Tooltip text 2">Anchor 2</a></li> <li><a href="#" title="Tooltip text 3">Anchor 3</a></li> @@ -124,68 +107,83 @@ <li><a href="#" title="Tooltip text 6 more Tooltip text Tooltip text ">Anchor 6</a></li> </ul> - <div id="right1" style="position: absolute; right: 1em" title="right aligned element"> - collision detection should kick in around here - </div> - - <div id="footnotes" style="margin: 2em 0"> - <a href="#footnote1">I'm a link to a footnote.</a> - <a href="#footnote2">I'm another link to a footnote.</a> + <div class="group" style="position: absolute; right: 1em; text-align: right;"> + <p>These elements are right aligned.<br> + One collides and one uses custom position.</p> + <p id="right1" title="right aligned element"> + collision detection should kick in around here + </p> + <p id="right2" title="right aligned element with custom position"> + right aligned with custom position + </p> </div> - <div id="right2" style="position: absolute; right: 1em" title="right aligned element with custom position"> - right aligned with custom position - </div> - - <div id="ajax" style="width: 100px;" class="ui-widget-content" title="never be seen"> - gets its content via ajax - </div> - <div id="ajax2" style="width: 100px;" class="ui-widget-content" title="never be seen"> - gets its content via ajax, caches the response + <div class="group"> + <p>These footnotes pull content form the elements they link to.</p> + <div id="footnotes"> + <a href="#footnote1">I'm a link to a footnote.</a> + <a href="#footnote2">I'm another link to a footnote.</a> + </div> </div> - <div id="context2" class="ui-widget ui-widget-content"> - <span title="something" style="border:1px solid blue">span</span> - <div title="something else" style="border:1px solid red;"> - div - <span title="something more" style="border:1px solid green;">nested span</span> + <div class="group"> + <p>These elements load their content asynchronously.<br> + There should be a loading message while the content is retrieved.</p> + <div id="async" style="width: 100px;" class="ui-widget-content" title="never be seen"> + async + </div> + <div id="async2" style="width: 100px;" class="ui-widget-content" title="never be seen"> + async + cache </div> </div> - <div id="childish" class="ui-widget ui-widget-content" style="margin: 2em 0; border: 1px solid black;" title="element with child elements"> - Text in <strong>bold</strong>. + <div class="group" style="width: 300px;"> + <p>Nested elements.</p> + <div id="context2"> + <div title="something else" style="border:1px solid red;"> + tooltipped + <span title="something more" style="border:1px solid green; padding-left: 50px;">nested tooltipped</span> + </div> + </div> + <div id="childish" style="border: 1px solid black;" title="element with child elements"> + Text in <strong>bold</strong>. + </div> </div> - <form style="margin: 2em 0;"> - <div> - <label for="first">First Name:</label> - <input id="first" title="Your first name is optional" /> - </div> - <div> - <label for="last">Last Name:</label> - <input id="last" title="Your last name is optional" /> + <div class="group"> + <p>Play around with focusing and hovering of form elements.</p> + <form> + <div> + <label for="first">First Name:</label> + <input id="first" title="Your first name is optional"> + </div> + <div> + <label for="last">Last Name:</label> + <input id="last" title="Your last name is optional"> + </div> + </form> + + <p>Some inputs nested inside labels:</p> + <div id="nested-input"> + <label title="test"><input type="checkbox">This is a test</label> + <label title="test2"><input type="checkbox">This is a test</label> + <label><input type="checkbox" title="test3">This is a test</label> + <label><input type="checkbox" title="test4">This is a test</label> </div> - </form> - <div id="nested-input"> - <label title="test"><input type="checkbox">This is a test</label> - <label title="test2"><input type="checkbox">This is a test</label> - <label><input type="checkbox" title="test3">This is a test</label> - <label><input type="checkbox" title="test4">This is a test</label> + <p>Some button widgets:</p> + <div id="buttons"> + <button id="button1" title="Button Tooltip">Button Label</button> + <button id="button2" title="Icon Button">Button with Icon</button> + <button id="button3">Icon Only Button 1</button> + <button id="button4">Icon Only Button 2</button> + </div> </div> - <div id="buttons"> - <button id="button1" title="Button Tooltip">Button Label</button> - <button id="button2" title="Icon Button">Button with Icon</button> - <button id="button3">Icon Only Button 1</button> - <button id="button4">Icon Only Button 2</button> + <div class="group"> + <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div> + <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div> </div> - - <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div> - <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div> - - <button id="disable">Toggle disabled</button> - <button id="toggle">Toggle widget</button> </div> <div style="height: 2000px"></div> |