You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.7 KiB
94 lines
2.7 KiB
5 years ago
|
<!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>
|