mirror of
https://github.com/tuxis-ie/nsedit.git
synced 2025-06-08 00:57:01 +03:00
Squashed 'jquery-ui/' content from commit 77ff328
git-subtree-dir: jquery-ui git-subtree-split: 77ff328cbe8a662f52178020d202dc1bfb560fd8
This commit is contained in:
Mark Schouten
commit
d21ea7816e
629 changed files with 341074 additions and 0 deletions
95
tests/visual/accordion/icons.html
Normal file
95
tests/visual/accordion/icons.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../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>
|
||||
52
tests/visual/addClass/queue.html
Normal file
52
tests/visual/addClass/queue.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../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>
|
||||
94
tests/visual/button/button.html
Normal file
94
tests/visual/button/button.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../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>
|
||||
26
tests/visual/button/performance.html
Normal file
26
tests/visual/button/performance.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../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>
|
||||
86
tests/visual/compound/accordion_tabs.html
Normal file
86
tests/visual/compound/accordion_tabs.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/accordion.js"></script>
|
||||
<script src="../../../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>
|
||||
32
tests/visual/compound/datepicker_dialog.html
Normal file
32
tests/visual/compound/datepicker_dialog.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../ui/resizable.js"></script>
|
||||
<script src="../../../ui/draggable.js"></script>
|
||||
<script src="../../../ui/button.js"></script>
|
||||
<script src="../../../ui/datepicker.js"></script>
|
||||
<script src="../../../ui/dialog.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#datepicker" ).datepicker();
|
||||
$( "#dialog" ).dialog();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="dialog">
|
||||
<input id="datepicker">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
110
tests/visual/compound/dialog_widgets.html
Normal file
110
tests/visual/compound/dialog_widgets.html
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<!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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../ui/menu.js"></script>
|
||||
<script src="../../../ui/resizable.js"></script>
|
||||
<script src="../../../ui/draggable.js"></script>
|
||||
<script src="../../../ui/accordion.js"></script>
|
||||
<script src="../../../ui/autocomplete.js"></script>
|
||||
<script src="../../../ui/button.js"></script>
|
||||
<script src="../../../ui/datepicker.js"></script>
|
||||
<script src="../../../ui/dialog.js"></script>
|
||||
<script src="../../../ui/progressbar.js"></script>
|
||||
<script src="../../../ui/slider.js"></script>
|
||||
<script src="../../../ui/tabs.js"></script>
|
||||
<script src="../../../ui/tooltip.js"></script>
|
||||
<script src="../../../ui/selectmenu.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#dialog" ).dialog();
|
||||
$( "[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();
|
||||
$( '#select' ).selectmenu();
|
||||
$( "#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>
|
||||
<select id="select">
|
||||
<option>Slower</option>
|
||||
<option>Slow</option>
|
||||
<option>Medium</option>
|
||||
<option>Fast</option>
|
||||
<option>Faster</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="dialog2">
|
||||
Yay, another dialog.
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
65
tests/visual/compound/draggable_accordion.html
Normal file
65
tests/visual/compound/draggable_accordion.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/accordion.js"></script>
|
||||
<script src="../../../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>
|
||||
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/accordion.js"></script>
|
||||
<script src="../../../ui/draggable.js"></script>
|
||||
<script src="../../../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>
|
||||
51
tests/visual/compound/draggable_resizable.html
Normal file
51
tests/visual/compound/draggable_resizable.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Compound Visual Test: Draggable and Resizable block element</title>
|
||||
<link rel="stylesheet" href="../visual.css">
|
||||
<link rel="stylesheet" href="../../../themes/base/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/draggable.js"></script>
|
||||
<script src="../../../ui/resizable.js"></script>
|
||||
<style>
|
||||
.draggable {
|
||||
margin: 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.absolute {
|
||||
color: red;
|
||||
position: absolute !important;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( ".draggable" )
|
||||
.addClass( "ui-widget ui-widget-header ui-corner-all" )
|
||||
.draggable({
|
||||
revert: "invalid"
|
||||
})
|
||||
.resizable({
|
||||
minHeight: 13,
|
||||
handles: "s"
|
||||
});
|
||||
$( ".draggable:last" ).addClass( "absolute" );
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>WHAT: Three draggable and resizable elements, with only a bottom handle. Last one (red color) is absolutely positioned.</p>
|
||||
<p>EXPECTED: Each element can be dragged and resized. The first two stay with their relative positioning (induced by draggable). The last one can be resized despite the absolute positioning.</p>
|
||||
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
116
tests/visual/compound/sortable_accordion_sortable_tabs.html
Normal file
116
tests/visual/compound/sortable_accordion_sortable_tabs.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/sortable.js"></script>
|
||||
<script src="../../../ui/accordion.js"></script>
|
||||
<script src="../../../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>
|
||||
53
tests/visual/compound/tabs_selectmenu.html
Normal file
53
tests/visual/compound/tabs_selectmenu.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Compound Visual Test : Selectmenu in Tabs</title>
|
||||
<link rel="stylesheet" href="../visual.css">
|
||||
<link rel="stylesheet" href="../../../themes/base/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../ui/menu.js"></script>
|
||||
<script src="../../../ui/selectmenu.js"></script>
|
||||
<script src="../../../ui/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#tabs" ).tabs();
|
||||
$( "select" ).selectmenu();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
select { width: 200px; }
|
||||
</style>
|
||||
</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">
|
||||
<select>
|
||||
<option>Slower</option>
|
||||
<option>Slow</option>
|
||||
<option>Medium</option>
|
||||
<option>Fast</option>
|
||||
<option>Faster</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="tabs-2">
|
||||
<select>
|
||||
<option>Slower</option>
|
||||
<option>Slow</option>
|
||||
<option>Medium</option>
|
||||
<option>Fast</option>
|
||||
<option>Faster</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
73
tests/visual/compound/tabs_tabs.html
Normal file
73
tests/visual/compound/tabs_tabs.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/accordion.js"></script>
|
||||
<script src="../../../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>
|
||||
37
tests/visual/compound/tabs_tooltips.html
Normal file
37
tests/visual/compound/tabs_tooltips.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../ui/tooltip.js"></script>
|
||||
<script src="../../../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>
|
||||
53
tests/visual/dialog/animated.html
Normal file
53
tests/visual/dialog/animated.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/draggable.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../ui/resizable.js"></script>
|
||||
<script src="../../../ui/button.js"></script>
|
||||
<script src="../../../ui/dialog.js"></script>
|
||||
<script src="../../../ui/effect.js"></script>
|
||||
<script src="../../../ui/effect-blind.js"></script>
|
||||
<script src="../../../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>
|
||||
125
tests/visual/dialog/complex-dialogs.html
Normal file
125
tests/visual/dialog/complex-dialogs.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/draggable.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../ui/resizable.js"></script>
|
||||
<script src="../../../ui/button.js"></script>
|
||||
<script src="../../../ui/dialog.js"></script>
|
||||
|
||||
<!-- stuff needed to make things complex -->
|
||||
<script src="../../../ui/datepicker.js"></script>
|
||||
<script src="../../../ui/menu.js"></script>
|
||||
<script src="../../../ui/autocomplete.js"></script>
|
||||
<script src="../../../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>
|
||||
70
tests/visual/dialog/form.html
Normal file
70
tests/visual/dialog/form.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/draggable.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../ui/resizable.js"></script>
|
||||
<script src="../../../ui/button.js"></script>
|
||||
<script src="../../../ui/dialog.js"></script>
|
||||
<script src="../../../ui/effect.js"></script>
|
||||
<script src="../../../ui/effect-blind.js"></script>
|
||||
<script src="../../../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>
|
||||
73
tests/visual/dialog/performance.html
Normal file
73
tests/visual/dialog/performance.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/draggable.js"></script>
|
||||
<script src="../../../ui/resizable.js"></script>
|
||||
<script src="../../../ui/button.js"></script>
|
||||
<script src="../../../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>
|
||||
62
tests/visual/dialog/stacking.html
Normal file
62
tests/visual/dialog/stacking.html
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Dialog Visual Test</title>
|
||||
<link rel="stylesheet" href="../../../themes/base/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/draggable.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../ui/resizable.js"></script>
|
||||
<script src="../../../ui/button.js"></script>
|
||||
<script src="../../../ui/dialog.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
var iframeDialog = $( "#dialog-iframe" ).dialog({
|
||||
position: {
|
||||
my: "right-90 center"
|
||||
},
|
||||
height: 400
|
||||
}),
|
||||
|
||||
scrollingDialog = $( "#dialog-scrolling" ).dialog({
|
||||
maxHeight: 200,
|
||||
position: {
|
||||
my: "left+90 center"
|
||||
}
|
||||
}),
|
||||
|
||||
otherDialog = $( "#dialog-other" ).dialog({
|
||||
width: 200,
|
||||
height: 150
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>WHAT: Two dialogs, one embedding an iframe, one having just scrollable content.</p>
|
||||
<p>EXPECTED: When focusing on one or the other dialog, it shouldn't affect how the content is displayed on the other dialog. It shouldn't reload the iframe or reset the scroll.</p>
|
||||
|
||||
|
||||
<div id="dialog-iframe" title="Dialog that embeds an iframe">
|
||||
<iframe src="animated.html" height="400"></iframe>
|
||||
</div>
|
||||
|
||||
<div id="dialog-scrolling" title="Dialog with scroll">
|
||||
<p style="height:600px;background:#eee">a bunch of content</p>
|
||||
</div>
|
||||
|
||||
<div id="dialog-other" title="placeholder">Just another dialog to test stacking</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
38
tests/visual/draggable/replaced.html
Normal file
38
tests/visual/draggable/replaced.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Draggable Visual Test</title>
|
||||
<link rel="stylesheet" href="../../../themes/base/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/draggable.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" )
|
||||
.draggable()
|
||||
.bind( "mousedown", function() {
|
||||
$( this ).html( "<div>replaced</div>" );
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#draggable {
|
||||
background: green;
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>WHAT: A draggable, whose content is replaced onmousedown.</p>
|
||||
<p>EXPECTED: In IE8, the draggable can actually be dragged.</p>
|
||||
|
||||
<div id="draggable"><div>content</div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
217
tests/visual/effects/all.html
Normal file
217
tests/visual/effects/all.html
Normal file
|
|
@ -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="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/effect.js"></script>
|
||||
<script src="../../../ui/effect-blind.js"></script>
|
||||
<script src="../../../ui/effect-bounce.js"></script>
|
||||
<script src="../../../ui/effect-clip.js"></script>
|
||||
<script src="../../../ui/effect-drop.js"></script>
|
||||
<script src="../../../ui/effect-explode.js"></script>
|
||||
<script src="../../../ui/effect-fade.js"></script>
|
||||
<script src="../../../ui/effect-fold.js"></script>
|
||||
<script src="../../../ui/effect-highlight.js"></script>
|
||||
<script src="../../../ui/effect-pulsate.js"></script>
|
||||
<script src="../../../ui/effect-scale.js"></script>
|
||||
<script src="../../../ui/effect-shake.js"></script>
|
||||
<script src="../../../ui/effect-slide.js"></script>
|
||||
<script src="../../../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>
|
||||
92
tests/visual/effects/clip.html
Normal file
92
tests/visual/effects/clip.html
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<!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="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/effect.js"></script>
|
||||
<script src="../../../ui/effect-clip.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
var target = $( ".target" ),
|
||||
duration = 2000;
|
||||
|
||||
$( ".toggle" ).click(function( event ) {
|
||||
event.preventDefault();
|
||||
target.toggle( "clip", {
|
||||
direction: "horizontal"
|
||||
}, duration );
|
||||
});
|
||||
|
||||
$( ".effect-toggle" ).click(function( event ) {
|
||||
event.preventDefault();
|
||||
target.effect( "clip", {
|
||||
direction: "vertical",
|
||||
mode: "toggle"
|
||||
}, duration );
|
||||
});
|
||||
|
||||
$( ".effect-default" ).click(function( event ) {
|
||||
event.preventDefault();
|
||||
target.effect( "clip", {
|
||||
direction: "vertical"
|
||||
}, duration );
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.clipped {
|
||||
clip: rect(10px, 300px, 100px, 20px);
|
||||
position: absolute;
|
||||
}
|
||||
.container {
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
background: lightblue;
|
||||
}
|
||||
.column {
|
||||
position: relative;
|
||||
top: 40px;
|
||||
float: left;
|
||||
width: 600px;
|
||||
}
|
||||
.margin {
|
||||
margin: 10px 20px 30px 40px;
|
||||
}
|
||||
.target {
|
||||
border: 5px solid red;
|
||||
}
|
||||
p.target {
|
||||
overflow: hidden;
|
||||
background: lightgreen;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>WHAT: A set of elements with various positions and clips, using the clip effect.</p>
|
||||
<p>EXPECTED: When clicking "Toggle" or "Effect Toggle", to observe the same behavior; All elements should not change position, aside from the expected clip animation. At the end of the animation, the animated elements should hide. Layout (i.e. the position of other elements) should not change until the animated elements are hidden.</p>
|
||||
<p>EXPECTED: Clicking "Toggle" or "Effect Toggle" a second time reverses the animation, first showing all elements at their original dimensions, and restoring them to their original state.</p>
|
||||
<p>EXPECTED: Clicking "Effect Default" should always perform a "hide" animation.</p>
|
||||
<p>EXPECTED: Clicking any of the buttons in quick succession should queue the relevant animations.</p>
|
||||
|
||||
<div class="container">
|
||||
<button class="toggle">Toggle</button>
|
||||
<button class="effect-toggle">Effect Toggle</button>
|
||||
<button class="effect-default">Effect Default</button>
|
||||
<p>Bacon ipsum dolor sit amet chuck cow ground round, ham hock short loin tail jowl sausage flank. Venison andouille turducken sausage. Boudin filet mignon shoulder, prosciutto sirloin tail cow pastrami. Salami jerky flank rump, sirloin spare ribs pork belly. Biltong brisket boudin ground round, venison chicken shankle short ribs meatball corned beef. Swine short ribs shoulder, short loin turducken biltong prosciutto ball tip. Biltong beef bresaola sausage prosciutto spare ribs, short loin swine pork chop cow flank pork turkey shankle.</p>
|
||||
<img class="target clipped" src="../../images/jquery_521x191.png" alt="jQuery Logo">
|
||||
<p>Jerky corned beef short loin fatback jowl tail. Rump spare ribs shoulder pork belly. Sausage cow ground round bacon. Bresaola kielbasa pastrami brisket ham hock. Andouille kielbasa ham, pork beef tenderloin ground round beef ribs flank turkey pancetta tri-tip.</p>
|
||||
<div class="column">
|
||||
<p>Shankle filet mignon ribeye chicken, bacon jowl drumstick frankfurter swine short loin capicola leberkas tenderloin pig. Shankle bacon shank pork loin, shoulder ham drumstick biltong. Shankle ham pastrami ball tip turkey leberkas pork loin ground round. Chicken strip steak venison shoulder biltong ham. Bacon pork loin tenderloin kielbasa, prosciutto sausage leberkas jowl ribeye turducken. Flank short loin venison tenderloin spare ribs boudin, tongue pork chop shank sirloin. Ground round ham pork belly, corned beef jowl strip steak short ribs prosciutto pig bresaola spare ribs.</p>
|
||||
<img class="target" style="margin: 10px 20px 30px 40px;" src="../../images/jquery_521x191.png" alt="jQuery Logo">
|
||||
<p>Pork loin biltong ball tip tail jerky beef ribs prosciutto short loin turducken. Turkey chicken jowl pork loin shank tri-tip swine brisket. Doner prosciutto leberkas venison ground round, short loin capicola hamburger pork bacon. Spare ribs beef pork tenderloin rump shoulder pork belly turducken cow beef ribs pastrami tail flank. Spare ribs tri-tip shank, pork beef ribs ribeye chicken bacon boudin shoulder venison. Sirloin beef ribs boudin, andouille doner tail ball tip biltong prosciutto chicken beef turkey tongue hamburger tri-tip.</p>
|
||||
</div>
|
||||
<p>Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.</p>
|
||||
<p class="target">Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.</p>
|
||||
<p>Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
tests/visual/effects/effects.css
Normal file
49
tests/visual/effects/effects.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
107
tests/visual/effects/effects.js
vendored
Normal file
107
tests/visual/effects/effects.js
vendored
Normal file
|
|
@ -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 );
|
||||
});
|
||||
|
||||
});
|
||||
168
tests/visual/effects/scale.html
Normal file
168
tests/visual/effects/scale.html
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
<!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="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/effect.js"></script>
|
||||
<script src="../../../ui/effect-scale.js"></script>
|
||||
<script src="../../../ui/effect-size.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
var test = $( "#testBox" ),
|
||||
opts = $( ".arg" ),
|
||||
optsRev = $( opts.get().reverse() ),
|
||||
doer = $( "#doAnim" ),
|
||||
current = $( "#current" ),
|
||||
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,
|
||||
newIndex = ( next + len ) % len;
|
||||
|
||||
this.selectedIndex = newIndex;
|
||||
|
||||
if ( newIndex === 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;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
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>
|
||||
</html>
|
||||
99
tests/visual/effects/shake.html
Normal file
99
tests/visual/effects/shake.html
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<!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="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/effect.js"></script>
|
||||
<script src="../../../ui/effect-scale.js"></script>
|
||||
<script src="../../../ui/effect-shake.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#btn" ).click(function() {
|
||||
$( ".shake" ).effect( "shake", {
|
||||
duration: +$( "#duration" ).val(),
|
||||
mode: "toggle"
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#inputbox {
|
||||
background: green;
|
||||
}
|
||||
#selectbox {
|
||||
background: red;
|
||||
}
|
||||
#divbox {
|
||||
background: yellow;
|
||||
}
|
||||
#inputbox_abs {
|
||||
background: orange;
|
||||
position: absolute;
|
||||
top: 500px;
|
||||
left: 300px;
|
||||
}
|
||||
#divbox_abs {
|
||||
background: purple;
|
||||
position: absolute;
|
||||
top: 500px;
|
||||
left: 500px;
|
||||
}
|
||||
div.shake {
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.margin {
|
||||
margin: 3px;
|
||||
}
|
||||
.border {
|
||||
border: 1px solid black;
|
||||
}
|
||||
.padding {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>WHAT: A set of elements with various box-model properties, using the shake effect to toggle.</p>
|
||||
<p>EXPECTED: When clicking "Toggle", all elements should not change dimension nor position, aside from the expected shake animation, which should take the number of milliseconds specified to complete. At the end of the animation, all elements should hide.</p>
|
||||
<p>EXPECTED: Clicking "Toggle" a second time reverses the animation, first showing all elements at their original dimensions, and restoring them to their original state.</p>
|
||||
|
||||
<button id="btn">Toggle</button>
|
||||
<input id="duration" value="1000">
|
||||
<div id="divbox">
|
||||
<div class="shake margin">test</div>
|
||||
<div class="shake border">test</div>
|
||||
<div class="shake padding margin">test</div>
|
||||
</div>
|
||||
<div id="inputbox" class="margin">
|
||||
<div class="shake margin">test</div>
|
||||
<div class="shake margin border">test</div>
|
||||
<div class="shake padding">test</div>
|
||||
<input type="text" class="shake">
|
||||
</div>
|
||||
<div id="selectbox">
|
||||
<div class="shake">test</div>
|
||||
<div class="shake">test</div>
|
||||
<div class="shake">test</div>
|
||||
<select class="shake">
|
||||
<option value="a">a</option>
|
||||
<option value="abcdef">abcdef</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="inputbox_abs" class="margin">
|
||||
<div class="shake margin">test</div>
|
||||
<div class="shake margin border">test</div>
|
||||
<div class="shake padding">test</div>
|
||||
<input type="text" class="shake">
|
||||
</div>
|
||||
<div id="divbox_abs" class="margin">
|
||||
<div class="shake margin">test</div>
|
||||
<div class="shake margin border">test</div>
|
||||
<div class="shake padding">test</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
103
tests/visual/index.html
Normal file
103
tests/visual/index.html
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Visual Tests</title>
|
||||
|
||||
<link rel="stylesheet" href="../../themes/base/core.css">
|
||||
<link rel="stylesheet" href="../../themes/base/theme.css">
|
||||
<link rel="stylesheet" href="../index.css">
|
||||
<script src="../../external/jquery/jquery.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/animated.html">Animations</a></li>
|
||||
<li><a href="dialog/complex-dialogs.html">Nested dialogs</a></li>
|
||||
<li><a href="dialog/form.html">Forms in dialogs</a></li>
|
||||
<li><a href="dialog/performance.html">Performance</a></li>
|
||||
<li><a href="dialog/stacking.html">Overlapping dialogs</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Draggable</h2>
|
||||
<ul>
|
||||
<li><a href="draggable/replaced.html">Replaced Content On Mousedown</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>
|
||||
<li><a href="effects/shake.html">Shake</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>Selectmenu</h2>
|
||||
<ul>
|
||||
<li><a href="selectmenu/selectmenu.html">General</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Slider</h2>
|
||||
<ul>
|
||||
<li><a href="slider/range_slider.html">Range slider</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/draggable_resizable.html">Draggable Resizable</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>
|
||||
304
tests/visual/menu/menu.html
Normal file
304
tests/visual/menu/menu.html
Normal file
|
|
@ -0,0 +1,304 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Menu Visual Test: Default</title>
|
||||
<link rel="stylesheet" href="../../../themes/base/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../ui/menu.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
function logger( event, ui ) {
|
||||
$( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
|
||||
}
|
||||
|
||||
$( "#menu1, #menu3, .menu4" ).menu({
|
||||
select: logger
|
||||
});
|
||||
|
||||
$( "#menu2" ).menu({
|
||||
position: {
|
||||
my: "left top",
|
||||
at: "left+10 top-20"
|
||||
},
|
||||
select: logger
|
||||
});
|
||||
|
||||
$( "#menu5" ).menu({
|
||||
menus: "div",
|
||||
select: logger
|
||||
});
|
||||
|
||||
$( "#menu6" ).menu({
|
||||
menus: ".menuElement",
|
||||
select: logger,
|
||||
icon: "ui-icon-carat-1-s"
|
||||
});
|
||||
|
||||
$( "#menu7" ).menu({
|
||||
items: "> :not('.ui-menu-group')",
|
||||
select: logger
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body { font-size:62.5%; }
|
||||
.ui-menu { width: 200px; margin-bottom: 2em; }
|
||||
.menu2-container { width: 220px; }
|
||||
.menu4 { height: 225px; 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>Aberdeen</li>
|
||||
<li>Ada</li>
|
||||
<li>Adamsville</li>
|
||||
<li>Addyston</li>
|
||||
<li>Delphi</li>
|
||||
<li>Saarland</li>
|
||||
<li>Salzburg</li>
|
||||
</ul>
|
||||
|
||||
<h2>Inline with disabled items and submenus</h2>
|
||||
<ul id="menu2">
|
||||
<li class="ui-state-disabled">Aberdeen</li>
|
||||
<li>Ada</li>
|
||||
<li>Adamsville</li>
|
||||
<li>Addyston</li>
|
||||
<li>Delphi
|
||||
<ul>
|
||||
<li class="ui-state-disabled">Ada</li>
|
||||
<li>Saarland</li>
|
||||
<li>Salzburg</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Saarland</li>
|
||||
<li>Salzburg
|
||||
<ul>
|
||||
<li>Delphi
|
||||
<ul>
|
||||
<li>Ada</li>
|
||||
<li>Saarland</li>
|
||||
<li>Salzburg</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Delphi
|
||||
<ul>
|
||||
<li>Ada</li>
|
||||
<li>Saarland</li>
|
||||
<li>Salzburg</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="ui-state-disabled">Perch</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="ui-state-disabled">Amesville</li>
|
||||
</ul>
|
||||
|
||||
<h2>Menu with icons</h2>
|
||||
<ul id="menu3">
|
||||
<li><span class="ui-icon ui-icon-print"></span>Aberdeen</li>
|
||||
<li class="ui-state-disabled"><span class="ui-icon ui-icon-scissors"></span>Ada</li>
|
||||
<li>Adamsville</li>
|
||||
<li><span class="ui-icon ui-icon-wrench"></span>Addyston</li>
|
||||
<li class="ui-state-disabled">Delphi
|
||||
<ul>
|
||||
<li>Ada</li>
|
||||
<li><span class="ui-icon ui-icon-wrench"></span>Saarland</li>
|
||||
<li>Salzburg</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Saarland</li>
|
||||
<li>
|
||||
<span class="ui-icon ui-icon-print"></span>Salzburg
|
||||
<ul>
|
||||
<li>
|
||||
<span class="ui-icon ui-icon-wrench"></span>Delphi
|
||||
<ul>
|
||||
<li>Ada</li>
|
||||
<li>Saarland</li>
|
||||
<li>Salzburg</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Delphi
|
||||
<ul>
|
||||
<li><span class="ui-icon ui-icon-wrench"></span>Ada</li>
|
||||
<li><span class="ui-icon ui-icon-wrench"></span>Saarland</li>
|
||||
<li><span class="ui-icon ui-icon-wrench"></span>Salzburg</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Perch</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour</h2>
|
||||
<ul class="menu4">
|
||||
<li>Aberdeen</li>
|
||||
<li>Ada</li>
|
||||
<li>Adamsville</li>
|
||||
<li>Addyston</li>
|
||||
<li>Adelphi</li>
|
||||
<li>Adena</li>
|
||||
<li>Adrian</li>
|
||||
<li>Akron</li>
|
||||
<li>Albany</li>
|
||||
<li>Alexandria</li>
|
||||
<li>Alger</li>
|
||||
<li>Alledonia</li>
|
||||
<li>Alliance</li>
|
||||
<li>Alpha</li>
|
||||
<li>Alvada</li>
|
||||
<li>Alvordton</li>
|
||||
<li>Amanda</li>
|
||||
<li>Amelia</li>
|
||||
<li>Amesville</li>
|
||||
<li>Aberdeen</li>
|
||||
<li>Ada</li>
|
||||
<li>Adamsville</li>
|
||||
<li>Addyston</li>
|
||||
<li>Adelphi</li>
|
||||
<li>Adena</li>
|
||||
<li>Adrian</li>
|
||||
<li>Akron</li>
|
||||
<li>Albany</li>
|
||||
<li>Alexandria</li>
|
||||
<li>Alger</li>
|
||||
<li>Alledonia</li>
|
||||
<li>Alliance</li>
|
||||
<li>Alpha</li>
|
||||
<li>Alvada</li>
|
||||
<li>Alvordton</li>
|
||||
<li>Amanda</li>
|
||||
<li>Amelia</li>
|
||||
<li>Amesville</li>
|
||||
</ul>
|
||||
|
||||
<h2>Menu with custom markup</h2>
|
||||
<div id="menu5">
|
||||
<blockquote>Aberdeen</blockquote>
|
||||
<blockquote>Ada</blockquote>
|
||||
<blockquote class="ui-state-disabled">Adamsville</blockquote>
|
||||
<blockquote>Addyston</blockquote>
|
||||
<blockquote>Delphi
|
||||
<div>
|
||||
<blockquote>Ada</blockquote>
|
||||
<blockquote>Saarland</blockquote>
|
||||
<blockquote>Salzburg</blockquote>
|
||||
</div>
|
||||
</blockquote>
|
||||
<blockquote>Saarland</blockquote>
|
||||
<blockquote>Salzburg
|
||||
<div>
|
||||
<blockquote>Delphi
|
||||
<div>
|
||||
<blockquote>Ada</blockquote>
|
||||
<blockquote>Saarland</blockquote>
|
||||
<blockquote>Salzburg</blockquote>
|
||||
</div>
|
||||
</blockquote>
|
||||
<blockquote>Delphi
|
||||
<div>
|
||||
<blockquote>Ada</blockquote>
|
||||
<blockquote>Saarland</blockquote>
|
||||
<blockquote>Salzburg</blockquote>
|
||||
</div>
|
||||
</blockquote>
|
||||
<blockquote>Perch</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">
|
||||
<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>
|
||||
</div>
|
||||
<div class="address-item">
|
||||
<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>
|
||||
</div>
|
||||
<div class="address-item ui-state-disabled">
|
||||
<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>
|
||||
</div>
|
||||
<div class="address-item">
|
||||
<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>
|
||||
</div>
|
||||
<div class="address-item">
|
||||
<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>
|
||||
<div class="menuElement">
|
||||
<div>Ada</div>
|
||||
<div>Saarland</div>
|
||||
<div>Salzburg</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Inline with dividers and group labels</h2>
|
||||
<ul id="menu7">
|
||||
<li class="ui-menu-group"><strong>Group 1</strong></li>
|
||||
<li>Aberdeen</li>
|
||||
<li>Ada</li>
|
||||
<li>Adamsville</li>
|
||||
<li>Addyston</li>
|
||||
<li></li>
|
||||
<li class="ui-menu-group"><strong>Group 2</strong></li>
|
||||
<li>Delphi
|
||||
<ul>
|
||||
<li>Ada</li>
|
||||
<li>Saarland</li>
|
||||
<li>Salzburg</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Saarland</li>
|
||||
<li>---</li>
|
||||
<li class="ui-menu-group"><strong>Group 3</strong></li>
|
||||
<li>Salzburg
|
||||
<ul>
|
||||
<li>Delphi
|
||||
<ul>
|
||||
<li>Ada</li>
|
||||
<li> - </li>
|
||||
<li>Saarland</li>
|
||||
<li>—</li>
|
||||
<li>Salzburg</li>
|
||||
<li>–</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Delphi
|
||||
<ul>
|
||||
<li>Ada</li>
|
||||
<li>Saarland</li>
|
||||
<li>Salzburg</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Perch</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Amesville</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>
|
||||
143
tests/visual/position/position.html
Normal file
143
tests/visual/position/position.html
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Position Visual Test</title>
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/draggable.js"></script>
|
||||
<script src="../../../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>
|
||||
145
tests/visual/position/position_feedback.html
Normal file
145
tests/visual/position/position_feedback.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../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 ).bind( "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>
|
||||
300
tests/visual/selectmenu/selectmenu.html
Normal file
300
tests/visual/selectmenu/selectmenu.html
Normal file
|
|
@ -0,0 +1,300 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Selectmenu Visual Test: Default</title>
|
||||
<link rel="stylesheet" href="../../../themes/base/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../ui/menu.js"></script>
|
||||
<script src="../../../ui/selectmenu.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
var log = $("#log"),
|
||||
index = 0,
|
||||
text;
|
||||
|
||||
function logger( event, ui ) {
|
||||
text = "#" + index++ + " " + event.type.replace("selectmenu","");
|
||||
if ( ui.item ) {
|
||||
text += ": " + ui.item.index + " => " + ui.item.label;
|
||||
}
|
||||
$( "<p>" ).text( text ).prependTo( "#log" );
|
||||
}
|
||||
|
||||
/* events */
|
||||
var eventsSelectmenu = $('#control select').selectmenu({
|
||||
open: logger,
|
||||
close: logger,
|
||||
focus : logger,
|
||||
select: logger,
|
||||
change: logger
|
||||
});
|
||||
eventsSelectmenu.show();
|
||||
|
||||
$("#destroy").click( function() {
|
||||
eventsSelectmenu.selectmenu("destroy");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#refresh_add").click( function() {
|
||||
eventsSelectmenu.append('<option value="fastsound">Speed of light</option>');
|
||||
eventsSelectmenu.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#refresh_selected").click( function() {
|
||||
eventsSelectmenu[0].selectedIndex = 0;
|
||||
eventsSelectmenu.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#refresh").click( function() {
|
||||
eventsSelectmenu.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#open").click( function() {
|
||||
eventsSelectmenu.selectmenu("open");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#close").click( function() {
|
||||
eventsSelectmenu.selectmenu("close");
|
||||
return false;
|
||||
});
|
||||
|
||||
/* disabled */
|
||||
$('#disabled1, #disabled2, #disabled3').selectmenu();
|
||||
var disabled4 = $('#disabled4').selectmenu();
|
||||
|
||||
$("#disable_select").bind("click", function() {
|
||||
if (disable_select) {
|
||||
disable_select = false;
|
||||
disabled4.selectmenu("disable");
|
||||
} else {
|
||||
disable_select = true;
|
||||
disabled4.removeAttr("disabled");
|
||||
}
|
||||
disabled4.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#disable_option").bind("click", function() {
|
||||
if (disable_option) {
|
||||
disable_option = false;
|
||||
disabled4.find("option:eq(0)").attr("disabled", "disabled");
|
||||
} else {
|
||||
disable_option = true;
|
||||
disabled4.find("option:eq(0)").removeAttr("disabled");
|
||||
}
|
||||
disabled4.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#disable_optgroup").bind("click", function() {
|
||||
if (disable_optgroup) {
|
||||
disable_optgroup = false;
|
||||
disabled4.find("optgroup:eq(0)").attr("disabled", "disabled");
|
||||
} else {
|
||||
disable_optgroup = true;
|
||||
disabled4.find("optgroup:eq(0)").removeAttr("disabled");
|
||||
}
|
||||
disabled4.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
/* empty */
|
||||
$(".empty select").selectmenu();
|
||||
|
||||
/* width */
|
||||
$("#width_auto1, #width_auto2").selectmenu();
|
||||
|
||||
$("#width_js1, #width_js2").selectmenu({
|
||||
width: 200
|
||||
});
|
||||
|
||||
var widthMenu = $("#width_menu").selectmenu();
|
||||
widthMenu.selectmenu("menuWidget").addClass("width-menu");
|
||||
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body { font-size:62.5%; }
|
||||
fieldset { border: 0; }
|
||||
label { display: block; }
|
||||
select { width: 200px; }
|
||||
|
||||
.ui-selectmenu-button { display: block; margin-bottom: 1em;}
|
||||
|
||||
/* width */
|
||||
.width-menu { width: 196px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="control">
|
||||
<h2>Event logging tests</h2>
|
||||
<form action="#">
|
||||
<button id="open">Open</button>
|
||||
<button id="close">Close</button>
|
||||
<button id="refresh_add">Add item</button>
|
||||
<button id="refresh_selected">Change to first item</button>
|
||||
<button id="refresh">Refresh</button>
|
||||
<button id="destroy">Destroy</button>
|
||||
<fieldset>
|
||||
<select>
|
||||
<option value="Slower">Slower</option>
|
||||
<option value="Slow">Slow</option>
|
||||
<option value="Medium" selected="selected">Medium</option>
|
||||
<option value="Fast">Fast</option>
|
||||
<option value="Faster">Faster</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form action="#">
|
||||
<h2>Disabled tests</h2>
|
||||
<fieldset>
|
||||
<label for="disabled1">Disabled select</label>
|
||||
<select disabled="disabled" name="disabled1" id="disabled1">
|
||||
<option value="Slower">Slower</option>
|
||||
<option value="Slow">Slow</option>
|
||||
<option value="Medium" selected="selected">Medium</option>
|
||||
<option value="Fast">Fast</option>
|
||||
<option value="Faster">Faster</option>
|
||||
</select>
|
||||
|
||||
<label for="disabled2">Disabled options</label>
|
||||
<select name="disabled2" id="disabled2">
|
||||
<option value="1" disabled="disabled">1</option>
|
||||
<option value="2" selected="selected">2</option>
|
||||
<option value="3">3</option>
|
||||
<option disabled="disabled" value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option disabled="disabled" value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
<option disabled="disabled" value="11">11</option>
|
||||
<option value="12">12</option>
|
||||
<option value="13">13</option>
|
||||
<option disabled="disabled" value="14">14</option>
|
||||
<option disabled="disabled" value="15">15</option>
|
||||
<option value="16">16</option>
|
||||
<option value="17">17</option>
|
||||
<option value="18">18</option>
|
||||
<option value="19">19</option>
|
||||
</select>
|
||||
|
||||
<label for="disabled3">Disabled optgroup</label>
|
||||
<select name="disabled3" id="disabled3">
|
||||
<optgroup disabled="disabled" label="Scripts">
|
||||
<option value="jquery">jQuery.js</option>
|
||||
<option value="jqueryui">ui.jQuery.js</option>
|
||||
</optgroup>
|
||||
<optgroup label="Other files">
|
||||
<option value="somefile">Some unknown file</option>
|
||||
<option value="someotherfile">Some other file</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
|
||||
<label for="disabled4">Disable specific element and refresh selectmenu on button click</label>
|
||||
<select name="disabled4" id="disabled4">
|
||||
<optgroup label="Scripts">
|
||||
<option value="jquery">jQuery.js</option>
|
||||
<option value="jqueryui">ui.jQuery.js</option>
|
||||
</optgroup>
|
||||
<optgroup label="Other files">
|
||||
<option value="somefile">Some unknown file</option>
|
||||
<option value="someotherfile">Some other file</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<button id="disable_select">Toggle disable select</button>
|
||||
<button id="disable_option">Toggle disable option</button>
|
||||
<button id="disable_optgroup">Toggle disable optgroup</button>
|
||||
</fieldset>
|
||||
|
||||
<h2>Empty tests</h2>
|
||||
<fieldset class="empty">
|
||||
<label for="empty1">Select with no option elements</label>
|
||||
<select name="empty1" id="empty1"></select>
|
||||
|
||||
<label for="empty2">Select with one empty option element</label>
|
||||
<select name="empty2" id="empty2">
|
||||
<option value="" label="empty"></option>
|
||||
</select>
|
||||
|
||||
<label for="empty3">Select with some empty option elements</label>
|
||||
<select name="empty3" id="empty3">
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected="selected">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="" label="empty"></option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="" label="empty"></option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
|
||||
<label for="empty4">Select with empty optgroup</label>
|
||||
<select id="empty4" name="empty4" class="empty4">
|
||||
<optgroup label="Scripts"></optgroup>
|
||||
<optgroup label="Other files">
|
||||
<option value="somefile">Some unknown file</option>
|
||||
<option value="someotherfile">Some other file</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
<h2>Width tests</h2>
|
||||
<fieldset>
|
||||
<label for="width_auto1">Width auto</label>
|
||||
<select name="width_auto1" id="width_auto1" style="width: auto;">
|
||||
<option>Width test 1</option>
|
||||
<option>Width test 2</option>
|
||||
<option>Width test 3</option>
|
||||
</select>
|
||||
|
||||
<label for="width_auto2">Width auto with long option</label>
|
||||
<select name="width_auto2" id="width_auto2" style="width: auto;">
|
||||
<option>Width test 1</option>
|
||||
<option>Width test 2</option>
|
||||
<option>Width test 3 Width test 3 Width test 3</option>
|
||||
</select>
|
||||
|
||||
<label for="width_js1">Width set by JS</label>
|
||||
<select name="width_js1" id="width_js1">
|
||||
<option>Width test 1</option>
|
||||
<option>Width test 2</option>
|
||||
<option>Width test 3</option>
|
||||
</select>
|
||||
|
||||
<label for="width_js2">Width set by JS with long option</label>
|
||||
<select name="width_js2" id="width_js2">
|
||||
<option>Width test 1</option>
|
||||
<option>Width test 2</option>
|
||||
<option>Width test 3 Width test 3 Width test 3</option>
|
||||
</select>
|
||||
|
||||
<label for="width_menu">Width set by JS with long option</label>
|
||||
<select name="width_menu" id="width_menu">
|
||||
<option>Width test 1</option>
|
||||
<option>Width test 2</option>
|
||||
<option>Width test 3 Width test 3 Width test 3</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<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>
|
||||
47
tests/visual/slider/range_slider.html
Normal file
47
tests/visual/slider/range_slider.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>jQuery UI Slider - Range slider</title>
|
||||
<link rel="stylesheet" href="../../../themes/base/all.css">
|
||||
<style>
|
||||
#wrapper {
|
||||
font-family: Arial;
|
||||
width: 500px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/slider.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<h1>Range Slider</h1>
|
||||
<h3>When set both values of range slider to the maximum, slider should not lock</h3>
|
||||
<div id="slider"></div>
|
||||
<br>
|
||||
<button id="set-max-values">set values to max</button>
|
||||
<button id="set-min-values">set values to min</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var el = $( "#slider" ).slider({
|
||||
range: true,
|
||||
min: 0,
|
||||
max: 100,
|
||||
values: [ 0, 50 ]
|
||||
});
|
||||
|
||||
$( "#set-max-values" ).on( "click", function() {
|
||||
el.slider( "option", { values: [ 100, 100 ] } );
|
||||
});
|
||||
|
||||
$( "#set-min-values" ).on( "click", function() {
|
||||
el.slider( "option", { values: [ 0, 0 ] } );
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
525
tests/visual/theme.html
Normal file
525
tests/visual/theme.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../external/jquery/jquery.js"></script>
|
||||
<script src="../../ui/core.js"></script>
|
||||
<script src="../../ui/widget.js"></script>
|
||||
<script src="../../ui/mouse.js"></script>
|
||||
<script src="../../ui/position.js"></script>
|
||||
<script src="../../ui/accordion.js"></script>
|
||||
<script src="../../ui/autocomplete.js"></script>
|
||||
<script src="../../ui/button.js"></script>
|
||||
<script src="../../ui/datepicker.js"></script>
|
||||
<script src="../../ui/dialog.js"></script>
|
||||
<script src="../../ui/draggable.js"></script>
|
||||
<script src="../../ui/droppable.js"></script>
|
||||
<script src="../../ui/progressbar.js"></script>
|
||||
<script src="../../ui/resizable.js"></script>
|
||||
<script src="../../ui/selectable.js"></script>
|
||||
<script src="../../ui/slider.js"></script>
|
||||
<script src="../../ui/sortable.js"></script>
|
||||
<script src="../../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>
|
||||
73
tests/visual/tooltip/animations.html
Normal file
73
tests/visual/tooltip/animations.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../ui/tooltip.js"></script>
|
||||
<script src="../../../ui/effect.js"></script>
|
||||
<script src="../../../ui/effect-blind.js"></script>
|
||||
<script src="../../../ui/effect-bounce.js"></script>
|
||||
<script src="../../../ui/effect-drop.js"></script>
|
||||
<script src="../../../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>
|
||||
206
tests/visual/tooltip/tooltip.html
Normal file
206
tests/visual/tooltip/tooltip.html
Normal file
|
|
@ -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/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../ui/button.js"></script>
|
||||
<script src="../../../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>
|
||||
3
tests/visual/visual.css
Normal file
3
tests/visual/visual.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
body { font-size: 62.5%; }
|
||||
#draggable, #resizable { width: 100px; height: 100px; background: #abc; }
|
||||
#droppable { width: 100px; height: 100px; background: #cde; }
|
||||
Loading…
Add table
Add a link
Reference in a new issue