These two days see coreservlets on the jquery tutorial, although relatively old, but still good. The last part of the jquery UI theme switch, with his introduction of the method can not be achieved. So I changed the next, can.
The code is as follows: HTML section: <fieldset class="Ui-widget"><legend>changing Themes (Skins) at Runtime </legend><div class="Ui-widget-content ui-corner-all" id="Themes-div"> <input type = "Radio" name = " Themes " value = black tie <input type = "Radio" name = " Themes " value =blitzer <input type = "Radio" name = " Themes " value =le frog <input type = "Radio" name = " Themes " value = black tie<br /> <input type = "Radio" name = " Themes " value = Start <input type = "Radio" name = " Themes " value =trontastic <input type = "Radio" name = " Themes " value =/> ui-darkness <input type = "Radio" name = " Themes " value = my theme (downloaded) <input type="Radio" name="Themes" value ="Jquery-ui"/>UI lightness (Default)</div></fieldset>
JS section: var uidemo = {}; //To avoid name conflicts
Uidemo.switchtotheme = function(themename) { var $link = $ ("link[href$= ' jquery-ui.css ')");//Get link node $link. attr ("href","./css/"+themename+"/jquery-ui.css"); Change the href attribute of the link node };Uidemo.switchtoselectedtheme = function() { var theme = $ (this). Val ();uidemo.switchtotheme (theme);};
$(function() {
$("#themes-div input"). Click (uidemo.switchtoselectedtheme);
});
Attached to his way of realization:Uidemo.switchtotheme =function(themename) {
varattributes = {
type: "Text/css",rel: "stylesheet",href: "css/" + themename + "/jquery-ui.css" }; var stylesheetlink = $ ("<link>", attributes);$ ("Head"). Append (Stylesheetlink);};
The other parts are the same.
From for notes (Wiz)
A way to implement the theme of jquery UI dynamic switching
