diff options
| author | jzaefferer <joern.zaefferer@gmail.com> | 2010-03-30 13:11:27 +0200 |
|---|---|---|
| committer | jzaefferer <joern.zaefferer@gmail.com> | 2010-03-30 13:11:27 +0200 |
| commit | 42b419d27adbe6f1fc504a7fe42b847d9b9c0335 (patch) | |
| tree | 352b048226bac1ef19e6d9983ada2fbfc0821caa | |
| parent | 415ee934fa98eeb6773504af8207374dc64f4d5e (diff) | |
| parent | 9fa157840f0bfacfd4190bd6a159cba8ac2107b8 (diff) | |
| download | jquery-ui-42b419d27adbe6f1fc504a7fe42b847d9b9c0335.tar.gz jquery-ui-42b419d27adbe6f1fc504a7fe42b847d9b9c0335.zip | |
Merge branch 'master' into checksums
28 files changed, 902 insertions, 256 deletions
diff --git a/AUTHORS.txt b/AUTHORS.txt index 637175b76..b2168655e 100644 --- a/AUTHORS.txt +++ b/AUTHORS.txt @@ -1,8 +1,8 @@ -jQuery UI Authors (http://ui.jquery.com/about) +jQuery UI Authors (http://jqueryui.com/about) This software consists of voluntary contributions made by many individuals. For exact contribution history, see the revision history -and logs, available at http://jquery-ui.googlecode.com/svn/ +and logs, available at http://github.com/jquery/jquery-ui Brandon Aaron Paul Bakaus (paulbakaus.com) diff --git a/build/build.xml b/build/build.xml index 913d13693..826ea0c9e 100644 --- a/build/build.xml +++ b/build/build.xml @@ -28,18 +28,19 @@ <property name="theme.dir" value="${ui.dir}/themes/base/" /> <property name="docs.dir" value="${ui.dir}/docs/" /> - <property name="min.folder" value="${dist.dir}/ui/minified" /> + <property name="min.dir" value="${dist.dir}/ui/minified" /> <property name="concatenated" value="jquery-ui" /> <property name="concatenated.i18n" value="jquery-ui-i18n" /> <property name="core.files" value="jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js, jquery.ui.droppable.js, jquery.ui.resizable.js, jquery.ui.selectable.js, jquery.ui.sortable.js, jquery.effects.core.js" /> + <property name="core.files.min" value="jquery.ui.core.min.js, jquery.ui.widget.min.js, jquery.ui.mouse.min.js, jquery.ui.draggable.min.js, jquery.ui.droppable.min.js, jquery.ui.resizable.min.js, jquery.ui.selectable.min.js, jquery.ui.sortable.min.js, jquery.effects.core.min.js" /> <property description="Google Closure" name="closure-jar" value="${build.dir}/google-compiler-20091218.jar" /> - <target name="deploy-release" depends="docs-download, concatenate, minify, copy, replace-version, prepend-header, zip" description="Release builder"> + <target name="deploy-release" depends="clean, docs-download, concatenate, minify, copy, replace-version, prepend-header, zip" description="Release builder"> </target> - + <target name="replace-version"> <replaceregexp match="@VERSION" replace="${release.version}" flags="g" byline="true"> <fileset dir="${dist.dir}/ui/" includes="*.js"/> @@ -49,7 +50,6 @@ </target> <target name="prepend-header"> - <!-- TODO: refactor this ugly mess --> <copy todir="${dist.dir}/headers/"> <fileset dir="${dist.dir}/ui/" includes="*.js" /> </copy> @@ -57,7 +57,7 @@ <fileset dir="${dist.dir}/headers/" includes="*.js"/> </replaceregexp> <for param="file"> - <path><fileset dir="${dist.dir}/ui/minified/" includes="*.js" /></path> + <path><fileset dir="${min.dir}/" includes="*.js" /></path> <sequential> <propertyregex override="yes" property="target" input="@{file}" regexp=".*[\\/](.+)\.min\.js$" replace="\1"/> <concat destfile="${dist.dir}/ui-headered/${target}.min.js"> @@ -66,9 +66,33 @@ </concat> </sequential> </for> - <copy todir="${dist.dir}/ui/minified"> + <copy todir="${min.dir}"> <fileset dir="${dist.dir}/ui-headered/" includes="*.js" /> </copy> + + <!-- once more for the i18n files --> + <!-- need to clean up headers in those files first + <copy todir="${dist.dir}/headers/i18n/"> + <fileset dir="${dist.dir}/ui/i18n/" includes="*.js" /> + </copy> + <replaceregexp match="^(\/\*.*?\*\/\s).+" replace="\1" flags="s"> + <fileset dir="${dist.dir}/headers/i18n/" includes="*.js"/> + </replaceregexp> + <for param="file"> + <path><fileset dir="${min.dir}/i18n/" includes="*.js" /></path> + <sequential> + <propertyregex override="yes" property="target" input="@{file}" regexp=".*[\\/](.+)\.min\.js$" replace="\1"/> + <concat destfile="${dist.dir}/ui-headered/i18n/${target}.min.js"> + <header file="${dist.dir}/headers/i18n/${target}.js" /> + <fileset file="@{file}" /> + </concat> + </sequential> + </for> + <copy todir="${min.dir}/i18n/"> + <fileset dir="${dist.dir}/ui-headered/i18n/" includes="*.js" /> + </copy> + --> + <delete dir="${dist.dir}/headers/" /> <delete dir="${dist.dir}/ui-headered/" /> </target> @@ -108,45 +132,44 @@ <target name="minify" depends="concatenate" description="Remove all comments and whitespace, no compression, great in combination with GZip"> <echo message="Building minified" /> - <delete dir="${min.folder}/" /> - <mkdir dir="${min.folder}" /> - <delete dir="${min.folder}/i18n/" /> - <mkdir dir="${min.folder}/i18n/" /> + <delete dir="${min.dir}/" /> + <mkdir dir="${min.dir}" /> + <delete dir="${min.dir}/i18n/" /> + <mkdir dir="${min.dir}/i18n/" /> <apply executable="java" parallel="false"> <fileset dir="${src.dir}/" includes="jquery.ui.*.js, jquery.effects.*.js" /> <arg line="-jar" /> - <arg path="build/google-compiler-20091218.jar" /> + <arg path="${closure-jar}" /> <arg value="--warning_level" /> <arg value="QUIET" /> <arg value="--js_output_file" /> <targetfile /> <arg value="--js" /> - <mapper type="glob" from="*.js" to="${min.folder}/*.min.js" /> + <mapper type="glob" from="*.js" to="${min.dir}/*.min.js" /> </apply> + + <concat destfile="${min.dir}/${concatenated}.min.js"> + <filelist dir="${min.dir}" files="${core.files.min}" /> + <fileset dir="${min.dir}" includes="jquery.ui.*.js, jquery.effects.*.js" excludes="${core.files.min}" /> + </concat> - <apply executable="java" parallel="false" verbose="true" dest="${dist.dir}"> - <filelist dir="${dist.dir}/ui/" files="${concatenated}.js" /> + <apply executable="java" parallel="false"> + <fileset dir="${src.dir}/i18n/" includes="jquery.ui.*.js" /> <arg line="-jar" /> - <arg path="build/google-compiler-20091218.jar" /> + <arg path="${closure-jar}" /> <arg value="--warning_level" /> <arg value="QUIET" /> <arg value="--js_output_file" /> <targetfile /> <arg value="--js" /> - <mapper type="glob" from="${concatenated}.js" to="tmpmin" /> + <mapper type="glob" from="*.js" to="${min.dir}/i18n/*.min.js" /> </apply> - <concat destfile="${min.folder}/jquery-ui.min.js"> - <filelist files="${src.dir}/jquery.ui.core.js, ${dist.dir}/tmpmin"/> - <filterchain> - <headfilter lines="9"/> - </filterchain> - </concat> - <concat destfile="${min.folder}/jquery-ui.min.js" append="yes"> - <filelist files="${dist.dir}/tmpmin"/> + + <concat destfile="${min.dir}/i18n/${concatenated.i18n}.min.js"> + <fileset dir="${min.dir}/i18n" includes="jquery.ui.*.js" /> </concat> - <delete file="${dist.dir}/tmpmin"/> - + <echo message="Minified ui/ built." /> </target> diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index e5dc6c92b..4c6b656a1 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -33,7 +33,7 @@ if (!request.term || matcher.test(text)) return { id: $(this).val(), - label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), + label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), value: text }; })); diff --git a/demos/autocomplete/remote.html b/demos/autocomplete/remote.html index 3b0d7096d..9414102e6 100644 --- a/demos/autocomplete/remote.html +++ b/demos/autocomplete/remote.html @@ -18,7 +18,6 @@ } $("#birds").autocomplete({ - // TODO doesn't work when loaded from /demos/#autocomplete|remote source: "search.php", minLength: 2, select: function(event, ui) { diff --git a/external/qunit.js b/external/qunit.js index f2704148e..0dd315530 100644 --- a/external/qunit.js +++ b/external/qunit.js @@ -18,6 +18,7 @@ var QUnit = { stats: { all: 0, bad: 0 }, moduleStats: { all: 0, bad: 0 }, started: +new Date, + updateRate: 1000, blocking: false, autorun: false, assertions: [], @@ -578,7 +579,7 @@ function validTest( name ) { function push(result, actual, expected, message) { message = message || (result ? "okay" : "failed"); - QUnit.ok( result, result ? message + ": " + expected : message + ", expected: " + QUnit.jsDump.parse(expected) + " result: " + QUnit.jsDump.parse(actual) ); + QUnit.ok( result, result ? message + ": " + QUnit.jsDump.parse(expected) : message + ", expected: " + QUnit.jsDump.parse(expected) + " result: " + QUnit.jsDump.parse(actual) ); } function synchronize( callback ) { @@ -590,8 +591,16 @@ function synchronize( callback ) { } function process() { + var start = (new Date()).getTime(); + while ( config.queue.length && !config.blocking ) { - config.queue.shift()(); + if ( config.updateRate <= 0 || (((new Date()).getTime() - start) < config.updateRate) ) { + config.queue.shift()(); + + } else { + setTimeout( process, 13 ); + break; + } } } @@ -679,6 +688,7 @@ QUnit.equiv = function () { var innerEquiv; // the real equiv function var callers = []; // stack to decide between skip/abort functions + var parents = []; // stack to avoiding loops from circular referencing // Determine what is o. @@ -788,28 +798,39 @@ QUnit.equiv = function () { }, "array": function (b, a) { - var i; + var i, j, loop; var len; // b could be an object literal here if ( ! (hoozit(b) === "array")) { return false; - } - + } + len = a.length; if (len !== b.length) { // safe and faster return false; } + + //track reference to avoid circular references + parents.push(a); for (i = 0; i < len; i++) { - if ( ! innerEquiv(a[i], b[i])) { + loop = false; + for(j=0;j<parents.length;j++){ + if(parents[j] === a[i]){ + loop = true;//dont rewalk array + } + } + if (!loop && ! innerEquiv(a[i], b[i])) { + parents.pop(); return false; } } + parents.pop(); return true; }, "object": function (b, a) { - var i; + var i, j, loop; var eq = true; // unless we can proove it var aProperties = [], bProperties = []; // collection of strings @@ -820,18 +841,25 @@ QUnit.equiv = function () { // stack constructor before traversing properties callers.push(a.constructor); - + //track reference to avoid circular references + parents.push(a); + for (i in a) { // be strict: don't ensures hasOwnProperty and go deep - + loop = false; + for(j=0;j<parents.length;j++){ + if(parents[j] === a[i]) + loop = true; //don't go down the same path twice + } aProperties.push(i); // collect a's properties - if ( ! innerEquiv(a[i], b[i])) { + if (!loop && ! innerEquiv(a[i], b[i])) { eq = false; break; } } callers.pop(); // unstack, we are done + parents.pop(); for (i in b) { bProperties.push(i); // collect b's properties @@ -1032,9 +1060,9 @@ QUnit.jsDump = (function() { name:'name', 'class':'className' }, - HTML:true,//if true, entities are escaped ( <, >, \t, space and \n ) + HTML:false,//if true, entities are escaped ( <, >, \t, space and \n ) indentChar:' ',//indentation unit - multiline:true //if true, items in a collection, are separated by a \n, else just a space. + multiline:false //if true, items in a collection, are separated by a \n, else just a space. }; return jsDump; diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html index a7142250e..df0979803 100644 --- a/tests/unit/accordion/accordion.html +++ b/tests/unit/accordion/accordion.html @@ -25,8 +25,7 @@ <style> #main { font-size: 10pt; font-family: 'trebuchet ms', verdana, arial; } - #main h2 { margin: 0; } - #main ul, #main li { padding: 0; } + #navigation * { margin: 0; padding: 0; font-size: 12px; } </style> </head> <body> @@ -39,37 +38,39 @@ <div id="main" style="position: absolute; top: -10000px; left: -10000px;"> - <div id="list1"> - <a>There is one obvious advantage:</a> - <div> - <p> - You've seen it coming! - <br/> - Buy now and get nothing for free! - <br/> - Well, at least no free beer. Perhaps a bear, if you can afford it. - </p> - </div> - <a>Now that you've got...</a> - <div> - <p> - your bear, you have to admit it! - <br/> - No, we aren't selling bears. - </p> - <p> - We could talk about renting one. - </p> - </div> - <a>Rent one bear, ...</a> - <div> - <p> - get two for three beer. - </p> - <p> - And now, for something completely different. - </p> - </div> + <div> + <div id="list1" class="foo"> + <a class="bar">There is one obvious advantage:</a> + <div style="" class="foo"> + <p> + You've seen it coming! + <br/> + Buy now and get nothing for free! + <br/> + Well, at least no free beer. Perhaps a bear, if you can afford it. + </p> + </div> + <a class="bar">Now that you've got...</a> + <div style="" class="foo"> + <p> + your bear, you have to admit it! + <br/> + No, we aren't selling bears. + </p> + <p> + We could talk about renting one. + </p> + </div> + <a class="bar">Rent one bear, ...</a> + <div style="" class="foo"> + <p> + get two for three beer. + </p> + <p> + And now, for something completely different. + </p> + </div> + </div> </div> <div id="navigationWrapper"> diff --git a/tests/unit/accordion/accordion_methods.js b/tests/unit/accordion/accordion_methods.js index 6761d24a6..d15a0b710 100644 --- a/tests/unit/accordion/accordion_methods.js +++ b/tests/unit/accordion/accordion_methods.js @@ -40,21 +40,9 @@ test("init", function() { }); test("destroy", function() { - $("<div></div>").appendTo('body').accordion().accordion("destroy").remove(); - ok(true, '.accordion("destroy") called on element'); - - $([]).accordion().accordion("destroy").remove(); - ok(true, '.accordion("destroy") called on empty collection'); - - $('<div></div>').accordion().accordion("destroy").remove(); - ok(true, '.accordion("destroy") called on disconnected DOMElement'); - - $('<div></div>').accordion().accordion("destroy").accordion("foo").remove(); - ok(true, 'arbitrary method called after destroy'); - - var expected = $('<div></div>').accordion(), - actual = expected.accordion('destroy'); - equals(actual, expected, 'destroy is chainable'); + var beforeHtml = $("#list1").parent().html(); + var afterHtml = $("#list1").accordion().accordion("destroy").parent().html(); + equal( afterHtml, beforeHtml ); }); test("enable", function() { diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js index 0782b4bb7..cc7fc0369 100644 --- a/tests/unit/accordion/accordion_options.js +++ b/tests/unit/accordion/accordion_options.js @@ -116,9 +116,9 @@ test("{ fillSpace: false }, default", function() { test("{ fillSpace: true }", function() { $("#navigationWrapper").height(500); $('#navigation').accordion({ fillSpace: true }); - equals( $('#navigation > li:eq(0) > ul').height(), 362 ); - equals( $('#navigation > li:eq(1) > ul').height(), 362 ); - equals( $('#navigation > li:eq(2) > ul').height(), 362 ); + equals( $('#navigation > li:eq(0) > ul').height(), 446 ); + equals( $('#navigation > li:eq(1) > ul').height(), 446 ); + equals( $('#navigation > li:eq(2) > ul').height(), 446 ); }); test("{ header: '> li > :first-child,> :not(li):even' }, default", function() { diff --git a/tests/unit/autocomplete/autocomplete_methods.js b/tests/unit/autocomplete/autocomplete_methods.js index 5c20a6c95..76a600fe6 100644 --- a/tests/unit/autocomplete/autocomplete_methods.js +++ b/tests/unit/autocomplete/autocomplete_methods.js @@ -13,8 +13,7 @@ module("autocomplete: methods", { test("destroy", function() { var beforeHtml = $("#autocomplete").parent().html(); var afterHtml = $("#autocomplete").autocomplete().autocomplete("destroy").parent().html(); - // TODO can't use same, as that would insert the markup unescaped into the test results, screwing up other tests - ok( beforeHtml == afterHtml ); + equal( afterHtml, beforeHtml, "before/after html should be the same" ); }) var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; diff --git a/tests/unit/button/button_methods.js b/tests/unit/button/button_methods.js index 1fcd836b8..43c02d8cc 100644 --- a/tests/unit/button/button_methods.js +++ b/tests/unit/button/button_methods.js @@ -9,7 +9,7 @@ module("button: methods"); test("destroy", function() { var beforeHtml = $("#button").parent().html(); var afterHtml = $("#button").button().button("destroy").parent().html(); - same( beforeHtml, afterHtml ); + equal( afterHtml, beforeHtml ); }); })(jQuery); diff --git a/tests/unit/core/core.html b/tests/unit/core/core.html index eb0d2f930..843344ca7 100644 --- a/tests/unit/core/core.html +++ b/tests/unit/core/core.html @@ -11,6 +11,7 @@ <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/> <script type="text/javascript" src="../../../external/qunit.js"></script> <script type="text/javascript" src="../../jquery.simulate.js"></script> + <script type="text/javascript" src="../testsuite.js"></script> <script type="text/javascript" src="core.js"></script> <script type="text/javascript" src="selector.js"></script> diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 5a54e44c9..ca5f2585d 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -43,5 +43,9 @@ <div style="position: absolute; height: 5000px; width: 5000px;"></div> +<div id="bug-5280" style="height: 30px; width: 201px;"> + <div style="width: 50px; height: 10px;"></div> +</div> + </body> </html> diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index 4d2716ced..57e02da0a 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -330,4 +330,22 @@ test("collision: none, with offset", function() { }, { top: -13, left: -12 }, "left top, negative offset"); }); +//test('bug #5280: consistent results (avoid fractional values)', function() { +// var wrapper = $('#bug-5280'), +// elem = wrapper.children(), +// offset1 = elem.position({ +// my: 'center', +// at: 'center', +// of: wrapper, +// collision: 'none' +// }).offset(), +// offset2 = elem.position({ +// my: 'center', +// at: 'center', +// of: wrapper, +// collision: 'none' +// }).offset(); +// same(offset1, offset2); +//}); + })(jQuery); diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js index fb9af8155..d7c146d84 100644 --- a/tests/unit/slider/slider_events.js +++ b/tests/unit/slider/slider_events.js @@ -3,45 +3,54 @@ */ (function($) { -var el; - module( "slider: events" ); -test( "start", function() { - ok( false, "missing test - untested code is broken code." ); -}); - -test( "slide", function() { - ok( false, "missing test - untested code is broken code." ); -}); - //Specs from http://wiki.jqueryui.com/Slider#specs //"change callback: triggers when the slider has stopped moving and has a new // value (even if same as previous value), via mouse(mouseup) or keyboard(keyup) // or value method/option" -test( "change", function() { - expect(8); +test( "mouse based interaction", function() { + expect(4); - var handle; - // Test mouseup at end of handle slide (mouse) - el = $( "<div></div>" ) + var el = $( "<div></div>" ) .appendTo( "body" ) .slider({ + start: function(event, ui) { + equals( event.originalEvent.type, "mousedown", "start triggered by mousedown" ); + }, + slide: function(event, ui) { + equals( event.originalEvent.type, "mousemove", "slider triggered by mousemove" ); + }, + stop: function(event, ui) { + equals( event.originalEvent.type, "mouseup", "stop triggered by mouseup" ); + }, change: function(event, ui) { - ok( true, "change triggered by mouseup at end of handle slide (mouse)" ); + equals( event.originalEvent.type, "mouseup", "change triggered by mouseup" ); } }); el.find( ".ui-slider-handle" ).eq( 0 ) .simulate( "drag", { dx: 10, dy: 10 } ); - reset(); +}); +test( "keyboard based interaction", function() { + expect(3); + // Test keyup at end of handle slide (keyboard) - el = $( "<div></div>" ) + var el = $( "<div></div>" ) .appendTo( "body" ) .slider({ + start: function(event, ui) { + equals( event.originalEvent.type, "keydown", "start triggered by keydown" ); + }, + slide: function(event, ui) { + ok( false, "Slider never triggered by keys" ); + }, + stop: function(event, ui) { + equals( event.originalEvent.type, "keyup", "stop triggered by keyup" ); + }, change: function(event, ui) { - ok( true, "change triggered by keyup at end of handle slide (keyboard)" ); + equals( event.originalEvent.type, "keyup", "change triggered by keyup" ); } }); @@ -50,9 +59,12 @@ test( "change", function() { .simulate( "keypress", { keyCode: $.ui.keyCode.LEFT } ) .simulate( "keyup", { keyCode: $.ui.keyCode.LEFT } ); - reset(); +}); +test( "programmatic event triggers", function() { + expect(6); + // Test value method - el = $( "<div></div>" ) + var el = $( "<div></div>" ) .slider({ change: function(event, ui) { ok( true, "change triggered by value method" ); @@ -94,8 +106,4 @@ test( "change", function() { }); -test( "stop", function() { - ok( false, "missing test - untested code is broken code." ); -}); - }( jQuery ) ); diff --git a/tests/unit/slider/slider_options.js b/tests/unit/slider/slider_options.js index 88eb26a8f..cc36923b3 100644 --- a/tests/unit/slider/slider_options.js +++ b/tests/unit/slider/slider_options.js @@ -11,10 +11,6 @@ function handle() { module("slider: options"); -test("animate", function() { - ok(false, "missing test - untested code is broken code."); -}); - test("max", function() { el = $('<div></div>'); @@ -93,7 +89,17 @@ test("range", function() { }); test("step", function() { - ok(false, "missing test - untested code is broken code."); + var el = $('<div></div>').slider({ + step: 10 + }); + equals( el.slider("value"), 0 ) + el.slider("value", 1); + equals( el.slider("value"), 10 ); + el.slider("value", 10); + equals( el.slider("value"), 10 ); + el.slider("value", 11); + equals( el.slider("value"), 20 ); + el.slider('destroy'); }); test("value", function() { diff --git a/tests/unit/testsuite.js b/tests/unit/testsuite.js index 67b980d18..9a16e9d0c 100644 --- a/tests/unit/testsuite.js +++ b/tests/unit/testsuite.js @@ -45,5 +45,5 @@ function commonWidgetTests(widget, settings) { if ( !url || url.indexOf("http") !== 0 ) { return; } - document.write("<scr" + "ipt src='http://testswarm.com/js/inject.js?" + (new Date).getTime() + "'></scr" + "ipt>"); + document.write("<scr" + "ipt src='http://swarm.jquery.org/js/inject.js?" + (new Date).getTime() + "'></scr" + "ipt>"); })(); diff --git a/tests/visual/button/button_performance.html b/tests/visual/button/button_performance.html new file mode 100644 index 000000000..2d31c2f27 --- /dev/null +++ b/tests/visual/button/button_performance.html @@ -0,0 +1,552 @@ +<!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.4.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() { + $("button").button(); + }); + </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/menu/drilldown.html b/tests/visual/menu/drilldown.html index 78b8cf9f2..1539045f0 100644 --- a/tests/visual/menu/drilldown.html +++ b/tests/visual/menu/drilldown.html @@ -8,93 +8,120 @@ <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.autocomplete.js"></script> <script type="text/javascript"> $(function() { $.widget("ui.drilldown", { _init: function() { var self = this; - this.active = this.element; + 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({ + focus: function(event, ui) { + self.activeItem = ui.item; + }, selected: function(event, ui) { - var nested = $(">ul", ui.item); - if (!nested.length) { - self.element.find("h3").text(ui.item.text()); - self.options.selected.apply(this, arguments); + if (this != self.active[0]) { return; } - self.active = ui.item.parent(); - // put a previous submenu back into its place and hide it - self.hideDown(); + var nested = $(">ul", ui.item); if (nested.length) { - // append to body in order to display the submenu above the parent menu, instead of inside of it - nested.appendTo(document.body).menu("deactivate").show().position({ - my: "left top", - at: "left top", - of: self.element.children("ul:first") - // store the current submenu - }).data("menuparent", ui.item); - - self.active.data("submenu", nested); + self._open(nested); + } else { + self.element.find("h3").text(ui.item.text()); + self.options.selected.apply(this, arguments); } } }); + + this.back = this.element.children(":last").button({ + icons: { + primary: "ui-icon-carat-1-w" + } + }).click(function() { + self.up(); + return false; + }).hide(); + }, + + _open: function(submenu) { + this.active = submenu.show().css({ + top: 0, + left: 0, + 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.data("menuparent")) + if (this.active.parent()[0] == this.element[0]) { return; - this.hideDown(); - this.active.menu("deactivate"); - this.active = this.active.data("menuparent").parent(); + } + 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() { - var submenu = this.active.data("submenu"); - if (!submenu) - return; - submenu.data("menu").activate(submenu.children(":first")) - this.active = submenu; + down: function(event) { + var nested = this.activeItem.find(">ul"); + if (nested.length) { + this._open(nested); + nested.menu("activate", event, nested.children(":first")) + } }, show: function() { - this.element.menu("deactivate").show(); - this.active = this.element; }, hide: function() { - this.hideDown(); - var child = this.active.hide(), parent; - while(child.data("menuparent")) { - parent = child.data("menuparent"); - child.appendTo(parent).removeData("menuparent"); - child = parent.parent().removeData("submenu").hide(); - } }, - hideDown: function() { - var submenu = this.active.data("submenu"); - while(submenu) { - var parent = submenu.data("menuparent"); - submenu.appendTo(parent).hide().removeData("menuparent"); - parent.parent().removeData("submenu"); - submenu = submenu.data("submenu"); - }; + widget: function() { + return this.element.find(">ul"); } }); - var nestedmenu = $("#drilldown").drilldown({ + var drilldown = $("#drilldown").drilldown({ selected: function(event, ui) { $("#log").append("<div>Selected " + ui.item.text() + "</div>"); } }); - $().keydown(function(event) { - var menu = nestedmenu.data("drilldown").active.data("menu"); + drilldown.drilldown("widget").keydown(function(event) { + var menu = drilldown.data("drilldown").active.data("menu"); if (menu.widget().is(":hidden")) return; event.stopPropagation(); @@ -109,10 +136,10 @@ menu.previous(); break; case $.ui.keyCode.LEFT: - nestedmenu.nestedmenu("up"); + drilldown.drilldown("up"); break; case $.ui.keyCode.RIGHT: - nestedmenu.nestedmenu("down"); + drilldown.drilldown("down"); break; case $.ui.keyCode.DOWN: menu.next(); @@ -121,11 +148,11 @@ case $.ui.keyCode.ENTER: case $.ui.keyCode.TAB: menu.select(); - nestedmenu.nestedmenu("hide"); + drilldown.drilldown("hide"); event.preventDefault(); break; case $.ui.keyCode.ESCAPE: - nestedmenu.nestedmenu("hide"); + drilldown.drilldown("hide", event); break; default: clearTimeout(menu.filterTimer); @@ -149,7 +176,7 @@ }); } if (match.length) { - menu.activate(match); + menu.activate(event, match); if (match.length > 1) { menu.previousFilter = character; menu.filterTimer = setTimeout(function() { @@ -168,6 +195,7 @@ <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> @@ -219,6 +247,7 @@ <li><a href="#">Utrecht</a></li> <li><a href="#">Zurich</a></li> </ul> + <a href="#">Go back</a> </div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> diff --git a/tests/visual/menu/nested.html b/tests/visual/menu/nested.html index a332e2440..063b946c7 100644 --- a/tests/visual/menu/nested.html +++ b/tests/visual/menu/nested.html @@ -9,8 +9,16 @@ <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.autocomplete.js"></script> + <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.1.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.nestedmenu", { _init: function() { var self = this; @@ -24,77 +32,46 @@ focus: function(event, ui) { self.active = ui.item.parent(); self.activeItem = ui.item; - // put a previous submenu back into its place and hide it - self.hideDown(); + ui.item.parent().find("ul").hide(); var nested = $(">ul", ui.item); - // only for mouse-events (should actually check event.originalEvent.type, but for keys, originalEvent is undefined...) if (nested.length && /^mouse/.test(event.originalEvent.type)) { - self._openSubmenu(nested, ui.item); + self._open(nested); } } }) }, - _openSubmenu: function(nested, item) { - // append to body in order to display the submenu above the parent menu, instead of inside of it - nested.appendTo(document.body).menu("deactivate").show().position({ + _open: function(submenu) { + submenu.show().css({ + top: 0, + left: 0 + }).position({ my: "left top", at: "right top", - of: item - // store the current submenu - }).data("menuparent", item); - - this.active.data("submenu", nested); + of: this.activeItem + }); }, up: function(event) { - if (!this.active.data("menuparent")) - return; - this.active.menu("deactivate"); - this.active = this.active.data("menuparent").parent(); + this.active = this.active.menu("deactivate").hide().parent().parent(); this.activeItem = this.active.data("menu").active; - this.hideDown(); }, down: function(event) { - var submenu = this.active.data("submenu"); - if (!submenu && this.activeItem) { - // try to open submenu or return(?); only mouseover opens submenu directly, key doesn't - var item = this.activeItem, - nested = item.children("ul"); - if (!nested.length) - return; - this._openSubmenu(nested, item); - submenu = this.active.data("submenu"); - } - submenu.data("menu").activate(event, submenu.children(":first")) - this.active = submenu; + var submenu = $(">ul", this.activeItem); + this._open(submenu, this.activeItem); + submenu.menu("activate", event, submenu.children(":first")); }, show: function() { - this.element.menu("deactivate").show(); this.active = this.element; + this.element.show(); }, hide: function() { - this.hideDown(); - var child = this.active.hide(), parent; - while(child.data("menuparent")) { - parent = child.data("menuparent"); - child.appendTo(parent).removeData("menuparent"); - child = parent.parent().removeData("submenu").hide(); - } - }, - - hideDown: function() { - var submenu = this.active.data("submenu"); - while(submenu) { - var parent = submenu.data("menuparent"); - submenu.appendTo(parent).hide().removeData("menuparent"); - parent.parent().removeData("submenu"); - submenu = submenu.data("submenu"); - }; + this.element.find("ul").andSelf().menu("deactivate").hide(); } + }); var nestedmenu = $("#menu").nestedmenu({ @@ -106,11 +83,16 @@ $("button").click(function(event) { // TODO required to prevent the click handler below from handling this event event.stopPropagation(); - nestedmenu.nestedmenu("show").position({ - my: "left top", - at: "right top", - of: event.pageX > 0 ? event : this - }); + nestedmenu.nestedmenu("show") + .css({ + top: 0, + left: 0 + }) + .position({ + my: "left top", + at: "right top", + of: this + }); $(document).one("click", function() { nestedmenu.nestedmenu("hide"); }) @@ -195,6 +177,10 @@ <body> <button>Show context menu</button> +<br/> +<select> + <option>some option with some text</option> +</select> <ul id="menu"> <li> diff --git a/themes/base/jquery.ui.accordion.css b/themes/base/jquery.ui.accordion.css index acd7f5e1e..8d8a1a6e1 100644 --- a/themes/base/jquery.ui.accordion.css +++ b/themes/base/jquery.ui.accordion.css @@ -4,6 +4,8 @@ .ui-accordion .ui-accordion-li-fix { display: inline; } .ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } .ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; } +/* IE7-/Win - Fix extra vertical space in lists */ +.ui-accordion a { zoom: 1; } .ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; } .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; } diff --git a/themes/base/jquery.ui.autocomplete.css b/themes/base/jquery.ui.autocomplete.css index bdd41e1b7..9c9ca7584 100644 --- a/themes/base/jquery.ui.autocomplete.css +++ b/themes/base/jquery.ui.autocomplete.css @@ -20,6 +20,9 @@ .ui-menu .ui-menu-item { margin:0; padding: 0; + zoom: 1; + float: left; + clear: left; width: 100%; } .ui-menu .ui-menu-item a { diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index d1a7abd6d..bce78231b 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -74,11 +74,6 @@ $.widget("ui.accordion", { //Append icon elements this._createIcons(); - // IE7-/Win - Extra vertical space in lists fixed - if ($.browser.msie) { - this.element.find('a').css('zoom', '1'); - } - this.resize(); //ARIA diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js index fab7a6287..a1d798c59 100644 --- a/ui/jquery.ui.autocomplete.js +++ b/ui/jquery.ui.autocomplete.js @@ -70,7 +70,7 @@ $.widget( "ui.autocomplete", { case keyCode.RIGHT: case keyCode.SHIFT: case keyCode.CONTROL: - case 18: + case keyCode.ALT: // ignore metakeys (shift, ctrl, alt) break; default: @@ -140,7 +140,7 @@ $.widget( "ui.autocomplete", { destroy: function() { this.element - .removeClass( "ui-autocomplete-input ui-widget ui-widget-content" ) + .removeClass( "ui-autocomplete-input" ) .removeAttr( "autocomplete" ) .removeAttr( "role" ) .removeAttr( "aria-autocomplete" ) @@ -335,7 +335,7 @@ $.widget("ui.menu", { "aria-activedescendant": "ui-active-menuitem" }) .click(function( event ) { - if ( !$( event.target ).closest( ".ui-menu-item" ).length ) { + if ( !$( event.target ).closest( ".ui-menu-item a" ).length ) { return; } // temporary diff --git a/ui/jquery.ui.core.js b/ui/jquery.ui.core.js index e0e1727ee..197a1aba9 100644 --- a/ui/jquery.ui.core.js +++ b/ui/jquery.ui.core.js @@ -70,6 +70,7 @@ $.ui = { }, keyCode: { + ALT: 18, BACKSPACE: 8, CAPS_LOCK: 20, COMMA: 188, diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index 0291c3da0..6e538b6e5 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -622,8 +622,11 @@ $.widget("ui.dialog", { // reset content sizing // hide for non content measurement because height: 0 doesn't work in IE quirks mode (see #4350) - this.element.css('width', 'auto') - .hide(); + this.element.css({ + width: 'auto', + minHeight: 0, + height: 0 + }); // reset wrapper sizing // determine the height of all the non-content elements diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index f01640e18..11f8baa06 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -113,6 +113,10 @@ $.fn.position = function( options ) { position.top -= elemHeight / 2; } + // prevent fractions (see #5280) + position.left = parseInt( position.left ); + position.top = parseInt( position.top ); + $.each( [ "left", "top" ], function( i, dir ) { if ( $.ui.position[ collision[i] ] ) { $.ui.position[ collision[i] ][ dir ]( position, { diff --git a/ui/jquery.ui.slider.js b/ui/jquery.ui.slider.js index c392facd7..185fe809c 100644 --- a/ui/jquery.ui.slider.js +++ b/ui/jquery.ui.slider.js @@ -152,7 +152,7 @@ $.widget("ui.slider", $.ui.mouse, { break; } - var curVal, newVal, step = self._step(); + var curVal, newVal, step = self.options.step; if (self.options.values && self.options.values.length) { curVal = newVal = self.values(index); } else { @@ -526,11 +526,6 @@ $.widget("ui.slider", $.ui.mouse, { }, - _step: function() { - var step = this.options.step; - return step; - }, - _value: function() { //internal value getter // _value() returns value trimmed by min and max @@ -564,20 +559,21 @@ $.widget("ui.slider", $.ui.mouse, { }, _trimValue: function(val) { - if (val < this._valueMin()) val = this._valueMin(); - if (val > this._valueMax()) val = this._valueMax(); - + if (val < this._valueMin()) { + return this._valueMin(); + } + if (val > this._valueMax()) { + return this._valueMax(); + } return val; }, _valueMin: function() { - var valueMin = this.options.min; - return valueMin; + return this.options.min; }, _valueMax: function() { - var valueMax = this.options.max; - return valueMax; + return this.options.max; }, _refreshValue: function() { diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js index 49067449d..a9829d2e5 100644 --- a/ui/jquery.ui.widget.js +++ b/ui/jquery.ui.widget.js @@ -155,7 +155,7 @@ $.Widget.prototype = { .removeAttr( "aria-disabled" ) .removeClass( this.widgetBaseClass + "-disabled " + - this.namespace + "-state-disabled" ); + "ui-state-disabled" ); }, widget: function() { @@ -192,7 +192,7 @@ $.Widget.prototype = { this.widget() [ value ? "addClass" : "removeClass"]( this.widgetBaseClass + "-disabled" + " " + - this.namespace + "-state-disabled" ) + "ui-state-disabled" ) .attr( "aria-disabled", value ); } |