Back to Library

Themes maybe

Both can be generated or modified by the jQuery UI ThemeRoller tool.

<link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" />
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css"
type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css"
type="text/css" media="all" />
<script type="text/javascript" src="http://jqueryui.com/js/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"
type="text/javascript"></script>

Themed Controls

<!-- In the headers -->
//Set theme roller 
    $(document).ready(function () {
        $('#ThemeRoller').themeswitcher();
    });
 
//Show date time picker control
    $(function () {
        $("#datepicker").datepicker();
});
 
//Show Dialog
    $(function () {
        $("#dialog").dialog();
    });
 
//Progress Bar
    $(function () {
        $("#progressbar").progressbar({
            value: 50
        });
    });

In the body of the code:

Datepicker:

<p>Date: <input id="datepicker" type="text" /></p>

Floating dialog box:

<div id="dialog" title="Basic dialog">
    <p>
    This is a Demo Dialog box using JQuery!!<br />
    Change theme to see this Dialog in different theme.
    </p>
</div>

Progress bar:

<div id="progressbar" style="width:200px;"></div>

Themed Tabs

HTML Code

<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.</div> 
 <div id="tabs-2">Lorem ipsum dolor.</div> 
 <div id="tabs-3">Lorem ipsum dolor.</div> 
</div>

Theme-ing the whole Page/Container

<body>
  <div id="container" class="ui-widget ui-widget-content">
    <div id="pagetop" class="ui-widget-header"></div>
    <div id="navigation"></div> 
    <div id="content"></div>
  </div>
 </body>

With possibly the following additional css:

 .ui-widget h1, .ui-widget h2, .ui-widget h3, .ui-widget h4 {      color: inherit; font-family: inherit; }
 /*  ThemeRoller opacity makes reading disabled controls VERY difficult  */
 textarea.ui-state-disabled, input.ui-state-disabled { opacity:1 !important; filter:Alpha(Opacity=100) !important; }

See also: The full list of jQuery-UI classes at http://wiki.jqueryui.com/jQuery-UI-CSS-Framework

Dynamic Themes

The Optional Theme Swticher Tools

Inside of the body place:

<script type="text/javascript"
  src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="ThemeRoller"></div>
 
javascript_styling_with_theme_roller.txt · Last modified: 2010/10/26 05:48 by root
 
RSS - 200 © CrosswireDigitialMedia Ltd