Print Page - How to change Easyloader theme @ run-time?

I would like to let the user change skin by selecting a theme from combo box. I have fond posts about changing the CSS reference via giving it an id. However it’s probably not the correct solution in my case. The ribbon menu pictures gets lost and it looks overall strange. I believe the reason for this is that my app is using easyloader. At initial page-load my code sets the theme like so:

easyloader.theme = 'material-teal';
easyloader.locale = 'se_SW';

How can I implement a method for changing easyloader.theme and re-render the page to have this theme taking effect?

To change themes when using easyloader, please set the 'css' property to false and then add a theme to the page.

Code:

<link rel="stylesheet" type="text/css" href=".../easyui.css">

Code:

<script type="text/javascript">
	easyloader.css = false;
	function changeTheme(v){
		$('link:first').attr('href',v);
		setTimeout(function(){
			//...;
		},0);
	}
</script>

Usage example:

Code:

<select onchange="changeTheme(this.value)">
	<option value="https://www.jeasyui.com/easyui/themes/default/easyui.css">Default</option>
	<option value="https://www.jeasyui.com/easyui/themes/gray/easyui.css">Gray</option>
	<option value="https://www.jeasyui.com/easyui/themes/metro/easyui.css">Metro</option>
	<option value="https://www.jeasyui.com/easyui/themes/black/easyui.css">Black</option>
	<option value="https://www.jeasyui.com/easyui/themes/material/easyui.css">Material</option>
	<option value="https://www.jeasyui.com/easyui/themes/material-teal/easyui.css">Material Teal</option>
...
</select>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: WizPS on April 21, 2020, 08:12:55 AM