You are here:
Foswiki
>
System Web
>
JQueryPlugin
>
JQueryThemeSwitcher
(30 Dec 2010,
ProjectContributor
)
(raw view)
E
dit
A
ttach
---+ %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> <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"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </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"> </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>
E
dit
|
A
ttach
|
P
rint version
|
H
istory
: r1
|
B
acklinks
|
V
iew topic
|
Edit
w
iki text
|
M
ore topic actions
Topic revision: r1 - 30 Dec 2010,
ProjectContributor
System
Log In
or
Register
Toolbox
Users
Groups
Index
Search
Changes
Notifications
RSS Feed
Statistics
Preferences
User Reference
BeginnersStartHere
TextFormattingRules
Macros
FormattedSearch
QuerySearch
DocumentGraphics
SkinBrowser
InstalledPlugins
Admin Maintenance
Reference Manual
AdminToolsCategory
InterWikis
ManagingWebs
SiteTools
DefaultPreferences
WebPreferences
Categories
Admin Documentation
Admin Tools
Developer Doc
User Documentation
User Tools
Webs
Cosmo
Main
Sandbox
System
English
Français
Polski
Copyright © CC-BY-SA by the contributing authors. All material on this collaboration platform is copyrighted under CC-BY-SA by the contributing authors unless otherwise noted.
Ideas, requests, problems regarding Foswiki?
Send feedback