Easyui changing Themes

Easyui The default theme has several

The use of Easyui needs to be imported

<Scripttype= "Text/javascript"src= "/resources/js/lib/easyui/jquery.min.js"></Script><Scripttype= "Text/javascript"src= "/resources/js/lib/easyui/jquery.easyui.min.js"></Script><Linkrel= "stylesheet"href= "/resources/js/lib/easyui/themes/default/easyui.css"type= "Text/css"></Link><Linkrel= "stylesheet"href= "/resources/js/lib/easyui/themes/icon.css"type= "Text/css"></Link><Scripttype= "Text/javascript"src= "/resources/js/lib/easyui/locale/easyui-lang-zh_cn.js"></Script><Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8" />

which

<rel= "stylesheet"  href= "/resources/js/lib/easyui/themes/default /easyui.css "  type=" Text/css "></link>

is the Easyui style-related configuration, the default theme defaults, modifying the theme only needs to modify the default folder to the folder where the new theme is located.

I downloaded a few themes on the official website (http://www.jeasyui.com/extension/themes.php), unzip into the themes folder to

Change the configuration into

<rel= "stylesheet"  href= "/resources/js/lib/easyui/themes/ Metro-gray/easyui.css "  type=" Text/css "></link>

It turns into a gray metro theme.

Of course, the better way is to choose the theme through the JS code, first need a theme selection dropdown box

<id= "Changetheme"  name= "Changetheme"  value= " Metro-gray ">

//Initialize the theme selection drop-down boxAdmin_index.initthemes =function() {    $(' #changeTheme '). ComboBox ({valuefield:' Name ', TextField:' Value ', Width:70, data: [{name:' Default ', Value: ' Default '}, {name:' Black ', Value: ' Black '}, {name:' Bootstrap ', Value: ' Bootstrap '}, {name:' Gray ', Value: ' Gray '}, {name:' Metro ', Value: ' Metro '}, {name:' Metro-gray ', Value: ' Metro-gray '}, {name:' Metro-red ', Value: ' Metro-red '}, {name:' Ui-sunny ', Value: ' Ui-sunny '}], OnChange:function() {                varTheme = $ (' #changeTheme '). ComboBox (' GetValue ');            Admin_index.changetheme (theme); }    }); };

Of course, the initialization of this control should be placed in the Ready method

// Action $ (document) after page load is complete. Ready (function() {    // display time    SetInterval (function() {Admin_index.showtime ("Time");}, +);     // Initialize the theme selection drop-down box     admin_index.initthemes ();});

Ways to change themes

 /*   * * Replace Easyui theme  */  Admin_ Index.changetheme  = function   (ThemeName    { var  $easyuiTheme = $ (' #uc_theme '  var  url = $easyuiTheme. attr (' href ' );  var  href = url.substring (0, Url.indexof (' themes ')) + ' themes/' + themename    + '/easyui.css ' ;    $easyuiTheme. attr ( ' href '  ' easyuithemename '  7000    });};

In order to change the theme style, you need to add an ID to the link label of the imported style

<id= "Uc_theme"  rel= "stylesheet"  href= "/ Resources/js/lib/easyui/themes/metro-gray/easyui.css "  type=" Text/css"></  link>

This replacement theme can only be used locally, refresh the page after the recovery, if you want to customize the theme, you need to save to the database.

Easyui changing Themes