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文件的顺序,后面的样式会覆盖掉前面的样式。