JQueryThemeSwitcher < System

---+ %TOPIC%
%JQPLUGINS{"themeswitcher"
  format="
    Homepage: $homepage <br />
    Author(s): $author <br />
    Version: $version 
  "
}%

%STARTSECTION{"summary"}%
User interface for showing different themes.
%ENDSECTION{"summary"}%

---++ Usage
To add a theme dropdown to the page (top right), write: 
<verbatim>
%JQREQUIRE{"themeswitcher"}%
</verbatim>

See also: [[http://jqueryui.com/docs/Theming/ThemeSwitcher][documentation]]

---++ Example interface elements
%JQREQUIRE{"themeswitcher"}%
<div id="compGroupB" class="clearfix" style="width:300px;">
<!-- Button -->
<h3 class="demoHeaders">Button</h3>
<button id="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">A button element</span></button>
<form style="margin-top: 1em;">
	<div id="radioset" class="ui-buttonset">
		<input type="radio" id="radio1" name="radio" class="ui-helper-hidden-accessible"><label for="radio1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">Choice 1</span></label>
		<input type="radio" id="radio2" name="radio" checked="checked" class="ui-helper-hidden-accessible"><label for="radio2" class="ui-state-active ui-button ui-widget ui-state-default ui-button-text-only" aria-pressed="true" role="button" aria-disabled="false"><span class="ui-button-text">Choice 2</span></label>
		<input type="radio" id="radio3" name="radio" class="ui-helper-hidden-accessible"><label for="radio3" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-disabled="false"><span class="ui-button-text">Choice 3</span></label>
	</div>
</form>

<!-- Slider -->
<h3 class="demoHeaders">Slider</h3>
<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header" style="left: 17%; width: 50%; "></div><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 17%; "></a><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 67%; "></a></div>

<!-- Datepicker -->
<h3 class="demoHeaders">Datepicker</h3>
<div id="datepicker" class="hasDatepicker"><div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block; "><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_1293746940113.datepicker._adjustDate('#datepicker', -1, 'M');" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_1293746940113.datepicker._adjustDate('#datepicker', +1, 'M');" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">December</span>&nbsp;<span class="ui-datepicker-year">2010</span></div></div><table class="ui-datepicker-calendar"><thead><tr><th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th><th><span title="Monday">Mo</span></th><th><span title="Tuesday">Tu</span></th><th><span title="Wednesday">We</span></th><th><span title="Thursday">Th</span></th><th><span title="Friday">Fr</span></th><th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">1</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">2</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">3</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">4</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">5</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">6</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">7</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">8</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">9</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">10</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">11</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">12</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">13</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">14</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">15</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">16</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">17</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">18</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">19</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">20</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">21</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">22</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">23</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">24</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">25</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">26</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">27</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">28</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">29</a></td><td class=" ui-datepicker-days-cell-over  ui-datepicker-current-day ui-datepicker-today" onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default ui-state-highlight ui-state-active ui-state-hover" href="#">30</a></td><td class=" " onclick="DP_jQuery_1293746940113.datepicker._selectDay('#datepicker',11,2010, this);return false;"><a class="ui-state-default" href="#">31</a></td><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td></tr></tbody></table></div></div>

<!-- Progressbar -->
<h3 class="demoHeaders">Progressbar</h3>	
<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20"><div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 20%; "></div></div>

<!-- Highlight / Error -->
<h3 class="demoHeaders">Highlight / Error</h3>
<div class="ui-widget">
	<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
		<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
		<strong>Hey!</strong> Sample ui-state-highlight style.</p>
	</div>
</div>
<br>
<div class="ui-widget">
	<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
		<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> 
		<strong>Alert:</strong> Sample ui-state-error style.</p>
	</div>
</div>

</div>
This topic: System > JQueryPlugin > JQueryThemeSwitcher
Topic revision: 30 Dec 2010, ProjectContributor (raw view)
Copyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback