EasyUI切换主题风格

最新推荐文章于 2020-11-28 03:27:56 发布

缘如风

最新推荐文章于 2020-11-28 03:27:56 发布

阅读量1.2k

点赞数 2

分类专栏： EasyUI框架

本文链接：https://blog.csdn.net/chyuanrufeng/article/details/109744841

版权

EasyUI框架专栏收录该内容

12 篇文章 0 订阅

订阅专栏

实现EasyUI切换主题。

参考文档如下：

https://www.jeasyui.net/extension/209.html

https://www.runoob.com/jeasyui/ext-themes.html

以上各主题下载地址：jquery easyui themes

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>切换主题</title>
<!--这里-->
		<link id="easyuiTheme"  rel="stylesheet" type="text/css" href="./jquery-easyui/themes/default/easyui.css">
<!--这里-->
		<link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/icon.css">

		<script type="text/javascript" src="./jquery-easyui/jquery.min.js"></script>
		<script type="text/javascript" src="./jquery-easyui/jquery.easyui.min.js"></script>
		
		
	</head>
	<body>
		<div id = "maindiv">
				<div id="tablediv" style="width:7100px;height:260px;">
					<table id="tabledg" class="easyui-datagrid" title="Format DataGrid Columns" style="width:700px;height:250px; "
				>
						<thead>
							<tr>
								<th data-options="field:'name',width:80">Item ID</th>
								<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
							</tr>
						</thead>
					</table>
				</div>
		<div style="position: absolute;right: 14px;top:42px;">
		          <div style="padding:5px;">
		            <a href="javascript:void(0);" rel="external nofollow" class="easyui-menubutton" data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a>
		          </div>
		        </div>
		        <div id="layout_north_pfMenu" class="easyui-menu" style=" display: none;">
		          <div md="ssss" >black</div>
		          <div >default</div>
		          <div>bootstrap</div>
		          <div >gray</div>
		          <div >metro</div>
		        </div>
		</div>
	
		<script>
			function getData() {
				var rows = [];
				for (var i = 1; i <= 10; i++) {
					var amount = Math.floor(Math.random() * 1000);
					var price = Math.floor(Math.random() * 1000);
					rows.push({
						inv: 'Inv No ' + i,
						date: $.fn.datebox.defaults.formatter(new Date()),
						name: 'Name ' + i,
						status: (i % 2)?"投":"退",
						listprice: amount
					});
				}

				let d = {};
				d["rows"] = rows;
				d["total"] = rows.length;
				return d;
			}

			$(function() {
				let data = getData();
				$("#tabledg").datagrid("loadData", data);
			})

			/**
			   * 更换EasyUI主题的方法
			   * @param themeName
			   * 主题名称
			   */
			function changeTheme(themeName) {
			    var $easyuiTheme = $('#easyuiTheme');
			    var url = $easyuiTheme.attr('href');
			    var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
			    $easyuiTheme.attr('href', href);
			   
			  };
			  
			  $('#layout_north_pfMenu').menu({
			      onClick:function(item){
					  console.log($(item.target).prop("md"))
					  console.log($(item.target).attr("md"))
			  		changeTheme(item.text);
			      }
			  });			
		</script>
	</body>
</html>

缘如风

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
EasyUI切换主题风格

实现EasyUI切换主题。参考文档如下：https://www.jeasyui.net/extension/209.htmlhttps://www.runoob.com/jeasyui/ext-themes.html以上各主题下载地址：jquery easyui themes代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>切换主题&.
复制链接

扫一扫