Skip to content

Commit 37e8dd6

Browse files
paulirishrdworth
paulirish
authored and
rdworth
committed
more inline widgets and variations added to theme test page
1 parent 01ad6ce commit 37e8dd6

File tree

1 file changed

+187
-45
lines changed

1 file changed

+187
-45
lines changed

‎tests/visual/theme.html‎

Lines changed: 187 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,33 @@
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
55
<title>jQuery UI Example Page</title>
6-
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css">
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
12-
<script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
13-
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
14-
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
15-
<script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
16-
<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
17-
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
18-
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
19-
<script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script>
20-
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
21-
<script type="text/javascript" src="../../ui/jquery.ui.selectable.js"></script>
22-
<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
23-
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
24-
<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css">
7+
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8+
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9+
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10+
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11+
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
12+
<script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
13+
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
14+
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
15+
<script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
16+
<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
17+
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
18+
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
19+
<script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script>
20+
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
21+
<script type="text/javascript" src="../../ui/jquery.ui.selectable.js"></script>
22+
<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
23+
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
24+
<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
2525
<script type="text/javascript">
2626
$(function(){
2727

2828
// Accordion
29-
$("#accordion").accordion({ header: "h3" });
30-
29+
$(".accordion").accordion({ header: "h3" });
30+
$(".accordion").last().accordion("option", "icons", false);
31+
32+
3133
// Tabs
3234
$('#tabs').tabs();
3335

@@ -54,15 +56,33 @@
5456

5557
// Datepicker
5658
$('#datepicker').datepicker({
59+
inline: true,
60+
showWeek: true
61+
});
62+
63+
$('#multidatepicker').datepicker({
64+
numberOfMonths: 3,
65+
showButtonPanel: true,
5766
inline: true
5867
});
5968

6069
// Slider
61-
$('#slider').slider({
70+
$('.slider').slider({
6271
range: true,
6372
values: [17, 67]
6473
});
6574

75+
$("#eq > span").each(function() {
76+
var value = parseInt($(this).text());
77+
$(this).empty().slider({
78+
value: value,
79+
range: "min",
80+
animate: true,
81+
orientation: "vertical"
82+
});
83+
});
84+
85+
6686
// Progressbar
6787
$("#progressbar").progressbar({
6888
value: 20
@@ -74,40 +94,114 @@
7494
function() { $(this).removeClass('ui-state-hover'); }
7595
);
7696

97+
$(".buttonset > button").button()
98+
.next()
99+
.button({
100+
text: false,
101+
icons: {
102+
primary: "ui-icon-triangle-1-s"
103+
}
104+
})
105+
.parent()
106+
.buttonset();
107+
108+
109+
$('#beginning').button({
110+
text: false,
111+
icons: {
112+
primary: 'ui-icon-seek-start'
113+
}
114+
});
115+
$('#rewind').button({
116+
text: false,
117+
icons: {
118+
primary: 'ui-icon-seek-prev'
119+
}
120+
});
121+
$('#play').button({
122+
text: false,
123+
icons: {
124+
primary: 'ui-icon-play'
125+
}
126+
});
127+
$('#stop').button({
128+
text: false,
129+
icons: {
130+
primary: 'ui-icon-stop'
131+
}
132+
});
133+
$('#forward').button({
134+
text: false,
135+
icons: {
136+
primary: 'ui-icon-seek-next'
137+
}
138+
});
139+
$('#end').button({
140+
text: false,
141+
icons: {
142+
primary: 'ui-icon-seek-end'
143+
}
144+
});
145+
$("#shuffle").button();
146+
$("#repeat").buttonset();
147+
77148
});
78149
</script>
79150
<style type="text/css">
80151
/*demo page css*/
81152
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
82-
.demoHeaders { margin-top: 2em; }
153+
.demoHeaders { margin-top: 2em; clear:both; }
83154
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
84155
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
85156
ul#icons {margin: 0; padding: 0;}
86157
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
87158
ul#icons span.ui-icon {float: left; margin: 0 4px;}
159+
.columnbox { height: 150px; width: 48%; float:left; margin-right: 1%; }
160+
#eq span { height:120px; float:left; margin:15px }
161+
.buttonset {margin-bottom: 5px; }
162+
#toolbar { padding: 10px 4px; }
88163
</style>
89164
</head>
90165
<body>
91166

92167
<!-- <p style="font-size: 1.3em; line-height: 1.5; margin: 1em 0; width: 50%;">This page demonstrates the widgets using a theme.</p> -->
93-
<div id="switcher" style="position:absolute; right: 20px; top: 20px;"></div>
168+
<div id="switcher" style="position:absolute; right: 20px; top: 20px;"></div>
94169

95170
<!-- Accordion -->
96171
<h2 class="demoHeaders">Accordion</h2>
97-
<div id="accordion">
98-
<div>
99-
<h3><a href="#">First</a></h3>
100-
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
101-
</div>
102-
<div>
103-
<h3><a href="#">Second</a></h3>
104-
<div>Phasellus mattis tincidunt nibh.</div>
172+
<div class="columnbox">
173+
<div class="accordion">
174+
<div>
175+
<h3><a href="#">First</a></h3>
176+
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
177+
</div>
178+
<div>
179+
<h3><a href="#">Second</a></h3>
180+
<div>Phasellus mattis tincidunt nibh.</div>
181+
</div>
182+
<div>
183+
<h3><a href="#">Third</a></h3>
184+
<div>Nam dui erat, auctor a, dignissim quis.</div>
185+
</div>
105186
</div>
106-
<div>
107-
<h3><a href="#">Third</a></h3>
108-
<div>Nam dui erat, auctor a, dignissim quis.</div>
187+
</div>
188+
<div class="columnbox">
189+
<div class="accordion">
190+
<div>
191+
<h3><a href="#">First no icons</a></h3>
192+
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
193+
</div>
194+
<div>
195+
<h3><a href="#">Second no icons</a></h3>
196+
<div>Phasellus mattis tincidunt nibh.</div>
197+
</div>
198+
<div>
199+
<h3><a href="#">Third no icons</a></h3>
200+
<div>Nam dui erat, auctor a, dignissim quis.</div>
201+
</div>
109202
</div>
110203
</div>
204+
111205

112206
<!-- Tabs -->
113207
<h2 class="demoHeaders">Tabs</h2>
@@ -126,6 +220,10 @@ <h2 class="demoHeaders">Tabs</h2>
126220
<h2 class="demoHeaders">Dialog</h2>
127221
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
128222

223+
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" ><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title">Inline Dialog</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" ><span class="ui-icon ui-icon-closethick" >close</span></a></div><div class="ui-dialog-content ui-widget-content" >
224+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
225+
</div><div class="ui-resizable-handle ui-resizable-n" ></div><div class="ui-resizable-handle ui-resizable-e" ></div><div class="ui-resizable-handle ui-resizable-s" ></div><div class="ui-resizable-handle ui-resizable-w" ></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" ></div><div class="ui-resizable-handle ui-resizable-sw" ></div><div class="ui-resizable-handle ui-resizable-ne" ></div><div class="ui-resizable-handle ui-resizable-nw" ></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Ok</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button></div></div>
226+
129227

130228
<h2 class="demoHeaders">Overlay and Shadow Classes <em>(not currently used in UI widgets)</em></h2>
131229
<div style="position: relative; width: 96%; height: 200px; padding:1% 4%; overflow:hidden;" class="fakewindowcontain">
@@ -349,12 +447,32 @@ <h2 class="demoHeaders">Framework Icons (content color preview)</h2>
349447

350448
<!-- Slider -->
351449
<h2 class="demoHeaders">Slider</h2>
352-
<div id="slider"></div>
353-
450+
<div class="columnbox">
451+
<div class="slider"></div>
452+
</div>
453+
<div class="columnbox">
454+
<div id="eq">
455+
<span>88</span>
456+
<span>77</span>
457+
<span>55</span>
458+
<span>33</span>
459+
<span>40</span>
460+
<span>45</span>
461+
<span>70</span>
462+
</div>
463+
</div>
464+
465+
354466
<!-- Datepicker -->
355467
<h2 class="demoHeaders">Datepicker</h2>
356-
<div id="datepicker"></div>
357-
468+
<div class="columnbox" style="width: 32%">
469+
<div id="datepicker"></div>
470+
</div>
471+
<div class="columnbox" style="width: 66%; height: 220px;">
472+
<div id="multidatepicker"></div>
473+
</div>
474+
475+
358476
<!-- Progressbar -->
359477
<h2 class="demoHeaders">Progressbar</h2>
360478
<div id="progressbar"></div>
@@ -374,13 +492,37 @@ <h2 class="demoHeaders">Highlight / Error</h2>
374492
<strong>Alert:</strong> Sample ui-state-error style.</p>
375493
</div>
376494
</div>
377-
495+
496+
<h2 class="demoHeaders">Button</h2>
497+
498+
<div class="buttonset">
499+
<button id="rerun">Run last action</button>
500+
<button id="select">Select an action</button>
501+
</div>
502+
503+
<span id="toolbar" class="ui-widget-header ui-corner-all">
504+
<button id="beginning">go to beginning</button>
505+
<button id="rewind">rewind</button>
506+
<button id="play">play</button>
507+
<button id="stop">stop</button>
508+
<button id="forward">fast forward</button>
509+
<button id="end">go to end</button>
510+
511+
<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
512+
513+
<span id="repeat">
514+
<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
515+
<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
516+
<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
517+
</span>
518+
</span>
519+
378520
<!-- theme switcher -->
379-
380-
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
381-
<script>
382-
$('#switcher').themeswitcher();
383-
</script>
521+
522+
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
523+
<script>
524+
$('#switcher').themeswitcher();
525+
</script>
384526

385527

386528

0 commit comments

Comments
 (0)