diff options
Diffstat (limited to 'apps/it/static/js/ui/tests/visual/compound')
8 files changed, 616 insertions, 0 deletions
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> |