diff options
| author | Filipp Lepalaan <f@230.to> | 2014-02-19 18:02:09 +0200 |
|---|---|---|
| committer | Filipp Lepalaan <f@230.to> | 2014-02-19 18:02:09 +0200 |
| commit | 75ad7e4bd7d69243e7e5281c2642f00478fb072d (patch) | |
| tree | eaaaf360902d369f42d94778aac8803db7973ce0 /apps/it/static/js/ui/tests/visual | |
| parent | cfc7c3f52544af8a71d3fa3988a06fee200d2c24 (diff) | |
| download | pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.gz pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.bz2 pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.zip | |
Added tags, jquery UI
Diffstat (limited to 'apps/it/static/js/ui/tests/visual')
28 files changed, 3225 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/tests/visual/accordion/icons.html b/apps/it/static/js/ui/tests/visual/accordion/icons.html new file mode 100644 index 0000000..7ed368d --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/accordion/icons.html @@ -0,0 +1,95 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Accordion Visual Test</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.accordion.js"></script> + <script> + $(function() { + $( "#accordion-ynynyn" ).accordion({ icons: null }); + $( "#accordion-ynyny" ).accordion(); + $( "#accordion-ynyn" ).accordion({ icons: null }); + $( "#accordion-yny" ).accordion(); + $( "#accordion-yn" ).accordion({ icons: null }); + $( "#accordion-y" ).accordion(); + + $( "#accordion-nynyny" ).accordion(); + $( "#accordion-nynyn" ).accordion({ icons: null }); + $( "#accordion-nyny" ).accordion(); + $( "#accordion-nyn" ).accordion({ icons: null }); + $( "#accordion-ny" ).accordion(); + $( "#accordion-n" ).accordion({ icons: null }); + }); + </script> +</head> +<body> + +<p>WHAT: The following set of nested accordions alternate between icons and no icons.</p> +<p>EXPECTED: The padding on the headers should correctly account for the icon settings.</p> + +<div id="accordion-y"> + <div>Icons</div> + <div> + <div id="accordion-yn"> + <div>No Icons</div> + <div> + <div id="accordion-yny"> + <div>Icons</div> + <div> + <div id="accordion-ynyn"> + <div>No Icons</div> + <div> + <div id="accordion-ynyny"> + <div>Icons</div> + <div> + <div id="accordion-ynynyn"> + <div>No Icons</div> + <div></div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</div> + +<div id="accordion-n"> + <div>No Icons</div> + <div> + <div id="accordion-ny"> + <div>Icons</div> + <div> + <div id="accordion-nyn"> + <div>No Icons</div> + <div> + <div id="accordion-nyny"> + <div>Icons</div> + <div> + <div id="accordion-nynyn"> + <div>No Icons</div> + <div> + <div id="accordion-nynyny"> + <div>Icons</div> + <div></div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/addClass/queue.html b/apps/it/static/js/ui/tests/visual/addClass/queue.html new file mode 100644 index 0000000..1b20689 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/addClass/queue.html @@ -0,0 +1,52 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>addClass Visual Test : Queue</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.effect.js"></script> + <style> + .box { + width: 100px; + height: 100px; + background-color: #000; + } + .red { + background-color: #f00; + } + .green { + background-color: #0f0; + } + .blue { + background-color: #00f; + } + </style> + <script> + $(function() { + $( "#box1" ) + .delay( 500 ) + .addClass( "red", 2000 ) + .delay( 500 ) + .addClass( "green", 2000 ) + .delay( 500 ) + .addClass( "blue", 2000 ); + $( "#box2" ) + .addClass( "red", 2000 ) + .delay( 500 ) + .addClass( "green", 2000 ) + .delay( 500 ) + .addClass( "blue", 2000 ); + }); + </script> +</head> +<body> + +<p>WHAT: The two boxes animate from black to red to green to blue.</p> +<p>EXPECTED: The first box should start with a delay, the second box should start immediately.</p> + +<div id="box1" class="box"></div> +<div id="box2" class="box"></div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/button/button.html b/apps/it/static/js/ui/tests/visual/button/button.html new file mode 100644 index 0000000..4ff1411 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/button/button.html @@ -0,0 +1,94 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Button Visual Test</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script> + $(function() { + $( ".buttons" ).each(function() { + $( this ).children() + .eq( 0 ) + .button({ + text: false, + icons: { + primary: "ui-icon-help" + } + }) + .end() + .eq( 1 ) + .button({ + icons: { + primary: "ui-icon-help" + }, + disabled: true + }) + .end() + .eq( 2 ) + .button(); + }); + }); + </script> +</head> +<body> + +<div class="buttons"> + <button>button</button> + <button>button</button> + <button>button</button> +</div> + +<div class="buttons"> + <button type="button">button button</button> + <button type="button">button button</button> + <button type="button">button button</button> +</div> + +<div class="buttons"> + <button type="submit">button submit</button> + <button type="submit">button submit</button> + <button type="submit">button submit</button> +</div> + +<div class="buttons"> + <input type="button" value="input button"> + <input type="button" value="input button"> + <input type="button" value="input button"> +</div> + +<div class="buttons"> + <input type="submit" value="input submit"> + <input type="submit" value="input submit"> + <input type="submit" value="input submit"> +</div> + +<div class="buttons"> + <input type="checkbox" id="input-checkbox0"> + <input type="checkbox" id="input-checkbox1"> + <input type="checkbox" id="input-checkbox2"> + <label for="input-checkbox0">input checkbox</label> + <label for="input-checkbox1">input checkbox</label> + <label for="input-checkbox2">input checkbox</label> +</div> + +<div class="buttons"> + <input type="radio" id="input-radio0" name="radio"> + <input type="radio" id="input-radio1" name="radio"> + <input type="radio" id="input-radio2" name="radio"> + <label for="input-radio0">input radio</label> + <label for="input-radio1">input radio</label> + <label for="input-radio2">input radio</label> +</div> + +<div class="buttons"> + <a href="#">anchor</a> + <a href="#">anchor</a> + <a href="#">anchor</a> +</div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/button/performance.html b/apps/it/static/js/ui/tests/visual/button/performance.html new file mode 100644 index 0000000..ac1b665 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/button/performance.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Button Visual Test: Initialization Performance</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script> + $(function() { + var start, + html = new Array( 500 ).join( "<button>button</button>" ); + $( html ).appendTo( "body" ); + + start = $.now(); + $( "button" ).button(); + $( "<p>" ).text( "Time to initialize: " + ($.now() - start) + "ms" ).prependTo( "body" ); + }); + </script> +</head> +<body> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/compound/accordion_tabs.html b/apps/it/static/js/ui/tests/visual/compound/accordion_tabs.html new file mode 100644 index 0000000..aa69d09 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/compound/accordion_tabs.html @@ -0,0 +1,86 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Compound Visual Test : Accordion in Tabs</title> + <link rel="stylesheet" href="../visual.css"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.accordion.js"></script> + <script src="../../../ui/jquery.ui.tabs.js"></script> + <script> + $(function() { + $( "#accordion-1, #accordion-2" ).accordion(); + $( "#tabs" ).tabs(); + }); + </script> +</head> +<body> + +<div id="tabs"> + <ul> + <li><a href="#tabs-1">First</a></li> + <li><a href="#tabs-2">Second</a></li> + </ul> + <div id="tabs-1"> + <div id="accordion-1"> + <h3>Accordion Header 1</h3> + <div> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + </div> + <h3>Accordion Header 2</h3> + <div> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + </div> + <h3>Accordion Header 3</h3> + <div> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + </div> + </div> + </div> + <div id="tabs-2"> + <div id="accordion-2"> + <h3>Accordion Header 1</h3> + <div> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + </div> + <h3>Accordion Header 2</h3> + <div> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + </div> + <h3>Accordion Header 3</h3> + <div> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + </div> + </div> + </div> +</div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/compound/datepicker_dialog.html b/apps/it/static/js/ui/tests/visual/compound/datepicker_dialog.html new file mode 100644 index 0000000..a2a99fb --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/compound/datepicker_dialog.html @@ -0,0 +1,31 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Compound Visual Test : Datepicker in Dialog</title> + <link rel="stylesheet" href="../visual.css"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.mouse.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.resizable.js"></script> + <script src="../../../ui/jquery.ui.draggable.js"></script> + <script src="../../../ui/jquery.ui.datepicker.js"></script> + <script src="../../../ui/jquery.ui.dialog.js"></script> + <script> + $(function() { + $( "#datepicker" ).datepicker(); + $( "#dialog" ).dialog(); + }); + </script> +</head> +<body> + +<div id="dialog"> + <input id="datepicker"> +</div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/compound/dialog_widgets.html b/apps/it/static/js/ui/tests/visual/compound/dialog_widgets.html new file mode 100644 index 0000000..f5b0be9 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/compound/dialog_widgets.html @@ -0,0 +1,101 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Compound Visual Test : All Widgets in Dialog</title> + <link rel="stylesheet" href="../visual.css"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.mouse.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.menu.js"></script> + <script src="../../../ui/jquery.ui.resizable.js"></script> + <script src="../../../ui/jquery.ui.draggable.js"></script> + <script src="../../../ui/jquery.ui.accordion.js"></script> + <script src="../../../ui/jquery.ui.autocomplete.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script src="../../../ui/jquery.ui.datepicker.js"></script> + <script src="../../../ui/jquery.ui.dialog.js"></script> + <script src="../../../ui/jquery.ui.progressbar.js"></script> + <script src="../../../ui/jquery.ui.slider.js"></script> + <script src="../../../ui/jquery.ui.tabs.js"></script> + <script src="../../../ui/jquery.ui.tooltip.js"></script> + <script> + $(function() { + $( "[title]" ).tooltip(); + $( "#accordion" ).accordion(); + $( "#autocomplete" ).autocomplete({ + source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ] + }); + $( "button" ).button().click(function() { + $( "#dialog2" ).dialog( "open" ); + }); + $( "#datepicker" ).datepicker(); + $( "#progressbar" ).progressbar({ + value: 30 + }); + $( "#slider" ).slider({ + animate: true, + value: 30, + slide: function(event, ui) { + $( "#progress" ).val( ui.value ); + $( "#progressbar" ).progressbar( "option", "value", ui.value ); + } + }); + $( "#tabs" ).tabs(); + $( "#dialog" ).dialog(); + $( "#dialog2" ).dialog({ + autoOpen: false, + width: 100, + height: 75, + modal: true + }); + }); + </script> +</head> +<body> + +<div id="dialog"> + <div id="accordion"> + <h3>Accordion Header 1</h3> + <div> + Accordion Content 1 + </div> + <h3>Accordion Header 2</h3> + <div> + Accordion Content 2 + </div> + <h3>Accordion Header 3</h3> + <div> + Accordion Content 3 + </div> + </div> + <input id="autocomplete"> + <button>A Button</button> + <input id="datepicker"> + <button>Another button</button> + <div> + <label for="progress">Progress: <input title="The progress we made so far" id="progress"></label> + </div> + <div id="progressbar"> + </div> + <div id="slider" title="Sliding progress..."></div> + <div id="tabs"> + <ul> + <li><a href="#tabs-1">First</a></li> + <li><a href="#tabs-2">Second</a></li> + <li><a href="#tabs-3">Third</a></li> + </ul> + <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> + <div id="tabs-2">Phasellus mattis tincidunt nibh.</div> + <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> + </div> +</div> +<div id="dialog2"> + Yay, another dialog. +</div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/compound/draggable_accordion.html b/apps/it/static/js/ui/tests/visual/compound/draggable_accordion.html new file mode 100644 index 0000000..006d779 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/compound/draggable_accordion.html @@ -0,0 +1,65 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Compound Visual Test : Draggable in Accordion</title> + <link rel="stylesheet" href="../visual.css"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.mouse.js"></script> + <script src="../../../ui/jquery.ui.accordion.js"></script> + <script src="../../../ui/jquery.ui.draggable.js"></script> + <style> + .draggable { + width: 10em; + margin: 0.5em; + } + </style> + <script> + $(function() { + $( ".draggable" ).addClass( "ui-widget ui-widget-content ui-corner-all" ) + $( "#first .draggable" ).draggable(); + $( "#second .draggable" ).draggable({ + appendTo: "body" + }); + $( "#third .draggable" ).draggable({ + helper: "clone", + appendTo: "body" + }); + $( "#accordion" ).accordion(); + }); + </script> +</head> +<body> + +<div id="accordion"> + <h3>.draggable()</h3> + <div id="first"> + <div class="draggable">Draggable 1-1</div> + <div class="draggable">Draggable 1-2</div> + <div class="draggable">Draggable 1-3</div> + <div class="draggable">Draggable 1-4</div> + <div class="draggable">Draggable 1-5</div> + </div> + <h3>.draggable({ appendTo: "body" })</h3> + <div id="second"> + <div class="draggable">Draggable 2-1</div> + <div class="draggable">Draggable 2-2</div> + <div class="draggable">Draggable 2-3</div> + <div class="draggable">Draggable 2-4</div> + <div class="draggable">Draggable 2-5</div> + </div> + <h3>.draggable({ helper: "clone", appendTo: "body" })</h3> + <div id="third"> + <div class="draggable">Draggable 3-1</div> + <div class="draggable">Draggable 3-2</div> + <div class="draggable">Draggable 3-3</div> + <div class="draggable">Draggable 3-4</div> + <div class="draggable">Draggable 3-5</div> + </div> +</div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/compound/draggable_accordion_accordion_tabs_draggable.html b/apps/it/static/js/ui/tests/visual/compound/draggable_accordion_accordion_tabs_draggable.html new file mode 100644 index 0000000..1dee0dc --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/compound/draggable_accordion_accordion_tabs_draggable.html @@ -0,0 +1,107 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Compound Visual Test : Draggable in Accordion</title> + <link rel="stylesheet" href="../visual.css"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.mouse.js"></script> + <script src="../../../ui/jquery.ui.accordion.js"></script> + <script src="../../../ui/jquery.ui.draggable.js"></script> + <script src="../../../ui/jquery.ui.tabs.js"></script> + <style> + #main-draggable { + width: 300px; + position: absolute; + right: 100px; + } + #main-draggable-handle { + padding: 1em; + margin: 0; + } + .draggable { + width: 10em; + margin: 0.5em; + } + </style> + <script> + $(function() { + $( ".draggable" ) + .addClass( "ui-widget ui-widget-content ui-corner-all" ) + .draggable({ + helper: "clone", + appendTo: "body" + }); + + $( "#accordion > div" ).accordion(); + $( "#accordion" ).accordion(); + + $( "#tabs" ).tabs(); + + $( "#main-draggable" ).draggable({ + handle: "#main-draggable-handle" + }); + }); + </script> +</head> +<body> +<div id="main-draggable" class="ui-widget ui-widget-content ui-corner-all"> + <p id="main-draggable-handle" class="ui-widget-header ui-corner-all">Drag me around!</p> + <div id="tabs"> + <ul> + <li><a href="#tabs-1">First Tab</a></li> + <li><a href="#tabs-2">Second Tab</a></li> + </ul> + <div id="tabs-1"> + <p>Click the other tab!</p> + </div> + <div id="tabs-2"> + <div id="accordion"> + <h3>Accordion Group 1</h3> + <div id="accordion-1-1"> + <h3>Header 1-1</h3> + <div> + <div class="draggable">Draggable 1-1</div> + <div class="draggable">Draggable 1-2</div> + <div class="draggable">Draggable 1-3</div> + <div class="draggable">Draggable 1-4</div> + <div class="draggable">Draggable 1-5</div> + </div> + <h3>Header 1-2</h3> + <div> + <div class="draggable">Draggable 2-1</div> + <div class="draggable">Draggable 2-2</div> + <div class="draggable">Draggable 2-3</div> + <div class="draggable">Draggable 2-4</div> + <div class="draggable">Draggable 2-5</div> + </div> + </div> + <h3>Accordion Group 2</h3> + <div id="accordion-1-2"> + <h3>Header 2-1</h3> + <div> + <div class="draggable">Draggable 1-1</div> + <div class="draggable">Draggable 1-2</div> + <div class="draggable">Draggable 1-3</div> + <div class="draggable">Draggable 1-4</div> + <div class="draggable">Draggable 1-5</div> + </div> + <h3>Header 2-2</h3> + <div> + <div class="draggable">Draggable 2-1</div> + <div class="draggable">Draggable 2-2</div> + <div class="draggable">Draggable 2-3</div> + <div class="draggable">Draggable 2-4</div> + <div class="draggable">Draggable 2-5</div> + </div> + </div> + </div> + </div> + </div> +</div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/compound/sortable_accordion_sortable_tabs.html b/apps/it/static/js/ui/tests/visual/compound/sortable_accordion_sortable_tabs.html new file mode 100644 index 0000000..f95da63 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/compound/sortable_accordion_sortable_tabs.html @@ -0,0 +1,116 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Compound Visual Test : Accordion in Tabs</title> + <link rel="stylesheet" href="../visual.css"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.mouse.js"></script> + <script src="../../../ui/jquery.ui.sortable.js"></script> + <script src="../../../ui/jquery.ui.accordion.js"></script> + <script src="../../../ui/jquery.ui.tabs.js"></script> + <script> + $(function() { + $( "#accordion-1, #accordion-2" ) + .accordion({ + header: "> div > h3" + }) + .sortable(); + + $( "#tabs" ) + .tabs() + .find( ".ui-tabs-nav" ) + .sortable(); + }); + </script> +</head> +<body> + +<div id="tabs"> + <ul> + <li><a href="#tabs-1">1 - Accordion</a></li> + <li><a href="#tabs-2">2 - Empty</a></li> + <li><a href="#tabs-3">3 - Empty</a></li> + <li><a href="#tabs-4">4 - Accordion</a></li> + </ul> + <div id="tabs-1"> + <div id="accordion-1"> + <div> + <h3>Accordion Header 1</h3> + <div> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + </div> + </div> + <div> + <h3>Accordion Header 2</h3> + <div> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + </div> + </div> + <div> + <h3>Accordion Header 3</h3> + <div> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + </div> + </div> + </div> + </div> + <div id="tabs-2"> + <p>Nothing to look at here...</p> + </div> + <div id="tabs-3"> + <p>Nothing to look at here...</p> + </div> + <div id="tabs-4"> + <div id="accordion-2"> + <div> + <h3>Accordion Header 1</h3> + <div> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + <p>Accordion Content 1</p> + </div> + </div> + <div> + <h3>Accordion Header 2</h3> + <div> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + <p>Accordion Content 2</p> + </div> + </div> + <div> + <h3>Accordion Header 3</h3> + <div> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + <p>Accordion Content 3</p> + </div> + </div> + </div> + </div> +</div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/compound/tabs_tabs.html b/apps/it/static/js/ui/tests/visual/compound/tabs_tabs.html new file mode 100644 index 0000000..dbc641b --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/compound/tabs_tabs.html @@ -0,0 +1,73 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Compound Visual Test : Tabs in Tabs</title> + <link rel="stylesheet" href="../visual.css"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.accordion.js"></script> + <script src="../../../ui/jquery.ui.tabs.js"></script> + <script> + $(function() { + $( "#tabs, #tabs-a, #tabs-b" ).tabs(); + }); + </script> +</head> +<body> + +<div id="tabs"> + <ul> + <li><a href="#tabs-1">First</a></li> + <li><a href="#tabs-2">Second</a></li> + </ul> + <div id="tabs-1"> + <div id="tabs-a"> + <ul> + <li><a href="#tabs-a-1">First</a></li> + <li><a href="#tabs-a-2">Second</a></li> + </ul> + <div id="tabs-a-1"> + <p>nested tabs a-1</p> + <p>nested tabs a-1</p> + <p>nested tabs a-1</p> + <p>nested tabs a-1</p> + <p>nested tabs a-1</p> + </div> + <div id="tabs-a-2"> + <p>nested tabs a-2</p> + <p>nested tabs a-2</p> + <p>nested tabs a-2</p> + <p>nested tabs a-2</p> + <p>nested tabs a-2</p> + </div> + </div> + </div> + <div id="tabs-2"> + <div id="tabs-b"> + <ul> + <li><a href="#tabs-b-1">First</a></li> + <li><a href="#tabs-b-2">Second</a></li> + </ul> + <div id="tabs-b-1"> + <p>nested tabs b-1</p> + <p>nested tabs b-1</p> + <p>nested tabs b-1</p> + <p>nested tabs b-1</p> + <p>nested tabs b-1</p> + </div> + <div id="tabs-b-2"> + <p>nested tabs b-2</p> + <p>nested tabs b-2</p> + <p>nested tabs b-2</p> + <p>nested tabs b-2</p> + <p>nested tabs b-2</p> + </div> + </div> + </div> +</div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/compound/tabs_tooltips.html b/apps/it/static/js/ui/tests/visual/compound/tabs_tooltips.html new file mode 100644 index 0000000..ad3d501 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/compound/tabs_tooltips.html @@ -0,0 +1,37 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Compound Visual Test : Tabs in Tabs</title> + <link rel="stylesheet" href="../visual.css"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.tooltip.js"></script> + <script src="../../../ui/jquery.ui.tabs.js"></script> + <script> + $(function() { + $( "#tabs" ).tabs(); + $( "a" ).tooltip(); + }); + </script> +</head> +<body> + +<div id="tabs"> + <ul> + <li><a href="#tabs-1" title="first tab tooltip">First</a></li> + <li><a href="#tabs-2" title="second tab tooltip">Second</a></li> + </ul> + <div id="tabs-1"> + <a href="#" title="title content">label</a> + </div> + <div id="tabs-2"> + <a href="#" title="other title content">other label</a> + </div> +</div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/dialog/animated.html b/apps/it/static/js/ui/tests/visual/dialog/animated.html new file mode 100644 index 0000000..5097d78 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/dialog/animated.html @@ -0,0 +1,53 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Dialog Visual Test</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.mouse.js"></script> + <script src="../../../ui/jquery.ui.draggable.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.resizable.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script src="../../../ui/jquery.ui.dialog.js"></script> + <script src="../../../ui/jquery.ui.effect.js"></script> + <script src="../../../ui/jquery.ui.effect-blind.js"></script> + <script src="../../../ui/jquery.ui.effect-explode.js"></script> + <script> + $(function() { + $( "#dialog" ).dialog({ + autoOpen: false, + show: { + effect: "blind", + duration: 1000 + }, + hide: { + effect: "explode", + duration: 1000 + }, + modal: true + }); + + $( "#opener" ).click(function() { + $( "#dialog" ).dialog( "open" ); + }); + }); + </script> +</head> +<body> + +<p>WHAT: A animated modal dialog, using blind effect to show, explode to hide.</p> +<p>EXPECTED: Dialog shows up on top of the overlay and stays there during and after the animation. Focus is set to the input inside the dialog and stays there after the animation finishes.</p> + +<div id="dialog" title="Are you sure?"> + <p>Please enter password to continue.</p> + <label for="password">Password</label><input id="password"> +</div> + +<button id="opener">Open Dialog</button> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/dialog/complex-dialogs.html b/apps/it/static/js/ui/tests/visual/dialog/complex-dialogs.html new file mode 100644 index 0000000..a6496fb --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/dialog/complex-dialogs.html @@ -0,0 +1,125 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Dialog Visual Test</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.mouse.js"></script> + <script src="../../../ui/jquery.ui.draggable.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.resizable.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script src="../../../ui/jquery.ui.dialog.js"></script> + + <!-- stuff needed to make things complex --> + <script src="../../../ui/jquery.ui.datepicker.js"></script> + <script src="../../../ui/jquery.ui.menu.js"></script> + <script src="../../../ui/jquery.ui.autocomplete.js"></script> + <script src="../../../ui/jquery.ui.tooltip.js"></script> + + <style> + body { + font-size: 62.5%; + } + </style> + <script> + $(function() { + var dialog = $( "#dialog" ).dialog({ + modal: true, + width: 500, + buttons: [ + { + click: $.noop, + icons: { + primary: "ui-icon-check" + }, + text: "Ok" + }, + { + click: function() { + $( this ).dialog( "close" ); + }, + icons: { + primary: "ui-icon-cancel" + }, + text: "Cancel", + showText: false + } + ] + }).dialog("option", "height", 600), + + datepickerDialog = $( "#dialog-datepicker" ).dialog({ + autoOpen: false, + modal: true + }), + + autocompleteDialog = $( "#dialog-autocomplete" ).dialog({ + autoOpen: false, + modal: false, + width: 600 + }); + + $( "#open-dialog" ).click(function() { + dialog.dialog( "open" ); + }); + + $( "#open-datepicker" ).click(function() { + datepickerDialog.dialog( "open" ); + }); + + $( "#open-autocomplete" ).click(function() { + autocompleteDialog.dialog( "open" ); + }); + + $( "#datepicker" ).datepicker(); + + $( "#autocomplete" ).autocomplete({ + source: [ + "ActionScript", + "AppleScript", + "Asp", + "BASIC", + "Scheme" + ] + }); + + $( "#destroy-dialog" ).click(function() { + dialog.dialog( "destroy" ).show(); + $( this ).remove(); + }); + + $( document ).tooltip(); + }); + </script> +</head> +<body> + +<p>WHAT: A modal dialog opening another modal dialog (including a datepicker), opening a non-modal dialog (including an autocomplete with tooltip applied). A regular link on the page, outside of the dialogs.</p> +<p>EXPECTED: As long as a modal dialog is open, focus stays within the dialogs. Both mouse and keyboard interactions are captured and restricted to the dialog. When the nested modal dialog is open, the first modal dialog can't be interacted with, until the nested dialog is closed. When the third dialog is open (not modal), switching between the two dialogs is possible, both can be interacted with.</p> + + +<button id="open-dialog">Reopen dialog</button> + +<div id="dialog" title="Basic dialog, but with a really long title that doesn't quite fit."> + <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> + <p><button id="open-datepicker">Open another window with a datepicker.</button></p> + <p><button id="destroy-dialog">Self destruct</button></p> +</div> + +<div id="dialog-datepicker" title="A dialog with a datepicker"> + <p>Date: <input id="datepicker"></p> + <p><button id="open-autocomplete" autofocus>Open another window with an autocomplete and a tooltip.</button></p> +</div> + +<div id="dialog-autocomplete"> + <label for="autocomplete">Tags: </label> + <input id="autocomplete" title="Try typing something!"> +</div> + +<a href="#">Outside link</a> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/dialog/form.html b/apps/it/static/js/ui/tests/visual/dialog/form.html new file mode 100644 index 0000000..de8b452 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/dialog/form.html @@ -0,0 +1,70 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Dialog Visual Test</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.mouse.js"></script> + <script src="../../../ui/jquery.ui.draggable.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.resizable.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script src="../../../ui/jquery.ui.dialog.js"></script> + <script src="../../../ui/jquery.ui.effect.js"></script> + <script src="../../../ui/jquery.ui.effect-blind.js"></script> + <script src="../../../ui/jquery.ui.effect-explode.js"></script> + <script> + $(function() { + $( "#form-dialog, #prompt-dialog" ).dialog({ + autoOpen: false, + modal: true + }); + + $( "#open-form" ).click(function() { + $( "#form-dialog" ).dialog( "open" ); + }); + + $( "#open-prompt" ).click(function() { + $( "#prompt-dialog" ).dialog( "open" ); + }); + }); + </script> + <style> + label { + display: block; + } + </style> +</head> +<body> + +<p>WHAT: A modal dialog containing form fields, with groups to describe each section. A second modal dialog with just an input and some text markup.</p> +<p>EXPECTED: Dialog shows up, screenreader reads the dialog's title, the word "dialog" (or equivalent), the text before the first input (description of the first section) and the label of the first, focused input. When tabbing to the next group, the screenreader should announce the description of that group, along with the label of the focused field.</p> +<p>For the second dialog, the behaviour should be similar, except that the whole content is read as the description of the dialog, likely causing the input's label to be read twice.</p> +<p>NOTE: Using <code>fieldset</code> with <code>legend</code> seems to have the same result as using <code>role="group"</code> and <code>aria-describedby</code>. The latter needs an id-attribute, offers more flexibilty in markup order and has no built-in styling.</p> + +<div id="form-dialog" title="Profile Information"> + <fieldset> + <legend>Please share some personal information</legend> + <label for="favorite-animal">Your favorite animal</label><input id="favorite-animal"> + <label for="favorite-color">Your favorite color</label><input id="favorite-color"> + </fieldset> + <div role="group" aria-describedby="section2"> + <p id="section2">Some more (optional) information</p> + <label for="favorite-food">Favorite food</label><input id="favorite-food"> + </div> +</div> + +<button id="open-form">Open Form Dialog</button> + +<div id="prompt-dialog" title="Are you sure?"> + <p>Please enter password to continue.</p> + <label for="password">Password</label><input id="password"> +</div> + +<button id="open-prompt">Open Prompt Dialog</button> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/dialog/performance.html b/apps/it/static/js/ui/tests/visual/dialog/performance.html new file mode 100644 index 0000000..d12eede --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/dialog/performance.html @@ -0,0 +1,73 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Dialog Visual Test - Modal Dialog in Large DOM</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.mouse.js"></script> + <script src="../../../ui/jquery.ui.draggable.js"></script> + <script src="../../../ui/jquery.ui.resizable.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script src="../../../ui/jquery.ui.dialog.js"></script> + <script> + $(function() { + var start, + html = new Array( 500 ).join( $.trim( $( "#template" ).html() ) ); + $( html ).appendTo( "body" ); + + start = $.now(); + $( "#dialog" ).dialog({ + modal: true, + autoOpen: false + }); + $( "<li>Create: " + ($.now() - start) + "ms</li>" ).appendTo( "#log" ); + + $( "#opener" ).click(function() { + start = $.now(); + $( "#dialog" ).dialog( "open" ); + $( "<li>Open: " + ($.now() - start) + "ms</li>" ).appendTo( "#log" ); + }); + }); + </script> +</head> +<body> + +<p>WHAT: A single dialog is created on a page with a large DOM.</p> +<p>EXPECTED: Creating and opening the dialog should be fast, regardless of page size.</p> + +<button id="opener">open dialog</button> +<div id="dialog" title="Dialog Title"> + <p> Dialog Content </p> + <input type="text"> +</div> + +<ul id="log"></ul> + +<script type="text/html" id="template"> +<div><div><div><div><div><div><div><div><div><div> +<div><div><div><div><div><div><div><div><div><div> +<div><div><div><div><div><div><div><div><div><div> +<div><div><div><div><div><div><div><div><div><div> +<div><div><div><div><div><div><div><div><div><div> +<div><p>This <span>is</span> <span>a</span> <strong>large</strong> <abbr>DOM</abbr>.</p></div> +<input> +<select> + <option>option 1</option> + <option>option 2</option> + <option>option 3</option> + <option>option 4</option> + <option>option 5</option> +</select> +</div></div></div></div></div></div></div></div></div></div> +</div></div></div></div></div></div></div></div></div></div> +</div></div></div></div></div></div></div></div></div></div> +</div></div></div></div></div></div></div></div></div></div> +</div></div></div></div></div></div></div></div></div></div> +</script> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/effects/all.html b/apps/it/static/js/ui/tests/visual/effects/all.html new file mode 100644 index 0000000..a16c2da --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/effects/all.html @@ -0,0 +1,217 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects Test Suite</title> + <link rel="stylesheet" href="effects.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.effect.js"></script> + <script src="../../../ui/jquery.ui.effect-blind.js"></script> + <script src="../../../ui/jquery.ui.effect-bounce.js"></script> + <script src="../../../ui/jquery.ui.effect-clip.js"></script> + <script src="../../../ui/jquery.ui.effect-drop.js"></script> + <script src="../../../ui/jquery.ui.effect-explode.js"></script> + <script src="../../../ui/jquery.ui.effect-fade.js"></script> + <script src="../../../ui/jquery.ui.effect-fold.js"></script> + <script src="../../../ui/jquery.ui.effect-highlight.js"></script> + <script src="../../../ui/jquery.ui.effect-pulsate.js"></script> + <script src="../../../ui/jquery.ui.effect-scale.js"></script> + <script src="../../../ui/jquery.ui.effect-shake.js"></script> + <script src="../../../ui/jquery.ui.effect-slide.js"></script> + <script src="../../../ui/jquery.ui.effect-transfer.js"></script> + <script src="effects.js"></script> +</head> +<body> + +<ul class="effects"> + + <li> + <div class="effect" id="blindUp"> + <p>Blind up</p> + </div> + </li> + + <li> + <div class="effect" id="blindDown"> + <p>Blind down</p> + </div> + </li> + + <li> + <div class="effect" id="blindLeft"> + <p>Blind left</p> + </div> + </li> + + <li> + <div class="effect" id="blindRight"> + <p>Blind right</p> + </div> + </li> + + <li> + <div class="effect" id="bounce3times"> + <p>Bounce 3 times</p> + </div> + </li> + + <li> + <div class="effect" id="clipHorizontally"> + <p>Clip horizontally</p> + </div> + </li> + + <li> + <div class="effect" id="clipVertically"> + <p>Clip vertically</p> + </div> + </li> + + <li> + <div class="effect" id="dropDown"> + <p>Drop down</p> + </div> + </li> + + <li> + <div class="effect" id="dropUp"> + <p>Drop up</p> + </div> + </li> + + <li> + <div class="effect" id="dropLeft"> + <p>Drop left</p> + </div> + </li> + + <li> + <div class="effect" id="dropRight"> + <p>Drop right</p> + </div> + </li> + + <li> + <div class="effect" id="explode9"> + <p>Explode in 9 pieces</p> + </div> + </li> + + <li> + <div class="effect" id="explode36"> + <p>Explode in 36 pieces</p> + </div> + </li> + + <li> + <div class="effect" id="fade"> + <p>Fade</p> + </div> + </li> + + <li> + <div class="effect" id="fold"> + <p>Fold</p> + </div> + </li> + + <li> + <div class="effect" id="highlight"> + <p>Highlight</p> + </div> + </li> + + <li> + <div class="effect" id="pulsate"> + <p>Pulsate 2 times</p> + </div> + </li> + + <li> + <div class="effect" id="puff"> + <p>Puff</p> + </div> + </li> + + <li> + <div class="effect" id="scale"> + <p>Scale</p> + </div> + </li> + + <li> + <div class="effect" id="shake"> + <p>Shake</p> + </div> + </li> + + <li> + <div class="effect" id="size"> + <p>Size Default Show/Hide</p> + </div> + </li> + + <li> + <div class="effect" id="sizeToggle"> + <p>Size Toggle</p> + </div> + </li> + + <li> + <div class="effect" id="slideDown"> + <p>Slide down</p> + </div> + </li> + + <li> + <div class="effect" id="slideUp"> + <p>Slide up</p> + </div> + </li> + + <li> + <div class="effect" id="slideLeft"> + <p>Slide left</p> + </div> + </li> + + <li> + <div class="effect" id="slideRight"> + <p>Slide right</p> + </div> + </li> + + <li> + <div class="effect" id="transfer"> + <p>Transfer to first element</p> + </div> + </li> + + <li> + <div class="effect" id="addClass"> + <p>addClass</p> + </div> + </li> + + <li> + <div class="effect" id="removeClass"> + <p>removeClass</p> + </div> + </li> + + <li> + <div class="effect" id="toggleClass"> + <p>toggleClass</p> + </div> + </li> + + <li> + <div class="effect" id="hide"> + <p>hide/show (jQuery)</p> + </div> + </li> + +</ul> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/effects/effects.css b/apps/it/static/js/ui/tests/visual/effects/effects.css new file mode 100644 index 0000000..8e9ee0f --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/effects/effects.css @@ -0,0 +1,49 @@ +body { + margin: 1em; + padding: 0; + background: #fff; + color: #000; +} + +ul.effects { + list-style-type: none; + margin: 0; + padding: 0; +} + +ul.effects li { + padding: 0; + width: 120px; + height: 100px; + float: left; + margin-top: 20px; + margin-left: 20px; +} + +div.effect { + width: 120px; + height: 100px; + background: #ccc; + border: 5px outset #aaa; + float: left; + cursor: pointer; + cursor: hand; +} + +div.current { + border: 5px outset #FF9C08; + background: #FF9C08; +} + +div.effect p { + color: #191919; + font-weight: bold; + margin: 0; + padding: 10px; +} + +.ui-effects-transfer { + border: 1px dotted #fff; + background: #666; + opacity: 0.5; +} diff --git a/apps/it/static/js/ui/tests/visual/effects/effects.js b/apps/it/static/js/ui/tests/visual/effects/effects.js new file mode 100644 index 0000000..624e0b1 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/effects/effects.js @@ -0,0 +1,107 @@ +$(function() { + +var duration = 1000, + wait = 500; + +function effect( elem, name, options ) { + $.extend( options, { + easing: "easeOutQuint" + }); + + $( elem ).click(function() { + $( this ) + .addClass( "current" ) + // delaying the initial animation makes sure that the queue stays in tact + .delay( 10 ) + .hide( name, options, duration ) + .delay( wait ) + .show( name, options, duration, function() { + $( this ).removeClass( "current" ); + }); + }); +} + +$( "#hide" ).click(function() { + $( this ) + .addClass( "current" ) + .hide( duration ) + .delay( wait ) + .show( duration, function() { + $( this ).removeClass( "current" ); + }); +}); + +effect( "#blindLeft", "blind", { direction: "left" } ); +effect( "#blindUp", "blind", { direction: "up" } ); +effect( "#blindRight", "blind", { direction: "right" } ); +effect( "#blindDown", "blind", { direction: "down" } ); + +effect( "#bounce3times", "bounce", { times: 3 } ); + +effect( "#clipHorizontally", "clip", { direction: "horizontal" } ); +effect( "#clipVertically", "clip", { direction: "vertical" } ); + +effect( "#dropDown", "drop", { direction: "down" } ); +effect( "#dropUp", "drop", { direction: "up" } ); +effect( "#dropLeft", "drop", { direction: "left" } ); +effect( "#dropRight", "drop", { direction: "right" } ); + +effect( "#explode9", "explode", {} ); +effect( "#explode36", "explode", { pieces: 36 } ); + +effect( "#fade", "fade", {} ); + +effect( "#fold", "fold", { size: 50 } ); + +effect( "#highlight", "highlight", {} ); + +effect( "#pulsate", "pulsate", { times: 2 } ); + +effect( "#puff", "puff", { times: 2 } ); +effect( "#scale", "scale", {} ); +effect( "#size", "size", {} ); +$( "#sizeToggle" ).click(function() { + var options = { to: { width: 300, height: 300 } }; + $( this ) + .addClass( "current" ) + .toggle( "size", options, duration ) + .delay( wait ) + .toggle( "size", options, duration, function() { + $( this ).removeClass( "current" ); + }); +}); + +$( "#shake" ).click(function() { + $( this ) + .addClass( "current" ) + .effect( "shake", {}, 100, function() { + $( this ).removeClass( "current" ); + }); +}); + +effect( "#slideDown", "slide", { direction: "down" } ); +effect( "#slideUp", "slide", { direction: "up" } ); +effect( "#slideLeft", "slide", { direction: "left" } ); +effect( "#slideRight", "slide", { direction: "right" } ); + +$( "#transfer" ).click(function() { + $( this ) + .addClass( "current" ) + .effect( "transfer", { to: "div:eq(0)" }, 1000, function() { + $( this ).removeClass( "current" ); + }); +}); + +$( "#addClass" ).click(function() { + $( this ).addClass( "current", duration, function() { + $( this ).removeClass( "current" ); + }); +}); +$( "#removeClass" ).click(function() { + $( this ).addClass( "current" ).removeClass( "current", duration ); +}); +$( "#toggleClass" ).click(function() { + $( this ).toggleClass( "current", duration ); +}); + +}); diff --git a/apps/it/static/js/ui/tests/visual/effects/scale.html b/apps/it/static/js/ui/tests/visual/effects/scale.html new file mode 100644 index 0000000..223f5ae --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/effects/scale.html @@ -0,0 +1,157 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects Test Suite</title> + <link rel="stylesheet" href="effects.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.effect.js"></script> + <script src="../../../ui/jquery.ui.effect-scale.js"></script> + <script> + $(function() { + var test = $( "#testBox" ), + opts = $( ".arg" ), + optsRev = $( opts.get().reverse() ), + doer = $( "#doAnim" ), + current = $( "#current" ), + cleanStyle = test[0].style, + total = 1; + + opts.each(function() { + total *= this.options.length; + }); + + opts.change( doAnim ); + doer.click( doAnim ); + $( "#cyclePrev" ).click(function() { + cycle( -1 ); + }); + $( "#cycleNext" ).click(function() { + cycle( 1 ); + }); + + function cycle( direction ) { + optsRev.each(function() { + var cur = this.selectedIndex, + next = cur + direction, + len = this.options.length; + + this.selectedIndex = ( next + len ) % len; + + if ( ( next+len ) % len === next ) return false; + }); + doAnim(); + } + + + function doAnim() { + var cur = 0; + opts.each(function() { + cur *= this.options.length + cur += this.selectedIndex; + }); + cur++; + current.text( "Configuration: " + cur + " of " + total ); + run.apply(test, opts.map(function() { + return $(this).val(); + }).get()); + } + + function run( position, v, h, vo, ho ) { + var el = this, + style = el[0].style, + effect = { + effect: "scale", + mode: "effect", + percent: 200, + origin: [ vo, ho ], + duration: 500 + }; + el.stop(true, true); + if ( typeof style === "object" ) { + style.cssText = ""; + } else { + el[0].style = ""; + } + el.css( "position", position ) + .css( h, 5 ) + .css( v, 5 ) + .delay( 100 ) + .effect( effect ); + } + }); + </script> + <style> + #testArea { + width: 200px; + height: 200px; + position: relative; + } + #testBox { + width: 50px; + height: 50px; + background-color: #bada55; + color: black; + border: 10px solid #fff; + margin: 10px; + padding: 10px; + } + label { + display: block; + } + #controls { + position: absolute; + z-index: 300; + left: 50%; + top: 50%; + margin-left: -200px; + width: 400px; + opacity: 0.8; + } + </style> +</head> +<body> + <div id="testArea"> + <div id="testBox"> + </div> + </div> + <div id="controls"> + <label for="pos">Positioning + <select id="pos" class="arg"> + <option value="absolute">absolute</option> + <option value="relative">relative</option> + <option value="fixed">fixed</option> + </select> + </label> + <label for="vertPos">Vertical Positioning + <select id="vertPos" class="arg"> + <option value="top">top</option> + <option value="bottom">bottom</option> + </select> + </label> + <label for="horizPos">Horizontal Positioning + <select id="horizPos" class="arg"> + <option value="left">left</option> + <option value="right">right</option> + </select> + </label> + <label for="vertOrigin">Vertical Origin + <select id="vertOrigin" class="arg"> + <option value="top">top</option> + <option value="middle">middle</option> + <option value="bottom">bottom</option> + </select> + </label> + <label for="horizOrigin">Horizontal Origin + <select id="horizOrigin" class="arg"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right">right</option> + </select> + </label><br /> + <label id="current">jQuery UI Scale Animation Test</label> + <button id="cyclePrev">Back</button> + <button id="doAnim">Run Animation</button> + <button id="cycleNext">Forward</button> + </div> +</body> diff --git a/apps/it/static/js/ui/tests/visual/index.html b/apps/it/static/js/ui/tests/visual/index.html new file mode 100644 index 0000000..730eb45 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/index.html @@ -0,0 +1,82 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Visual Tests</title> + + <link rel="stylesheet" href="../../themes/base/jquery.ui.core.css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css"> + <link rel="stylesheet" href="../index.css"> + <script src="../jquery-1.10.2.js"></script> + <script src="../index.js"></script> +</head> +<body> + +<div id="main"> + <h1>jQuery UI Visual Tests</h1> + <div> + <h2>Accordion</h2> + <ul> + <li><a href="accordion/icons.html">Icons</a></li> + </ul> + + <h2>addClass</h2> + <ul> + <li><a href="addClass/queue.html">Queue</a></li> + </ul> + + <h2>Button</h2> + <ul> + <li><a href="button/button.html">General</a></li> + <li><a href="button/performance.html">Performance</a></li> + </ul> + + <h2>Dialog</h2> + <ul> + <li><a href="dialog/performance.html">Performance</a></li> + </ul> + + <h2>Effects</h2> + <ul> + <li><a href="effects/all.html">All</a></li> + <li><a href="effects/scale.html">Scale</a></li> + </ul> + + <h2>Menu</h2> + <ul> + <li><a href="menu/menu.html">General</a></li> + </ul> + + <h2>Position</h2> + <ul> + <li><a href="position/position.html">General</a></li> + <li><a href="position/position_feedback.html">Feedback</a></li> + </ul> + + <h2>Tooltip</h2> + <ul> + <li><a href="tooltip/tooltip.html">General</a></li> + <li><a href="tooltip/animations.html">Animations</a></li> + </ul> + + <h2>Compound</h2> + <ul> + <li><a href="compound/accordion_tabs.html">Accordion in Tabs</a></li> + <li><a href="compound/datepicker_dialog.html">Datepicker in Dialog</a></li> + <li><a href="compound/dialog_widgets.html">Various Widgets in Dialog</a></li> + <li><a href="compound/draggable_accordion.html">Draggable Accordion</a></li> + <li><a href="compound/draggable_accordion_accordion_tabs_draggable.html">Nested Widgets</a></li> + <li><a href="compound/sortable_accordion_sortable_tabs.html">Sortable Tabs in Sortable Accordion</a></li> + <li><a href="compound/tabs_tabs.html">Nested Tabs</a></li> + <li><a href="compound/tabs_tooltips.html">Tabs with Tooltips</a></li> + </ul> + + <h2>General</h2> + <ul> + <li><a href="theme.html">Theme</a></li> + </ul> + </div> +</div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/menu/menu.html b/apps/it/static/js/ui/tests/visual/menu/menu.html new file mode 100644 index 0000000..3d4e81e --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/menu/menu.html @@ -0,0 +1,314 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>Menu Visual Test: Default</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.menu.js"></script> + <script> + $(function() { + function logger( event, ui ) { + $( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" ); + } + + $( "#menu1, #menu2, #menu3, .menu4, #menu7" ).menu({ + select: logger + }); + + $( "#menu5" ).menu({ + menus: "div", + select: logger + }); + + $( "#menu6" ).menu({ + menus: ".menuElement", + select: logger, + icon: "ui-icon-carat-1-s" + }); + }); + </script> + <style> + body { font-size:62.5%; } + .ui-menu { width: 200px; margin-bottom: 2em; } + .menu4 { height: 200px; overflow-y: auto; overflow-x: hidden; } + .address-item { border-bottom: 1px solid #999; } + .address-header { display: block; margin-bottom: .2em; font-weight: bold; } + .address-content { display: block; margin-bottom: .2em; padding-left: 10px; } + </style> +</head> +<body> + +<h2>Default inline menu</h2> +<ul id="menu1"> + <li><a href="#">Aberdeen</a></li> + <li><a href="#">Ada</a></li> + <li><a href="#">Adamsville</a></li> + <li><a href="#">Addyston</a></li> + <li><a href="#">Delphi</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> +</ul> + +<h2>Inline with disabled items and submenus</h2> +<ul id="menu2"> + <li class="ui-state-disabled"><a href="#">Aberdeen</a></li> + <li><a href="#">Ada</a></li> + <li><a href="#">Adamsville</a></li> + <li><a href="#">Addyston</a></li> + <li> + <a href="#">Delphi</a> + <ul> + <li class="ui-state-disabled"><a href="#">Ada</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li><a href="#">Saarland</a></li> + <li> + <a href="#">Salzburg</a> + <ul> + <li> + <a href="#">Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li> + <a href="#">Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li><a href="#">Perch</a></li> + </ul> + </li> + <li class="ui-state-disabled"><a href="#">Amesville</a></li> +</ul> + +<h2>Menu with icons</h2> +<ul id="menu3"> + <li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li> + <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li> + <li><a href="#">Adamsville</a></li> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Addyston</a></li> + <li class="ui-state-disabled"> + <a href="#">Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li><a href="#">Saarland</a></li> + <li> + <a href="#"><span class="ui-icon ui-icon-print"></span>Salzburg</a> + <ul> + <li> + <a href="#"><span class="ui-icon ui-icon-wrench"></span>Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li> + <a href="#">Delphi</a> + <ul> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Ada</a></li> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Salzburg</a></li> + </ul> + </li> + <li><a href="#">Perch</a></li> + </ul> + </li> +</ul> + +<h2>Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour</h2> +<ul class="menu4"> + <li><a href="#">Aberdeen</a></li> + <li><a href="#">Ada</a></li> + <li><a href="#">Adamsville</a></li> + <li><a href="#">Addyston</a></li> + <li><a href="#">Adelphi</a></li> + <li><a href="#">Adena</a></li> + <li><a href="#">Adrian</a></li> + <li><a href="#">Akron</a></li> + <li><a href="#">Albany</a></li> + <li><a href="#">Alexandria</a></li> + <li><a href="#">Alger</a></li> + <li><a href="#">Alledonia</a></li> + <li><a href="#">Alliance</a></li> + <li><a href="#">Alpha</a></li> + <li><a href="#">Alvada</a></li> + <li><a href="#">Alvordton</a></li> + <li><a href="#">Amanda</a></li> + <li><a href="#">Amelia</a></li> + <li><a href="#">Amesville</a></li> + <li><a href="#">Aberdeen</a></li> + <li><a href="#">Ada</a></li> + <li><a href="#">Adamsville</a></li> + <li><a href="#">Addyston</a></li> + <li><a href="#">Adelphi</a></li> + <li><a href="#">Adena</a></li> + <li><a href="#">Adrian</a></li> + <li><a href="#">Akron</a></li> + <li><a href="#">Albany</a></li> + <li><a href="#">Alexandria</a></li> + <li><a href="#">Alger</a></li> + <li><a href="#">Alledonia</a></li> + <li><a href="#">Alliance</a></li> + <li><a href="#">Alpha</a></li> + <li><a href="#">Alvada</a></li> + <li><a href="#">Alvordton</a></li> + <li><a href="#">Amanda</a></li> + <li><a href="#">Amelia</a></li> + <li><a href="#">Amesville</a></li> +</ul> + +<h2>Menu with custom markup</h2> +<div id="menu5"> + <blockquote><a href="#">Aberdeen</a></blockquote> + <blockquote><a href="#">Ada</a></blockquote> + <blockquote class="ui-state-disabled"><a href="#">Adamsville</a></blockquote> + <blockquote><a href="#">Addyston</a></blockquote> + <blockquote> + <a href="#">Delphi</a> + <div> + <blockquote><a href="#">Ada</a></blockquote> + <blockquote><a href="#">Saarland</a></blockquote> + <blockquote><a href="#">Salzburg</a></blockquote> + </div> + </blockquote> + <blockquote><a href="#">Saarland</a></blockquote> + <blockquote> + <a href="#">Salzburg</a> + <div> + <blockquote> + <a href="#">Delphi</a> + <div> + <blockquote><a href="#">Ada</a></blockquote> + <blockquote><a href="#">Saarland</a></blockquote> + <blockquote><a href="#">Salzburg</a></blockquote> + </div> + </blockquote> + <blockquote> + <a href="#">Delphi</a> + <div> + <blockquote><a href="#">Ada</a></blockquote> + <blockquote><a href="#">Saarland</a></blockquote> + <blockquote><a href="#">Salzburg</a></blockquote> + </div> + </blockquote> + <blockquote><a href="#">Perch</a></blockquote> + </div> + </blockquote> +</div> + +<h2>Menu with custom markup, multi-line items and a custom submenu icon</h2> +<div class="menuElement" id="menu6"> + <div class="address-item"> + <a href="#"> + <span class="address-header">John Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> + </a> + </div> + <div class="address-item"> + <a href="#"> + <span class="address-header">Jane Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> + </a> + </div> + <div class="address-item ui-state-disabled"> + <a href="#"> + <span class="address-header">James Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> + </a> + </div> + <div class="address-item"> + <a href="#"> + <span class="address-header">Jenny Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> + </a> + </div> + <div class="address-item"> + <a href="#"> + <span class="address-header">John Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> + </a> + <div class="menuElement"> + <div><a href="#">Ada</a></div> + <div><a href="#">Saarland</a></div> + <div><a href="#">Salzburg</a></div> + </div> + </div> +</div> + +<h2>Inline with dividers and elements without anchors</h2> +<ul id="menu7"> + <li><strong>Group 1</strong></li> + <li><a href="#">Aberdeen</a></li> + <li><a href="#">Ada</a></li> + <li><a href="#">Adamsville</a></li> + <li><a href="#">Addyston</a></li> + <li></li> + <li><strong>Group 2</strong></li> + <li> + <a href="#">Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li><a href="#">Saarland</a></li> + <li>---</li> + <li><strong>Group 3</strong></li> + <li> + <a href="#">Salzburg</a> + <ul> + <li> + <a href="#">Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li> - </li> + <li><a href="#">Saarland</a></li> + <li>—</li> + <li><a href="#">Salzburg</a></li> + <li>–</li> + </ul> + </li> + <li> + <a href="#">Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li><a href="#">Perch</a></li> + </ul> + </li> + <li><a href="#">Amesville</a></li> +</ul> + +<div style="position: absolute; top: 1em; right: 1em;"> + Log: + <div id="log" style="height: 400px; width: 300px; overflow: auto; border: 1px solid #000;"></div> +</div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/position/position.html b/apps/it/static/js/ui/tests/visual/position/position.html new file mode 100644 index 0000000..7b01929 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/position/position.html @@ -0,0 +1,143 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Position Visual Test</title> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.mouse.js"></script> + <script src="../../../ui/jquery.ui.draggable.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <style> + .demo { + position: relative; + height: 500px; + width: 80%; + margin: 20px auto; + background: #eee; + } + #target { + width: 60%; + margin: 0 auto; + border: 1px solid #777; + background-color: #fbca93; + text-align: center; + cursor: move; + } + .positionable { + position: absolute; + background-color: #bcd5e6; + text-align: center; + } + .extra-margin { + margin: 0 15px 15px 0; + } + </style> + <script> + $(function() { + var within = $( ".demo" ), + positionable = $( ".positionable" ); + function position() { + positionable.position({ + of: $( "#target" ), + my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), + at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), + within: within, + collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() + }); + } + + positionable.css( "opacity", 0.5 ); + + $( "#target" ).draggable({ + drag: function() { position(); } + }); + + $( "#within" ).click(function() { + within = within.is( ".demo" ) ? $( window ) : $( ".demo" ); + position(); + }); + + $( "#margin" ).click(function() { + positionable.toggleClass( "extra-margin" ); + position(); + }); + + $( "select, input" ).bind( "click keyup change", function() { position(); } ); + + position(); + }); + </script> +</head> +<body> + +<div class="demo"> + <div id="target"> + <p>This is the position target element.</p> + </div> + + <div class="positionable" style="width: 75px; height: 75px;"> + <p>to position</p> + </div> + + <div class="positionable" style="width:120px; height: 40px;"> + <p>to position 2</p> + </div> + + <form style="padding: 20px; margin-top: 75px;"> + <h2>Position configuration:</h2> + <div style="padding-bottom: 20px;"> + <b>my:</b> + <select id="my_horizontal"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right" selected="selected">right</option> + </select> + <select id="my_vertical"> + <option value="top">top</option> + <option value="middle">center</option> + <option value="bottom">bottom</option> + </select> + </div> + <div style="padding-bottom: 20px;"> + <b>at:</b> + <select id="at_horizontal"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right" selected="selected">right</option> + </select> + <select id="at_vertical"> + <option value="top">top</option> + <option value="middle">center</option> + <option value="bottom">bottom</option> + </select> + </div> + <div style="padding-bottom: 20px;"> + <b>collision:</b> + <select id="collision_horizontal"> + <option value="flip">flip</option> + <option value="fit">fit</option> + <option value="flipfit">flipfit</option> + <option value="none">none</option> + </select> + <select id="collision_vertical"> + <option value="flip">flip</option> + <option value="fit">fit</option> + <option value="flipfit">flipfit</option> + <option value="none">none</option> + </select> + </div> + <div> + <label for="within">within:</label> + <input id="within" type="checkbox" checked="checked"> + </div> + <div> + <label for="margin">extra margin:</label> + <input id="margin" type="checkbox"> + </div> + </form> +</div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/position/position_feedback.html b/apps/it/static/js/ui/tests/visual/position/position_feedback.html new file mode 100644 index 0000000..19a8538 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/position/position_feedback.html @@ -0,0 +1,145 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Position Visual Test: Feedback</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.menu.js"></script> + <script> + $(function() { + function using( position, feedback ) { + $( this ) + .css( position ) + .text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important ) + .removeClass( "left right top bottom center middle vertical horizontal" ) + .addClass( feedback.horizontal ) + .addClass( feedback.vertical ) + .addClass( feedback.important ); + } + + var element = $( ".element" ), + target = $( "#target" ).position({ + my: "center", + at: "center", + of: window + }), + targetOffset = target.offset(), + oppositeElement = element.clone().width( 50 ).appendTo( "body" ), + leftElement = element.clone().width( 50 ).height( 150 ).appendTo( "body" ), + rightElement = element.clone().height( 150 ).width( 150 ).appendTo( "body" ); + + $.each([ + "center top-100", + "right+25 top-50", + "right+75 top", + "right+75 center", + "right+75 bottom", + "right+25 bottom+50", + "center bottom+100", + "left-25 bottom+50", + "left-75 bottom", + "left-75 center", + "left-75 top", + "left-25 top-50" + ], function( index, direction ) { + element.clone().insertAfter( target ).position({ + my: "center", + at: direction, + of: target, + using: using + }); + }); + + element.width( 150 ); + function positionWithOffset( horizontal, vertical ) { + return { + my: "left top", + at: "left" + (horizontal < 0 ? horizontal : "+" + horizontal) + " " + + "top" + (vertical < 0 ? vertical : "+" + vertical), + of: target, + using: using + }; + }; + $( document ).on( "mousemove", function( event ) { + element.position( positionWithOffset( + event.pageX - targetOffset.left, event.pageY - targetOffset.top ) ); + oppositeElement.position( positionWithOffset( + -1 * (event.pageX - targetOffset.left), -1 * (event.pageY - targetOffset.top) ) ); + leftElement.position( positionWithOffset( + -0.9 * (event.pageX - targetOffset.left), 0.9 * (event.pageY - targetOffset.top) ) ); + rightElement.position( positionWithOffset( + 0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) ); + }); + }); + </script> + <style> + #target, .element { + position: absolute; + border: 1px solid black; + border-radius: 5px; + width: 75px; + height: 25px; + padding: 5px; + font-size: 62.5%; + } + #target { + height: 75px; + } + .element:before { + font-size: 12pt; + content: "↑"; + position: absolute; + top: -19px; + left: 5px; + } + .right:before { + left: auto; + right: 5px; + } + .bottom:before { + content: "↓"; + top: auto; + bottom: -19px; + } + .center:before { + left: 50%; + right: auto; + } + .middle:before { + top: 50%; + bottom: auto; + } + .horizontal:before { + height: 10px; + top: 50%; + margin-top: -8px; + bottom: auto; + left: -18px; + right: auto; + content: "←"; + } + .right.horizontal:before { + left: auto; + right: -18px; + content: "→"; + } + .bottom.horizontal:before { + top: auto; + bottom: 5px; + } + .top.horizontal:before { + top: 5px; + } + </style> +</head> +<body> + +<div id="target">all around me</div> +<div class="element"></div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/theme.html b/apps/it/static/js/ui/tests/visual/theme.html new file mode 100644 index 0000000..9b4b6e8 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/theme.html @@ -0,0 +1,525 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Example Page</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.10.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.accordion.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <script src="../../ui/jquery.ui.progressbar.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.selectable.js"></script> + <script src="../../ui/jquery.ui.slider.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <script src="../../ui/jquery.ui.tabs.js"></script> + <script> + $(function(){ + + // Accordion + $(".accordion").accordion({ header: "h3" }); + $(".accordion").last().accordion("option", "icons", false); + + // Tabs + $('#tabs').tabs(); + + // Dialog + $('#dialog').dialog({ + autoOpen: false, + width: 600, + buttons: { + "Ok": function() { + $(this).dialog("close"); + }, + "Cancel": function() { + $(this).dialog("close"); + } + } + }); + + // Dialog Link + $('#dialog_link').click(function(){ + $('#dialog').dialog('open'); + return false; + }); + + // Datepicker + $('#datepicker').datepicker({ + inline: true, + showWeek: true + }); + + $('#multidatepicker').datepicker({ + numberOfMonths: 3, + showButtonPanel: true, + inline: true + }); + + // Slider + $('.slider').slider({ + range: true, + values: [17, 67] + }); + + $("#eq > span").each(function() { + var value = parseInt($(this).text()); + $(this).empty().slider({ + value: value, + range: "min", + animate: true, + orientation: "vertical" + }); + }); + + + // Progressbar + $("#progressbar").progressbar({ + value: 20 + }); + + //hover states on the static widgets + $('#dialog_link, ul#icons li').hover( + function() { $(this).addClass('ui-state-hover'); }, + function() { $(this).removeClass('ui-state-hover'); } + ); + + $(".buttonset > button").button() + .next() + .button({ + text: false, + icons: { + primary: "ui-icon-triangle-1-s" + } + }) + .parent() + .buttonset(); + + + $('#beginning').button({ + text: false, + icons: { + primary: 'ui-icon-seek-start' + } + }); + $('#rewind').button({ + text: false, + icons: { + primary: 'ui-icon-seek-prev' + } + }); + $('#play').button({ + text: false, + icons: { + primary: 'ui-icon-play' + } + }); + $('#stop').button({ + text: false, + icons: { + primary: 'ui-icon-stop' + } + }); + $('#forward').button({ + text: false, + icons: { + primary: 'ui-icon-seek-next' + } + }); + $('#end').button({ + text: false, + icons: { + primary: 'ui-icon-seek-end' + } + }); + $("#shuffle").button(); + $("#repeat").buttonset(); + + }); + </script> + <style> + /*demo page css*/ + body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} + .demoHeaders { margin-top: 2em; clear:both; } + #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} + #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} + ul#icons {margin: 0; padding: 0;} + ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} + ul#icons span.ui-icon {float: left; margin: 0 4px;} + .columnbox { height: 150px; width: 48%; float:left; margin-right: 1%; } + #eq span { height:120px; float:left; margin:15px } + .buttonset {margin-bottom: 5px; } + #toolbar { padding: 10px 4px; } + </style> +</head> +<body> + +<div id="switcher" style="position:absolute; right: 20px; top: 20px;"></div> + +<!-- Accordion --> +<h2 class="demoHeaders">Accordion</h2> +<div class="columnbox"> + <div class="accordion"> + <div> + <h3><a href="#">First</a></h3> + <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> + </div> + <div> + <h3><a href="#">Second</a></h3> + <div>Phasellus mattis tincidunt nibh.</div> + </div> + <div> + <h3><a href="#">Third</a></h3> + <div>Nam dui erat, auctor a, dignissim quis.</div> + </div> + </div> +</div> +<div class="columnbox"> + <div class="accordion"> + <div> + <h3><a href="#">First no icons</a></h3> + <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> + </div> + <div> + <h3><a href="#">Second no icons</a></h3> + <div>Phasellus mattis tincidunt nibh.</div> + </div> + <div> + <h3><a href="#">Third no icons</a></h3> + <div>Nam dui erat, auctor a, dignissim quis.</div> + </div> + </div> +</div> + + +<!-- Tabs --> +<h2 class="demoHeaders">Tabs</h2> +<div id="tabs"> + <ul> + <li><a href="#tabs-1">First</a></li> + <li><a href="#tabs-2">Second</a></li> + <li><a href="#tabs-3">Third</a></li> + </ul> + <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> + <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> + <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> +</div> + +<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller--> +<h2 class="demoHeaders">Dialog</h2> +<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p> + +<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" ><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title">Inline Dialog</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" ><span class="ui-icon ui-icon-closethick" >close</span></a></div><div class="ui-dialog-content ui-widget-content" > +<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> +</div><div class="ui-resizable-handle ui-resizable-n" ></div><div class="ui-resizable-handle ui-resizable-e" ></div><div class="ui-resizable-handle ui-resizable-s" ></div><div class="ui-resizable-handle ui-resizable-w" ></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" ></div><div class="ui-resizable-handle ui-resizable-sw" ></div><div class="ui-resizable-handle ui-resizable-ne" ></div><div class="ui-resizable-handle ui-resizable-nw" ></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Ok</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button></div></div> + + +<h2 class="demoHeaders">Overlay and Shadow Classes <em>(not currently used in UI widgets)</em></h2> +<div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;" class="fakewindowcontain"> + <p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p> + + <!-- ui-dialog --> + <div class="ui-overlay"><div class="ui-widget-overlay"></div><div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;"></div></div> + <div style="position: absolute; width: 280px; height: 130px;left: 50px; top: 30px; padding: 10px;" class="ui-widget ui-widget-content ui-corner-all"> + <div class="ui-dialog-content ui-widget-content" style="background: none; border: 0;"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + </div> + </div> + +</div> + + +<!-- ui-dialog --> +<div id="dialog" title="Dialog Title"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> +</div> + + + +<h2 class="demoHeaders">Framework Icons (content color preview)</h2> +<ul id="icons" class="ui-widget ui-helper-clearfix"> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li> + +<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li> +<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li> +</ul> + + +<!-- Slider --> +<h2 class="demoHeaders">Slider</h2> +<div class="columnbox"> + <div class="slider"></div> +</div> +<div class="columnbox"> + <div id="eq"> + <span>88</span> + <span>77</span> + <span>55</span> + <span>33</span> + <span>40</span> + <span>45</span> + <span>70</span> + </div> +</div> + + +<!-- Datepicker --> +<h2 class="demoHeaders">Datepicker</h2> +<div class="columnbox" style="width: 32%"> + <div id="datepicker"></div> +</div> +<div class="columnbox" style="width: 66%; height: 220px;"> + <div id="multidatepicker"></div> +</div> + + +<!-- Progressbar --> +<h2 class="demoHeaders">Progressbar</h2> +<div id="progressbar"></div> + +<!-- Highlight / Error --> +<h2 class="demoHeaders">Highlight / Error</h2> +<div class="ui-widget"> + <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> + <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span> + <strong>Hey!</strong> Sample ui-state-highlight style.</p> + </div> +</div> +<br/> +<div class="ui-widget"> + <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> + <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> + <strong>Alert:</strong> Sample ui-state-error style.</p> + </div> +</div> + +<h2 class="demoHeaders">Button</h2> + +<div class="buttonset"> + <button id="rerun">Run last action</button> + <button id="select">Select an action</button> +</div> + +<span id="toolbar" class="ui-widget-header ui-corner-all"> + <button id="beginning">go to beginning</button> + <button id="rewind">rewind</button> + <button id="play">play</button> + <button id="stop">stop</button> + <button id="forward">fast forward</button> + <button id="end">go to end</button> + + <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label> + + <span id="repeat"> + <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label> + <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label> + <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label> + </span> +</span> + +<!-- theme switcher --> + +<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script> +<script> + $('#switcher').themeswitcher(); +</script> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/tooltip/animations.html b/apps/it/static/js/ui/tests/visual/tooltip/animations.html new file mode 100644 index 0000000..c682d76 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/tooltip/animations.html @@ -0,0 +1,73 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Tooltip Visual Test: Animations</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.tooltip.js"></script> + <script src="../../../ui/jquery.ui.effect.js"></script> + <script src="../../../ui/jquery.ui.effect-blind.js"></script> + <script src="../../../ui/jquery.ui.effect-bounce.js"></script> + <script src="../../../ui/jquery.ui.effect-drop.js"></script> + <script src="../../../ui/jquery.ui.effect-explode.js"></script> + <style> + pre { + width: 250px; + border: 1px solid #000; + padding: .5em; + } + </style> + <script> + $(function() { + $( "pre" ).each(function( index, elem ) { + $( elem ) + .attr( "title", "animated tooltips" ) + .tooltip( $.parseJSON( $( elem ).text() ) ); + }); + }); + </script> +</head> +<body> + +<pre>{}</pre> +<pre>{ + "show": { + "effect": "slideDown" + }, + "hide": { + "effect": "slideUp" + } +}</pre> +<pre>{ + "show": { + "effect": "explode" + }, + "hide": { + "effect": "explode" + } +}</pre> +<pre>{ + "show": { + "effect": "bounce" + }, + "hide": { + "effect": "blind" + } +}</pre> +<pre>{ + "show": { + "effect": "drop", + "direction": "right" + }, + "hide": { + "effect": "drop", + "direction": "right" + } +}</pre> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/tooltip/tooltip.html b/apps/it/static/js/ui/tests/visual/tooltip/tooltip.html new file mode 100644 index 0000000..3b3ac0d --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/tooltip/tooltip.html @@ -0,0 +1,206 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Tooltip Visual Test: Default</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script src="../../../ui/jquery.ui.tooltip.js"></script> + <style> + .group { + margin-top: 2em; + } + </style> + <script> + $(function() { + // default + $( "#context1, form, #childish, #nested-input" ).tooltip(); + + // custom class, replaces ui-widget-content + $( "#context2" ).tooltip({ + tooltipClass: "ui-widget-header" + }); + $( "#right1" ).tooltip({ + tooltipClass: "ui-state-error" + }); + + // synchronous content + $( "#footnotes" ).tooltip({ + items: "[href^='#']", + content: function() { + return $( $( this ).attr( "href" ) ).html(); + } + }); + + // asynchronous content + $( "#async" ).tooltip({ + content: function( response ) { + setTimeout(function() { + response( "I loaded <strong>asynchronously</strong>!" ); + }, 1000 ); + return "Loading..."; + } + }); + + // asynchronous content with caching + var content; + $( "#async2" ).tooltip({ + content: function( response ) { + if ( content ) { + return content; + } + setTimeout(function() { + content = "<strong>Hello</strong> world!"; + response( content ); + }, 1000 ); + return "Loading..."; + } + }); + + // custom position + $( "#right2" ).tooltip({ + tooltipClass: "ui-state-highlight", + position: { + my: "center top", + at: "center bottom+10" + } + }); + + $( "#button1" ).button(); + $( "#button2" ).button({ + icons: { + primary: "ui-icon-wrench" + } + }); + $( "#button3, #button4" ).button({ + icons: { + primary: "ui-icon-wrench" + }, + text: false + }); + $( "#buttons" ).tooltip({ + position: { + my: "center bottom", + at: "center top-5" + } + }); + + $( "#blurs-on-click" ).tooltip({ + track: true, + show: { + delay: 500 + } + }).click(function() { + $( "#focus-on-me" ).focus(); + }); + }); + </script> +</head> +<body> + +<div> + <p>Lots of tooltipped elements close together.<br> + Mouse through them quickly and slowly.</p> + <ul id="context1"> + <li><a href="#" title="Tooltip text 1">Anchor 1</a></li> + <li><a href="#" title="Tooltip text 2">Anchor 2</a></li> + <li><a href="#" title="Tooltip text 3">Anchor 3</a></li> + <li><a href="#" title="Tooltip text 4 more Tooltip text Tooltip text ">Anchor 4</a></li> + <li><a href="#" title="Tooltip text 5 more Tooltip text Tooltip text ">Anchor 5</a></li> + <li><a href="#" title="Tooltip text 6 more Tooltip text Tooltip text ">Anchor 6</a></li> + </ul> + + <div class="group" style="position: absolute; right: 1em; text-align: right;"> + <p>These elements are right aligned.<br> + One collides and one uses custom position.</p> + <p id="right1" title="right aligned element"> + collision detection should kick in around here + </p> + <p id="right2" title="right aligned element with custom position"> + right aligned with custom position + </p> + </div> + + <div class="group"> + <p>These footnotes pull content form the elements they link to.</p> + <div id="footnotes"> + <a href="#footnote1">I'm a link to a footnote.</a> + <a href="#footnote2">I'm another link to a footnote.</a> + </div> + </div> + + <div class="group"> + <p>These elements load their content asynchronously.<br> + There should be a loading message while the content is retrieved.</p> + <div id="async" style="width: 100px;" class="ui-widget-content" title="never be seen"> + async + </div> + <div id="async2" style="width: 100px;" class="ui-widget-content" title="never be seen"> + async + cache + </div> + </div> + + <div class="group" style="width: 300px;"> + <p>Nested elements.</p> + <div id="context2"> + <div title="nested parent" style="border:1px solid red;"> + tooltipped + <span title="nested child" style="border:1px solid green; padding-left: 25px;"> + nested tooltipped + <span title="nested nested child" style="border:1px solid blue; padding-left: 25px;">third level</span> + </span> + </div> + <input title="nested input title"> + </div> + <div id="childish" style="border: 1px solid black;" title="element with child elements"> + Text in <strong>bold</strong>. + </div> + </div> + + <button id="blurs-on-click" title="button title text">click me to focus something else</button> + <input id="focus-on-me"> + + <div class="group"> + <p>Play around with focusing and hovering of form elements.</p> + <form> + <div> + <label for="first">First Name:</label> + <input id="first" title="Your first name is optional"> + </div> + <div> + <label for="last">Last Name:</label> + <input id="last" title="Your last name is optional"> + </div> + </form> + + <p>Some inputs nested inside labels:</p> + <div id="nested-input"> + <label title="test"><input type="checkbox">This is a test</label> + <label title="test2"><input type="checkbox">This is a test</label> + <label><input type="checkbox" title="test3">This is a test</label> + <label><input type="checkbox" title="test4">This is a test</label> + </div> + + <p>Some button widgets:</p> + <div id="buttons"> + <button id="button1" title="Button Tooltip">Button Label</button> + <button id="button2" title="Icon Button">Button with Icon</button> + <button id="button3">Icon Only Button 1</button> + <button id="button4">Icon Only Button 2</button> + </div> + </div> + + <div class="group"> + <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div> + <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div> + </div> +</div> + +<div style="height: 2000px"></div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/visual.css b/apps/it/static/js/ui/tests/visual/visual.css new file mode 100644 index 0000000..b61fc0e --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/visual.css @@ -0,0 +1,3 @@ +body { font-size: 62.5%; } +#draggable, #resizable { width: 100px; height: 100px; background: #abc; } +#droppable { width: 100px; height: 100px; background: #cde; } |