mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
more inline widgets and variations added to theme test page
This commit is contained in:
paulirish
Richard D. Worth
parent
01ad6ce83e
commit
37e8dd605d
@ -3,31 +3,33 @@
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||||
<title>jQuery UI Example Page</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css">
|
||||
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.selectable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css">
|
||||
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.selectable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
|
||||
// Accordion
|
||||
$("#accordion").accordion({ header: "h3" });
|
||||
|
||||
$(".accordion").accordion({ header: "h3" });
|
||||
$(".accordion").last().accordion("option", "icons", false);
|
||||
|
||||
|
||||
// Tabs
|
||||
$('#tabs').tabs();
|
||||
|
||||
@ -54,15 +56,33 @@
|
||||
|
||||
// Datepicker
|
||||
$('#datepicker').datepicker({
|
||||
inline: true,
|
||||
showWeek: true
|
||||
});
|
||||
|
||||
$('#multidatepicker').datepicker({
|
||||
numberOfMonths: 3,
|
||||
showButtonPanel: true,
|
||||
inline: true
|
||||
});
|
||||
|
||||
// Slider
|
||||
$('#slider').slider({
|
||||
$('.slider').slider({
|
||||
range: true,
|
||||
values: [17, 67]
|
||||
});
|
||||
|
||||
$("#eq > span").each(function() {
|
||||
var value = parseInt($(this).text());
|
||||
$(this).empty().slider({
|
||||
value: value,
|
||||
range: "min",
|
||||
animate: true,
|
||||
orientation: "vertical"
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Progressbar
|
||||
$("#progressbar").progressbar({
|
||||
value: 20
|
||||
@ -74,40 +94,114 @@
|
||||
function() { $(this).removeClass('ui-state-hover'); }
|
||||
);
|
||||
|
||||
$(".buttonset > button").button()
|
||||
.next()
|
||||
.button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-triangle-1-s"
|
||||
}
|
||||
})
|
||||
.parent()
|
||||
.buttonset();
|
||||
|
||||
|
||||
$('#beginning').button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: 'ui-icon-seek-start'
|
||||
}
|
||||
});
|
||||
$('#rewind').button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: 'ui-icon-seek-prev'
|
||||
}
|
||||
});
|
||||
$('#play').button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: 'ui-icon-play'
|
||||
}
|
||||
});
|
||||
$('#stop').button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: 'ui-icon-stop'
|
||||
}
|
||||
});
|
||||
$('#forward').button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: 'ui-icon-seek-next'
|
||||
}
|
||||
});
|
||||
$('#end').button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: 'ui-icon-seek-end'
|
||||
}
|
||||
});
|
||||
$("#shuffle").button();
|
||||
$("#repeat").buttonset();
|
||||
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
/*demo page css*/
|
||||
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
|
||||
.demoHeaders { margin-top: 2em; }
|
||||
.demoHeaders { margin-top: 2em; clear:both; }
|
||||
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
|
||||
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
|
||||
ul#icons {margin: 0; padding: 0;}
|
||||
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
|
||||
ul#icons span.ui-icon {float: left; margin: 0 4px;}
|
||||
.columnbox { height: 150px; width: 48%; float:left; margin-right: 1%; }
|
||||
#eq span { height:120px; float:left; margin:15px }
|
||||
.buttonset {margin-bottom: 5px; }
|
||||
#toolbar { padding: 10px 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- <p style="font-size: 1.3em; line-height: 1.5; margin: 1em 0; width: 50%;">This page demonstrates the widgets using a theme.</p> -->
|
||||
<div id="switcher" style="position:absolute; right: 20px; top: 20px;"></div>
|
||||
<div id="switcher" style="position:absolute; right: 20px; top: 20px;"></div>
|
||||
|
||||
<!-- Accordion -->
|
||||
<h2 class="demoHeaders">Accordion</h2>
|
||||
<div id="accordion">
|
||||
<div>
|
||||
<h3><a href="#">First</a></h3>
|
||||
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3><a href="#">Second</a></h3>
|
||||
<div>Phasellus mattis tincidunt nibh.</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3><a href="#">Third</a></h3>
|
||||
<div>Nam dui erat, auctor a, dignissim quis.</div>
|
||||
<div class="columnbox">
|
||||
<div class="accordion">
|
||||
<div>
|
||||
<h3><a href="#">First</a></h3>
|
||||
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3><a href="#">Second</a></h3>
|
||||
<div>Phasellus mattis tincidunt nibh.</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3><a href="#">Third</a></h3>
|
||||
<div>Nam dui erat, auctor a, dignissim quis.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columnbox">
|
||||
<div class="accordion">
|
||||
<div>
|
||||
<h3><a href="#">First no icons</a></h3>
|
||||
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3><a href="#">Second no icons</a></h3>
|
||||
<div>Phasellus mattis tincidunt nibh.</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3><a href="#">Third no icons</a></h3>
|
||||
<div>Nam dui erat, auctor a, dignissim quis.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tabs -->
|
||||
<h2 class="demoHeaders">Tabs</h2>
|
||||
@ -126,6 +220,10 @@
|
||||
<h2 class="demoHeaders">Dialog</h2>
|
||||
<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>
|
||||
|
||||
<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" >
|
||||
<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>
|
||||
</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>
|
||||
|
||||
|
||||
<h2 class="demoHeaders">Overlay and Shadow Classes <em>(not currently used in UI widgets)</em></h2>
|
||||
<div style="position: relative; width: 96%; height: 200px; padding:1% 4%; overflow:hidden;" class="fakewindowcontain">
|
||||
@ -349,12 +447,32 @@
|
||||
|
||||
<!-- Slider -->
|
||||
<h2 class="demoHeaders">Slider</h2>
|
||||
<div id="slider"></div>
|
||||
|
||||
<div class="columnbox">
|
||||
<div class="slider"></div>
|
||||
</div>
|
||||
<div class="columnbox">
|
||||
<div id="eq">
|
||||
<span>88</span>
|
||||
<span>77</span>
|
||||
<span>55</span>
|
||||
<span>33</span>
|
||||
<span>40</span>
|
||||
<span>45</span>
|
||||
<span>70</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Datepicker -->
|
||||
<h2 class="demoHeaders">Datepicker</h2>
|
||||
<div id="datepicker"></div>
|
||||
|
||||
<div class="columnbox" style="width: 32%">
|
||||
<div id="datepicker"></div>
|
||||
</div>
|
||||
<div class="columnbox" style="width: 66%; height: 220px;">
|
||||
<div id="multidatepicker"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Progressbar -->
|
||||
<h2 class="demoHeaders">Progressbar</h2>
|
||||
<div id="progressbar"></div>
|
||||
@ -374,13 +492,37 @@
|
||||
<strong>Alert:</strong> Sample ui-state-error style.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 class="demoHeaders">Button</h2>
|
||||
|
||||
<div class="buttonset">
|
||||
<button id="rerun">Run last action</button>
|
||||
<button id="select">Select an action</button>
|
||||
</div>
|
||||
|
||||
<span id="toolbar" class="ui-widget-header ui-corner-all">
|
||||
<button id="beginning">go to beginning</button>
|
||||
<button id="rewind">rewind</button>
|
||||
<button id="play">play</button>
|
||||
<button id="stop">stop</button>
|
||||
<button id="forward">fast forward</button>
|
||||
<button id="end">go to end</button>
|
||||
|
||||
<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
|
||||
|
||||
<span id="repeat">
|
||||
<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
|
||||
<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
|
||||
<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<!-- theme switcher -->
|
||||
|
||||
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
|
||||
<script>
|
||||
$('#switcher').themeswitcher();
|
||||
</script>
|
||||
|
||||
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
|
||||
<script>
|
||||
$('#switcher').themeswitcher();
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user