mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-12-23 01:24:22 +00:00
b698f809de
Adds a data-composite option and fixes paths for effects. Otherwise just applies the same conversion as already applied to demos, sometimes moving a <style> element to the right place.
94 lines
2.7 KiB
HTML
94 lines
2.7 KiB
HTML
<!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>
|