mirror of
https://github.com/tuxis-ie/nsedit.git
synced 2025-06-07 00:47:00 +03:00
Merge commit 'd32092c1f0' as 'jquery-ui'
This commit is contained in:
Mark Schouten
commit
b23131fdc2
717 changed files with 518330 additions and 0 deletions
90
jquery-ui/tests/visual/accordion/icons.html
Normal file
90
jquery-ui/tests/visual/accordion/icons.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js">
|
||||
$( "#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>
|
||||
49
jquery-ui/tests/visual/addClass/queue.html
Normal file
49
jquery-ui/tests/visual/addClass/queue.html
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>addClass Visual Test : Queue</title>
|
||||
<link rel="stylesheet" href="../../../themes/base/all.css">
|
||||
<style>
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: #000;
|
||||
}
|
||||
.red {
|
||||
background-color: #f00;
|
||||
}
|
||||
.green {
|
||||
background-color: #0f0;
|
||||
}
|
||||
.blue {
|
||||
background-color: #00f;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="effect" data-composite="true">
|
||||
$( "#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>
|
||||
65
jquery-ui/tests/visual/checkboxradio/checkboxradio.html
Normal file
65
jquery-ui/tests/visual/checkboxradio/checkboxradio.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI - Checkboxes</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 src="../../../ui/checkboxradio.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
var checkboxes = $( "form input" ).checkboxradio();
|
||||
|
||||
$( ".controls input, .controls select" ).on( "change keyup", function() {
|
||||
var option = $( this ).attr( "name" ),
|
||||
value = $( this ).val();
|
||||
|
||||
if ( $( this ).is( "[type=checkbox]" ) ) {
|
||||
value = $( this ).is( ":checked" );
|
||||
}
|
||||
if ( option != "label" || value !== "" ) {
|
||||
checkboxes.checkboxradio( "option", option, value );
|
||||
}
|
||||
});
|
||||
$( ".controls > button" ).click( function() {
|
||||
if ( this.id !== "create" ) {
|
||||
checkboxes.checkboxradio( this.id );
|
||||
} else {
|
||||
checkboxes.checkboxradio();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#format { margin-top: 2em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>
|
||||
Easy way to toggle through various combinations of options and states to make sure none lead to
|
||||
a broken appearence.
|
||||
</h2>
|
||||
<div class="controls">
|
||||
<button id="create">Create</button>
|
||||
<button id="destroy">Destroy</button>
|
||||
<button id="enable">Enable</button>
|
||||
<button id="disable">Disable</button>
|
||||
<button id="refresh">Refresh</button>
|
||||
<input type="checkbox" id="icon" name="icon" checked><label for="icon">Icon</label>
|
||||
<input type="checkbox" id="disabled" name="disabled"><label for="disabled">Disabled</label>
|
||||
<label for="label">Label<input type="text" id="label" name="label"></label>
|
||||
</div>
|
||||
<form>
|
||||
<input type="checkbox" id="checkbox-1">
|
||||
<label for="checkbox-1">Checkbox widget sample</label>
|
||||
<input type="checkbox" id="checkbox-2"><label for="checkbox-2">Checkbox widget sample</label>
|
||||
|
||||
<label for="radio-1">Radio widget sample <input type="radio" id="radio-1" name="radio" checked></label>
|
||||
<input type="radio" id="radio-2" name="radio"><label for="radio-2"><span>boom</span>Radio widget sample 2</label>
|
||||
<button type="reset">Reset</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
80
jquery-ui/tests/visual/compound/accordion_tabs.html
Normal file
80
jquery-ui/tests/visual/compound/accordion_tabs.html
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="tabs accordion" data-composite="true">
|
||||
$( "#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>
|
||||
21
jquery-ui/tests/visual/compound/datepicker_dialog.html
Normal file
21
jquery-ui/tests/visual/compound/datepicker_dialog.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="datepicker dialog" data-composite="true">
|
||||
$( "#datepicker" ).datepicker();
|
||||
$( "#dialog" ).dialog();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="dialog">
|
||||
<input id="datepicker">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
93
jquery-ui/tests/visual/compound/dialog_widgets.html
Normal file
93
jquery-ui/tests/visual/compound/dialog_widgets.html
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js"
|
||||
data-modules="accordion autocomplete button datepicker dialog progressbar slider tabs tooltip selectmenu"
|
||||
data-composite="true">
|
||||
$( "#dialog" ).dialog();
|
||||
$( "[title]" ).tooltip();
|
||||
$( "#accordion" ).accordion();
|
||||
$( "#autocomplete" ).autocomplete({
|
||||
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ]
|
||||
});
|
||||
$( "button" ).button().on( "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>
|
||||
59
jquery-ui/tests/visual/compound/draggable_accordion.html
Normal file
59
jquery-ui/tests/visual/compound/draggable_accordion.html
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<!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">
|
||||
<style>
|
||||
.draggable {
|
||||
width: 10em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="accordion draggable"
|
||||
data-composite="true">
|
||||
$( ".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,100 @@
|
|||
<!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">
|
||||
<style>
|
||||
#main-draggable {
|
||||
width: 300px;
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
}
|
||||
#main-draggable-handle {
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
.draggable {
|
||||
width: 10em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="accordion draggable tabs"
|
||||
data-composite="true">
|
||||
$( ".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>
|
||||
45
jquery-ui/tests/visual/compound/draggable_resizable.html
Normal file
45
jquery-ui/tests/visual/compound/draggable_resizable.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!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">
|
||||
<style>
|
||||
.draggable {
|
||||
margin: 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.absolute {
|
||||
color: red;
|
||||
position: absolute !important;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="draggable resizable"
|
||||
data-composite="true">
|
||||
$( ".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>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="accordion tabs sortable"
|
||||
data-composite="true">
|
||||
$( "#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>
|
||||
45
jquery-ui/tests/visual/compound/tabs_selectmenu.html
Normal file
45
jquery-ui/tests/visual/compound/tabs_selectmenu.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="tabs selectmenu" data-composite="true">
|
||||
$( "#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>
|
||||
67
jquery-ui/tests/visual/compound/tabs_tabs.html
Normal file
67
jquery-ui/tests/visual/compound/tabs_tabs.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="tabs" data-composite="true">
|
||||
$( "#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>
|
||||
30
jquery-ui/tests/visual/compound/tabs_tooltips.html
Normal file
30
jquery-ui/tests/visual/compound/tabs_tooltips.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="tabs tooltip" data-composite="true">
|
||||
$( "#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>
|
||||
40
jquery-ui/tests/visual/dialog/animated.html
Normal file
40
jquery-ui/tests/visual/dialog/animated.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="effect-blind effect-explode">
|
||||
$( "#dialog" ).dialog({
|
||||
autoOpen: false,
|
||||
show: {
|
||||
effect: "blind",
|
||||
duration: 1000
|
||||
},
|
||||
hide: {
|
||||
effect: "explode",
|
||||
duration: 1000
|
||||
},
|
||||
modal: true
|
||||
});
|
||||
|
||||
$( "#opener" ).on( "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>
|
||||
103
jquery-ui/tests/visual/dialog/complex-dialogs.html
Normal file
103
jquery-ui/tests/visual/dialog/complex-dialogs.html
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="datepicker autocomplete tooltip">
|
||||
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" ).on( "click", function() {
|
||||
dialog.dialog( "open" );
|
||||
});
|
||||
|
||||
$( "#open-datepicker" ).on( "click", function() {
|
||||
datepickerDialog.dialog( "open" );
|
||||
});
|
||||
|
||||
$( "#open-autocomplete" ).on( "click", function() {
|
||||
autocompleteDialog.dialog( "open" );
|
||||
});
|
||||
|
||||
$( "#datepicker" ).datepicker();
|
||||
|
||||
$( "#autocomplete" ).autocomplete({
|
||||
source: [
|
||||
"ActionScript",
|
||||
"AppleScript",
|
||||
"Asp",
|
||||
"BASIC",
|
||||
"Scheme"
|
||||
]
|
||||
});
|
||||
|
||||
$( "#destroy-dialog" ).on( "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>
|
||||
57
jquery-ui/tests/visual/dialog/form.html
Normal file
57
jquery-ui/tests/visual/dialog/form.html
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js">
|
||||
$( "#form-dialog, #prompt-dialog" ).dialog({
|
||||
autoOpen: false,
|
||||
modal: true
|
||||
});
|
||||
|
||||
$( "#open-form" ).on( "click", function() {
|
||||
$( "#form-dialog" ).dialog( "open" );
|
||||
});
|
||||
|
||||
$( "#open-prompt" ).on( "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>
|
||||
63
jquery-ui/tests/visual/dialog/performance.html
Normal file
63
jquery-ui/tests/visual/dialog/performance.html
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js">
|
||||
var start,
|
||||
html = new Array( 500 ).join( $.trim( $( "#template" ).html() ) );
|
||||
$( html ).appendTo( "body" );
|
||||
|
||||
start = new Date();
|
||||
$( "#dialog" ).dialog({
|
||||
modal: true,
|
||||
autoOpen: false
|
||||
});
|
||||
$( "<li>Create: " + (new Date() - start) + "ms</li>" ).appendTo( "#log" );
|
||||
|
||||
$( "#opener" ).on( "click", function() {
|
||||
start = new Date();
|
||||
$( "#dialog" ).dialog( "open" );
|
||||
$( "<li>Open: " + (new Date() - 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>
|
||||
46
jquery-ui/tests/visual/dialog/stacking.html
Normal file
46
jquery-ui/tests/visual/dialog/stacking.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js">
|
||||
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>
|
||||
32
jquery-ui/tests/visual/draggable/replaced.html
Normal file
32
jquery-ui/tests/visual/draggable/replaced.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js">
|
||||
$( "#draggable" )
|
||||
.draggable()
|
||||
.on( "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>
|
||||
205
jquery-ui/tests/visual/effects/all.html
Normal file
205
jquery-ui/tests/visual/effects/all.html
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="effects-all" data-composite="true">
|
||||
require( ["./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>
|
||||
90
jquery-ui/tests/visual/effects/clip.html
Normal file
90
jquery-ui/tests/visual/effects/clip.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="effect effect-clip"
|
||||
data-composite="true">
|
||||
var target = $( ".target" ),
|
||||
duration = 2000;
|
||||
|
||||
$( ".toggle" ).on( "click", function( event ) {
|
||||
event.preventDefault();
|
||||
target.toggle( "clip", {
|
||||
direction: "horizontal"
|
||||
}, duration );
|
||||
});
|
||||
|
||||
$( ".effect-toggle" ).on( "click", function( event ) {
|
||||
event.preventDefault();
|
||||
target.effect( "clip", {
|
||||
direction: "vertical",
|
||||
mode: "toggle"
|
||||
}, duration );
|
||||
});
|
||||
|
||||
$( ".effect-default" ).on( "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>
|
||||
<p>EXPECTED CANTFIX: In IE8, the clip animation jumps due to a bug that causes .css('clip') to return undefined unless the clip property is an inline style.</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 margin" 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
jquery-ui/tests/visual/effects/effects.css
Normal file
49
jquery-ui/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;
|
||||
}
|
||||
104
jquery-ui/tests/visual/effects/effects.js
vendored
Normal file
104
jquery-ui/tests/visual/effects/effects.js
vendored
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
var duration = 1000,
|
||||
wait = 500;
|
||||
|
||||
function effect( elem, name, options ) {
|
||||
$.extend( options, {
|
||||
easing: "easeOutQuint"
|
||||
} );
|
||||
|
||||
$( elem ).on( "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" ).on( "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", {} );
|
||||
effect( "#scale", "scale", {} );
|
||||
effect( "#size", "size", {} );
|
||||
$( "#sizeToggle" ).on( "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" ).on( "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" ).on( "click", function() {
|
||||
$( this )
|
||||
.addClass( "current" )
|
||||
.effect( "transfer", { to: "div:eq(0)" }, 1000, function() {
|
||||
$( this ).removeClass( "current" );
|
||||
} );
|
||||
} );
|
||||
|
||||
$( "#addClass" ).on( "click", function() {
|
||||
$( this ).addClass( "current", duration, function() {
|
||||
$( this ).removeClass( "current" );
|
||||
} );
|
||||
} );
|
||||
$( "#removeClass" ).on( "click", function() {
|
||||
$( this ).addClass( "current" ).removeClass( "current", duration );
|
||||
} );
|
||||
$( "#toggleClass" ).on( "click", function() {
|
||||
$( this ).toggleClass( "current", duration );
|
||||
} );
|
||||
BIN
jquery-ui/tests/visual/effects/image.png
Normal file
BIN
jquery-ui/tests/visual/effects/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
163
jquery-ui/tests/visual/effects/scale.html
Normal file
163
jquery-ui/tests/visual/effects/scale.html
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects Test Suite</title>
|
||||
<link rel="stylesheet" href="effects.css">
|
||||
<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>
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="effect-scale" data-composite="true">
|
||||
var test = $( "#testBox" ),
|
||||
opts = $( ".arg" ),
|
||||
optsRev = $( opts.get().reverse() ),
|
||||
doer = $( "#doAnim" ),
|
||||
current = $( "#current" ),
|
||||
total = 1;
|
||||
|
||||
opts.each(function() {
|
||||
total *= this.options.length;
|
||||
});
|
||||
|
||||
opts.on( "change", doAnim );
|
||||
doer.on( "click", doAnim );
|
||||
$( "#cyclePrev" ).on( "click", function() {
|
||||
cycle( -1 );
|
||||
});
|
||||
$( "#cycleNext" ).on( "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>
|
||||
</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>
|
||||
94
jquery-ui/tests/visual/effects/shake.html
Normal file
94
jquery-ui/tests/visual/effects/shake.html
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects Test Suite</title>
|
||||
<link rel="stylesheet" href="effects.css">
|
||||
<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>
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="effect-shake" data-composite="true">
|
||||
$( "#btn" ).on( "click", function() {
|
||||
$( ".shake" ).effect( "shake", {
|
||||
duration: +$( "#duration" ).val(),
|
||||
mode: "toggle"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</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>
|
||||
99
jquery-ui/tests/visual/index.html
Normal file
99
jquery-ui/tests/visual/index.html
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<!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>Checkboxradio</h2>
|
||||
<ul>
|
||||
<li><a href="checkboxradio/checkboxradio.html">General</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/clip.html">Clip</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_selectmenu.html">Selectmenu in Tabs</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
343
jquery-ui/tests/visual/menu/menu.html
Normal file
343
jquery-ui/tests/visual/menu/menu.html
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Menu Visual Test: Default</title>
|
||||
<link rel="stylesheet" href="../../../themes/base/all.css">
|
||||
<style>
|
||||
.ui-menu { width: 250px; margin-bottom: 2em; }
|
||||
.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>
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js">
|
||||
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: ".menuElement",
|
||||
select: logger
|
||||
});
|
||||
|
||||
$( "#menu6" ).menu({
|
||||
menus: ".menuElement",
|
||||
select: logger,
|
||||
icon: "ui-icon-caret-1-s"
|
||||
});
|
||||
|
||||
$( "#menu7" ).menu({
|
||||
items: "> :not('.ui-menu-group')",
|
||||
select: logger
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Default inline menu</h2>
|
||||
<ul id="menu1">
|
||||
<li><div>Aberdeen</div></li>
|
||||
<li><div>Ada</div></li>
|
||||
<li><div>Adamsville</div></li>
|
||||
<li><div>Addyston</div></li>
|
||||
<li><div>Delphi</div></li>
|
||||
<li><div>Saarland</div></li>
|
||||
<li><div>Salzburg</div></li>
|
||||
</ul>
|
||||
|
||||
<h2>Inline with disabled items and submenus</h2>
|
||||
<ul id="menu2">
|
||||
<li class="ui-state-disabled"><div>Aberdeen</div></li>
|
||||
<li><div>Ada</div></li>
|
||||
<li><div>Adamsville</div></li>
|
||||
<li><div>Addyston</div></li>
|
||||
<li>
|
||||
<div>Delphi</div>
|
||||
<ul>
|
||||
<li class="ui-state-disabled"><div>Ada</div></li>
|
||||
<li><div>Saarland</div></li>
|
||||
<li><div>Salzburg</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><div>Saarland</div></li>
|
||||
<li>
|
||||
<div>Salzburg</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div>Delphi</div>
|
||||
<ul>
|
||||
<li><div>Ada</div></li>
|
||||
<li><div>Saarland</div></li>
|
||||
<li><div>Salzburg</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div>Delphi</div>
|
||||
<ul>
|
||||
<li><div>Ada</div></li>
|
||||
<li><div>Saarland</div></li>
|
||||
<li><div>Salzburg</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="ui-state-disabled"><div>Perch</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="ui-state-disabled"><div>Amesville</div></li>
|
||||
</ul>
|
||||
|
||||
<h2>Menu with icons</h2>
|
||||
<ul id="menu3">
|
||||
<li>
|
||||
<div><span class="ui-icon ui-icon-print"></span>Aberdeen</div>
|
||||
</li>
|
||||
<li class="ui-state-disabled">
|
||||
<div><span class="ui-icon ui-icon-scissors"></span>Ada</div>
|
||||
</li>
|
||||
<li><div>Adamsville</div></li>
|
||||
<li>
|
||||
<div><span class="ui-icon ui-icon-wrench"></span>Addyston</div>
|
||||
</li>
|
||||
<li class="ui-state-disabled">
|
||||
<div>Delphi</div>
|
||||
<ul>
|
||||
<li><div>Ada</div></li>
|
||||
<li>
|
||||
<div><span class="ui-icon ui-icon-wrench"></span>Saarland</div>
|
||||
</li>
|
||||
<li><div>Salzburg</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div>Saarland</div></li>
|
||||
<li>
|
||||
<div>
|
||||
<span class="ui-icon ui-icon-print"></span>Salzburg
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><span class="ui-icon ui-icon-wrench"></span>Delphi</div>
|
||||
<ul>
|
||||
<li><div>Ada</div></li>
|
||||
<li><div>Saarland</div></li>
|
||||
<li><div>Salzburg</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div>Delphi</div>
|
||||
<ul>
|
||||
<li><div><span class="ui-icon ui-icon-wrench"></span>Ada</div></li>
|
||||
<li><div><span class="ui-icon ui-icon-wrench"></span>Saarland</div></li>
|
||||
<li><div><span class="ui-icon ui-icon-wrench"></span>Salzburg</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><div>Perch</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour</h2>
|
||||
<ul class="menu4">
|
||||
<li><div>Aberdeen</div></li>
|
||||
<li><div>Ada</div></li>
|
||||
<li><div>Adamsville</div></li>
|
||||
<li><div>Addyston</div></li>
|
||||
<li><div>Adelphi</div></li>
|
||||
<li><div>Adena</div></li>
|
||||
<li><div>Adrian</div></li>
|
||||
<li><div>Akron</div></li>
|
||||
<li><div>Albany</div></li>
|
||||
<li><div>Alexandria</div></li>
|
||||
<li><div>Alger</div></li>
|
||||
<li><div>Alledonia</div></li>
|
||||
<li><div>Alliance</div></li>
|
||||
<li><div>Alpha</div></li>
|
||||
<li><div>Alvada</div></li>
|
||||
<li><div>Alvordton</div></li>
|
||||
<li><div>Amanda</div></li>
|
||||
<li><div>Amelia</div></li>
|
||||
<li><div>Amesville</div></li>
|
||||
<li><div>Aberdeen</div></li>
|
||||
<li><div>Ada</div></li>
|
||||
<li><div>Adamsville</div></li>
|
||||
<li><div>Addyston</div></li>
|
||||
<li><div>Adelphi</div></li>
|
||||
<li><div>Adena</div></li>
|
||||
<li><div>Adrian</div></li>
|
||||
<li><div>Akron</div></li>
|
||||
<li><div>Albany</div></li>
|
||||
<li><div>Alexandria</div></li>
|
||||
<li><div>Alger</div></li>
|
||||
<li><div>Alledonia</div></li>
|
||||
<li><div>Alliance</div></li>
|
||||
<li><div>Alpha</div></li>
|
||||
<li><div>Alvada</div></li>
|
||||
<li><div>Alvordton</div></li>
|
||||
<li><div>Amanda</div></li>
|
||||
<li><div>Amelia</div></li>
|
||||
<li><div>Amesville</div></li>
|
||||
</ul>
|
||||
|
||||
<h2>Menu with custom markup</h2>
|
||||
<div id="menu5" class="menuElement">
|
||||
<blockquote><div>Aberdeen</div></blockquote>
|
||||
<blockquote><div>Ada</div></blockquote>
|
||||
<blockquote class="ui-state-disabled"><div>Adamsville</div></blockquote>
|
||||
<blockquote><div>Addyston</div></blockquote>
|
||||
<blockquote>
|
||||
<div>Delphi</div>
|
||||
<blockquote class="menuElement">
|
||||
<blockquote><div>Ada</div></blockquote>
|
||||
<blockquote><div>Saarland</div></blockquote>
|
||||
<blockquote><div>Salzburg</div></blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
<blockquote><div>Saarland</div></blockquote>
|
||||
<blockquote>
|
||||
<div>Salzburg</div>
|
||||
<blockquote class="menuElement">
|
||||
<blockquote>
|
||||
<div>Delphi</div>
|
||||
<blockquote class="menuElement">
|
||||
<blockquote><div>Ada</div></blockquote>
|
||||
<blockquote><div>Saarland</div></blockquote>
|
||||
<blockquote><div>Salzburg</div></blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<div>Delphi</div>
|
||||
<blockquote class="menuElement">
|
||||
<blockquote><div>Ada</div></blockquote>
|
||||
<blockquote><div>Saarland</div></blockquote>
|
||||
<blockquote><div>Salzburg</div></blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
<blockquote><div>Perch</div></blockquote>
|
||||
</blockquote>
|
||||
</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">
|
||||
<div>
|
||||
<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>
|
||||
<div class="address-item">
|
||||
<div>
|
||||
<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>
|
||||
<div class="address-item ui-state-disabled">
|
||||
<div>
|
||||
<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>
|
||||
<div class="address-item">
|
||||
<div>
|
||||
<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>
|
||||
<div class="address-item">
|
||||
<div>
|
||||
<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="menuElement">
|
||||
<div>
|
||||
<div>Ada</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Saarland</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Salzburg</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Inline with dividers and group labels</h2>
|
||||
<ul id="menu7">
|
||||
<li class="ui-menu-group">
|
||||
<div><strong>Group 1</strong></div>
|
||||
</li>
|
||||
<li><div>Aberdeen</div></li>
|
||||
<li><div>Ada</div></li>
|
||||
<li><div>Adamsville</div></li>
|
||||
<li><div>Addyston</div></li>
|
||||
<li></li>
|
||||
<li class="ui-menu-group">
|
||||
<div><strong>Group 2</strong></div>
|
||||
</li>
|
||||
<li>
|
||||
<div>Delphi</div>
|
||||
<ul>
|
||||
<li><div>Ada</div></li>
|
||||
<li><div>Saarland</div></li>
|
||||
<li><div>Salzburg</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><div>Saarland</div></li>
|
||||
<li>---</li>
|
||||
<li class="ui-menu-group">
|
||||
<div><strong>Group 3</strong></div>
|
||||
</li>
|
||||
<li>
|
||||
<div>Salzburg</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div>Delphi</div>
|
||||
<ul>
|
||||
<li><div>Ada</div></li>
|
||||
<li>-</li>
|
||||
<li><div>Saarland</div></li>
|
||||
<li>—</li>
|
||||
<li><div>Salzburg</div></li>
|
||||
<li>–</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div>Delphi</div>
|
||||
<ul>
|
||||
<li><div>Ada</div></li>
|
||||
<li><div>Saarland</div></li>
|
||||
<li><div>Salzburg</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><div>Perch</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><div>Amesville</div></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>
|
||||
136
jquery-ui/tests/visual/position/position.html
Normal file
136
jquery-ui/tests/visual/position/position.html
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Position Visual Test</title>
|
||||
<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 src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="draggable">
|
||||
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" ).on( "click", function() {
|
||||
within = within.is( ".demo" ) ? $( window ) : $( ".demo" );
|
||||
position();
|
||||
});
|
||||
|
||||
$( "#margin" ).on( "click", function() {
|
||||
positionable.toggleClass( "extra-margin" );
|
||||
position();
|
||||
});
|
||||
|
||||
$( "select, input" ).on( "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>
|
||||
139
jquery-ui/tests/visual/position/position_feedback.html
Normal file
139
jquery-ui/tests/visual/position/position_feedback.html
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Position Visual Test: Feedback</title>
|
||||
<link rel="stylesheet" href="../../../themes/base/all.css">
|
||||
<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>
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js">
|
||||
function using( position, feedback ) {
|
||||
$( this )
|
||||
.css( position )
|
||||
.text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important )
|
||||
.removeClass( "left right top bottom center middle vertical horizontal" )
|
||||
.addClass( feedback.horizontal )
|
||||
.addClass( feedback.vertical )
|
||||
.addClass( feedback.important );
|
||||
}
|
||||
|
||||
var element = $( ".element" ),
|
||||
target = $( "#target" ).position({
|
||||
my: "center",
|
||||
at: "center",
|
||||
of: window
|
||||
}),
|
||||
targetOffset = target.offset(),
|
||||
oppositeElement = element.clone().width( 50 ).appendTo( "body" ),
|
||||
leftElement = element.clone().width( 50 ).height( 150 ).appendTo( "body" ),
|
||||
rightElement = element.clone().height( 150 ).width( 150 ).appendTo( "body" );
|
||||
|
||||
$.each([
|
||||
"center top-100",
|
||||
"right+25 top-50",
|
||||
"right+75 top",
|
||||
"right+75 center",
|
||||
"right+75 bottom",
|
||||
"right+25 bottom+50",
|
||||
"center bottom+100",
|
||||
"left-25 bottom+50",
|
||||
"left-75 bottom",
|
||||
"left-75 center",
|
||||
"left-75 top",
|
||||
"left-25 top-50"
|
||||
], function( index, direction ) {
|
||||
element.clone().insertAfter( target ).position({
|
||||
my: "center",
|
||||
at: direction,
|
||||
of: target,
|
||||
using: using
|
||||
});
|
||||
});
|
||||
|
||||
element.width( 150 );
|
||||
function positionWithOffset( horizontal, vertical ) {
|
||||
return {
|
||||
my: "left top",
|
||||
at: "left" + (horizontal < 0 ? horizontal : "+" + horizontal) + " " +
|
||||
"top" + (vertical < 0 ? vertical : "+" + vertical),
|
||||
of: target,
|
||||
using: using
|
||||
};
|
||||
};
|
||||
$( document ).on( "mousemove", function( event ) {
|
||||
element.position( positionWithOffset(
|
||||
event.pageX - targetOffset.left, event.pageY - targetOffset.top ) );
|
||||
oppositeElement.position( positionWithOffset(
|
||||
-1 * (event.pageX - targetOffset.left), -1 * (event.pageY - targetOffset.top) ) );
|
||||
leftElement.position( positionWithOffset(
|
||||
-0.9 * (event.pageX - targetOffset.left), 0.9 * (event.pageY - targetOffset.top) ) );
|
||||
rightElement.position( positionWithOffset(
|
||||
0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) );
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target">all around me</div>
|
||||
<div class="element"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
292
jquery-ui/tests/visual/selectmenu/selectmenu.html
Normal file
292
jquery-ui/tests/visual/selectmenu/selectmenu.html
Normal file
|
|
@ -0,0 +1,292 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Selectmenu Visual Test: Default</title>
|
||||
<link rel="stylesheet" href="../../../themes/base/all.css">
|
||||
<style>
|
||||
fieldset { border: 0; }
|
||||
label { display: block; }
|
||||
select { width: 200px; }
|
||||
|
||||
.ui-selectmenu-button { display: block; margin-bottom: 1em;}
|
||||
|
||||
/* width */
|
||||
.width-menu { width: 196px; }
|
||||
</style>
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js">
|
||||
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").on( "click", function() {
|
||||
eventsSelectmenu.selectmenu("destroy");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#refresh_add").on( "click", function() {
|
||||
eventsSelectmenu.append('<option value="fastsound">Speed of light</option>');
|
||||
eventsSelectmenu.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#refresh_selected").on( "click", function() {
|
||||
eventsSelectmenu[0].selectedIndex = 0;
|
||||
eventsSelectmenu.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#refresh").on( "click", function() {
|
||||
eventsSelectmenu.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#open").on( "click", function() {
|
||||
eventsSelectmenu.selectmenu("open");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#close").on( "click", function() {
|
||||
eventsSelectmenu.selectmenu("close");
|
||||
return false;
|
||||
});
|
||||
|
||||
/* disabled */
|
||||
$('#disabled1, #disabled2, #disabled3').selectmenu();
|
||||
var disabled4 = $('#disabled4').selectmenu();
|
||||
|
||||
$("#disable_select").on("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").on("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").on("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>
|
||||
</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>
|
||||
42
jquery-ui/tests/visual/slider/range_slider.html
Normal file
42
jquery-ui/tests/visual/slider/range_slider.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!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/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js">
|
||||
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>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
63
jquery-ui/tests/visual/tooltip/animations.html
Normal file
63
jquery-ui/tests/visual/tooltip/animations.html
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Tooltip Visual Test: Animations</title>
|
||||
<link rel="stylesheet" href="../../../themes/base/all.css">
|
||||
<style>
|
||||
pre {
|
||||
width: 250px;
|
||||
border: 1px solid #000;
|
||||
padding: .5em;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js"
|
||||
data-modules="effect effect-explode effect-bounce effect-blind effect-drop">
|
||||
$( "pre" ).each(function( index, elem ) {
|
||||
$( elem )
|
||||
.attr( "title", "animated tooltips" )
|
||||
.tooltip( JSON.parse( $( 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>
|
||||
205
jquery-ui/tests/visual/tooltip/tooltip.html
Normal file
205
jquery-ui/tests/visual/tooltip/tooltip.html
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Tooltip Visual Test: Default</title>
|
||||
<link rel="stylesheet" href="../../../themes/base/all.css">
|
||||
<style>
|
||||
.group {
|
||||
margin-top: 2em;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="button">
|
||||
// default
|
||||
$( "#context1, form, #childish, #nested-input" ).tooltip();
|
||||
|
||||
// Custom class, replaces ui-widget-content
|
||||
$( "#context2" ).tooltip({
|
||||
classes: {
|
||||
"ui-tooltip": "ui-corner-all ui-widget-header"
|
||||
}
|
||||
});
|
||||
$( "#right1" ).tooltip({
|
||||
classes: {
|
||||
"ui-tooltip": "ui-corner-all 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({
|
||||
classes: {
|
||||
"ui-tooltip": "ui-corner-all 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
|
||||
}
|
||||
}).on( "click", function() {
|
||||
$( "#focus-on-me" ).trigger( "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>
|
||||
2
jquery-ui/tests/visual/visual.css
Normal file
2
jquery-ui/tests/visual/visual.css
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
#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