Easyui 定制window窗口

Jquery Easyui 是一种基于JQuery的用户界面插件集合，在实际的开发种给我们带来了很大的便利，方便数据的直观展示等。

在实际的开发中，我们要使用easyui就需要先导入easyui的jar包。

easyui默认的样式是这样子的

但是在实际的开发中有时候需要定制自己项目使用的easyui ，那么我们就需要对easyui的样式进行相应的修改

比如，我们的目标是从左图到右图：

我们需要如下的定义：

.window {
  overflow: hidden;
  padding: 1px;
  /*   关键设置 */
  border-width: 0px;
}
.window .window-header {
  background: transparent;
  padding: 6px 0px 6px 6px;
/*   关键设置 */
  background-color:#3F8BBF;
}
.window .window-body {
  border-width: 1px;
  border-style: solid;
  border-top-width: 0px;
}
.window .window-body-noheader {
  border-top-width: 1px;
}
.window .window-header .panel-icon,
.window .window-header .panel-tool {
  top: 50%;
  margin-top: -11px;
  color:#FFFFFF;
}
 .panel-tool-min {
/*   right: 1px; */
  color:#FFFFFF;
}
.window .window-header .panel-title {
/* 	关键设置 */
  font-size: 14px;
  font-family: "Microsoft YaHei" ! important;
 /*/ font-weight: bold;*/
  color: #FFFFFF;
}
/* .window .window-header .panel-tool a{ */
/* 	background-color:#FFFFFF; */
/* } */

/* 定制accordion */
.accordion {
  background: #ffffff;
  border-color: #FFFFFF;
/*   iconCls:''; */
}
.accordion .accordion-header {
  background: #FFFFFF;
  filter: none;
}
.accordion .accordion-header-selected {
  background: #95C7E9;
  font-size: 10pt;
}
.accordion .accordion-header-selected .panel-title {
  color: #fffff9;
  font-size: 10pt;
  color:#FFFFFF;
}
/* 标示箭头 */
.accordion-collapse {
  background: url('') no-repeat 0 0;
}
.accordion-expand {
  background: url('') no-repeat -16px 0;
}

需要注意的是在index.html页面引入css文件的时候，要注意引入css文件的顺序，后面的样式会覆盖掉前面的样式。

Easyui 定制window窗口

猜你喜欢