1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Compound Visual Test : All Widgets in Dialog</title>
<link rel="stylesheet" href="../visual.css">
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
<script src="../../../jquery-1.9.0.js"></script>
<script src="../../../ui/jquery.ui.core.js"></script>
<script src="../../../ui/jquery.ui.widget.js"></script>
<script src="../../../ui/jquery.ui.mouse.js"></script>
<script src="../../../ui/jquery.ui.position.js"></script>
<script src="../../../ui/jquery.ui.menu.js"></script>
<script src="../../../ui/jquery.ui.resizable.js"></script>
<script src="../../../ui/jquery.ui.draggable.js"></script>
<script src="../../../ui/jquery.ui.accordion.js"></script>
<script src="../../../ui/jquery.ui.autocomplete.js"></script>
<script src="../../../ui/jquery.ui.button.js"></script>
<script src="../../../ui/jquery.ui.datepicker.js"></script>
<script src="../../../ui/jquery.ui.dialog.js"></script>
<script src="../../../ui/jquery.ui.progressbar.js"></script>
<script src="../../../ui/jquery.ui.slider.js"></script>
<script src="../../../ui/jquery.ui.tabs.js"></script>
<script src="../../../ui/jquery.ui.tooltip.js"></script>
<script>
$(function() {
$( "[title]" ).tooltip();
$( "#accordion" ).accordion();
$( "#autocomplete" ).autocomplete({
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ]
});
$( "button" ).button().click(function() {
$( "#dialog2" ).dialog( "open" );
});
$( "#datepicker" ).datepicker();
$( "#progressbar" ).progressbar({
value: 30
});
$( "#slider" ).slider({
animate: true,
value: 30,
slide: function(event, ui) {
$( "#progress" ).val( ui.value );
$( "#progressbar" ).progressbar( "option", "value", ui.value );
}
});
$( "#tabs" ).tabs();
$( "#dialog" ).dialog();
$( "#dialog2" ).dialog({
autoOpen: false,
width: 100,
height: 75,
modal: true
});
});
</script>
</head>
<body>
<div id="dialog">
<div id="accordion">
<h3>Accordion Header 1</h3>
<div>
Accordion Content 1
</div>
<h3>Accordion Header 2</h3>
<div>
Accordion Content 2
</div>
<h3>Accordion Header 3</h3>
<div>
Accordion Content 3
</div>
</div>
<input id="autocomplete">
<button>A Button</button>
<input id="datepicker">
<button>Another button</button>
<div>
<label for="progress">Progress: <input title="The progress we made so far" id="progress"></label>
</div>
<div id="progressbar">
</div>
<div id="slider" title="Sliding progress..."></div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
</div>
<div id="dialog2">
Yay, another dialog.
</div>
</body>
</html>
|
