django-helpdeskmig/htdocs/jquery-smoothness-theme/demo.html
Ross Poulton 0068eccbf4 Big checkin that adds a number of features and makes some changes:
* Updated jQuery to 1.2.6
* Add jQuery UI 1.6b for interface effects as needed
    * 'Smoothness' theme from ThemeRoller.com added.
* Clean up 'Filter' dialog on Ticket List, long way to go still.
    * Uses tabs to save a query or load a saved query
    * Lots of misuse of space here, can be cleaned up somewhat still.
* Add ability for users to save filters/queries
    * Saved queries can be shared, so other users can use them
    * Users can run saved queries instead of re-filtering
    * Filter mechanism in Ticket List had to be reworked significantly
* Merged 3rd party licenses into LICENSE.3RDPARTY
* Updated messages files for EN locale

To update, ensure you run './manage.py syncdb' to add the SavedSearch
table.
2008-08-28 09:06:24 +00:00

168 lines
6.1 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Themeroller Demo</title>
<script src="http://ui.jquery.com/js/jquery.js"></script>
<script src="http://ui.jquery.com/js/ui.js"></script>
<link rel="stylesheet" href="http://ui.jquery.com/applications/themeroller/css/app_screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css" media="screen">
<script type="text/javascript">
$(function(){
//accordion
$('#accordion').accordion({
header: ".ui-accordion-header",
clearStyle: true
});
//tabs
$('#tabs ul').tabs();
//datepicker
$('#ui-datepicker').datepicker({
changeFirstDay: false
});
//slider
$('#slider').slider({range: true});
//dialog (currently not js-driven in themeroller)
/*
var dOffset = $('#dialogContent').offset();
$('#dialogContent').dialog({
buttons: {
'Okay': function() { },
'Cancel': function() { }
}
});
window.scrollTo(0,0);
*/
});
</script>
</head>
<body>
<div id="compGroupA" class="clearfix">
<!-- ACCORDION -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<div class="ui-accordion-group">
<h3 class="ui-accordion-header"><a href="#">Test 1</a></h3>
<div class="ui-accordion-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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="ui-accordion-group">
<h3 class="ui-accordion-header"><a href="#">Test 2</a></h3>
<div class="ui-accordion-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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
</div>
<div class="ui-accordion-group">
<h3 class="ui-accordion-header"><a href="#">Test 3</a></h3>
<div class="ui-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- TABS -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li class="ui-tabs-nav-item"><a href="#fragment-1">First Section</a></li>
<li class="ui-tabs-nav-item"><a href="#fragment-2">Second Section</a></li>
<li class="ui-tabs-nav-item"><a href="#fragment-3"><span>Third Section</span></a></li>
</ul>
<div id="fragment-1">
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div id="fragment-2">
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="fragment-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div><!-- /#compGroupA -->
<div id="compGroupB" class="clearfix">
<!-- SLIDER -->
<h2 class="demoHeaders">Slider</h2>
<div id="slider">
<div class='ui-slider-handle'></div>
<div class='ui-slider-handle' style="left: 100px;"></div>
</div>
<!-- Date Picker -->
<h2 class="demoHeaders">Date Picker</h2>
<div id="ui-datepicker" class="clearfix"></div>
<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
<h2 class="demoHeaders">Dialog</h2>
<div class="ui-dialog ui-draggable" style="width: 30em; height: 20em; ">
<div style="position: relative;" class="ui-dialog-container">
<div class="ui-dialog-titlebar">
<span class="ui-dialog-title">This is my title</span>
<a href="#" class="ui-dialog-titlebar-close"><span>X</span></a>
</div>
<div class="ui-dialog-content" id="dialogContent" title="This is my title">
<p>I'm in a dialog!</p>
</div>
</div>
<div class="ui-resizable-n ui-resizable-handle"></div>
<div class="ui-resizable-s ui-resizable-handle"></div>
<div class="ui-resizable-e ui-resizable-handle"></div>
<div class="ui-resizable-w ui-resizable-handle"></div>
<div class="ui-resizable-ne ui-resizable-handle"></div>
<div class="ui-resizable-se ui-resizable-handle"></div>
<div class="ui-resizable-sw ui-resizable-handle"></div>
<div class="ui-resizable-nw ui-resizable-handle"></div>
<div class="ui-dialog-buttonpane">
<button>Okay</button>
<button>Cancel</button>
</div>
</div>
</div><!-- /#compGroupB -->
</body>
</html>