diff options
Diffstat (limited to 'tests/visual/button/button.html')
| -rw-r--r-- | tests/visual/button/button.html | 184 |
1 files changed, 69 insertions, 115 deletions
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> |