EasyUI实例小Demo(二)

关于页面风格的改变：

一：于之前的上两篇文章中可以看到，色彩有渐变效果。

在CSS中的渐变设置（考虑到浏览器兼容的问题）：

  background: -webkit-linear-gradient(top,  #81C0C0   0,#E0ECFF 100%);
  background: -moz-linear-gradient(top,  #81C0C0   0,#E0ECFF 100%);
  background: -o-linear-gradient(top,  #81C0C0   0,#E0ECFF 100%);
  background: linear-gradient(to bottom,  #81C0C0   0,#E0ECFF 100%);

二：笔者是修改的源码。找到easyui.css文件，修改对应的部分即可：

1，panel的css样式改变：

.panel-body {
  border-color:   #81C0C0  ;
}
.panel-header {
  background-color:   #81C0C0  ;
  background: -webkit-linear-gradient(top,  #81C0C0   0,#E0ECFF 100%);
  background: -moz-linear-gradient(top,  #81C0C0   0,#E0ECFF 100%);
  background: -o-linear-gradient(top,  #81C0C0   0,#E0ECFF 100%);
  background: linear-gradient(to bottom,  #81C0C0   0,#E0ECFF 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFF5FF,endColorstr=#E0ECFF,GradientType=0);
}

2，左边菜单导航栏

.accordion .accordion-header {
    background: -webkit-linear-gradient(top,  #81C0C0   0,#E0ECFF 100%);
  background: -moz-linear-gradient(top,  #81C0C0   0,#E0ECFF 100%);
  background: -o-linear-gradient(top,  #81C0C0   0,#E0ECFF 100%);
  background: linear-gradient(to bottom,  #81C0C0   0,#E0ECFF 100%);/**菜单栏的一级菜单栏背景色#E0ECFF*/
  filter: none;
}
.accordion .accordion-header-selected {
 /**#ffe48d;   background:     #81C0C0;*/
    background: -webkit-linear-gradient(top,#2828FF 0,#E0ECFF 100%);
  background: -moz-linear-gradient(top,#2828FF 0,#E0ECFF 100%);
  background: -o-linear-gradient(top,#2828FF 0,#E0ECFF 100%);
  background: linear-gradient(to bottom,#2828FF 0,#E0ECFF 100%);/**选中导航栏时的背景色#E0ECFF*/
}

3，菜单栏里的tree节点

.tree-node-hover {/**鼠标触发时的颜色*/
  background: #81C0C0;
  color: #000000;
}
.tree-node-selected {/**鼠标选中节点时的颜色*/
  background:#d0d0d0;/*A3D1D1*/
  color: #000000;
}

4，选中tab页时的高亮样式

.tabs li.tabs-selected a.tabs-inner {
  background-color: #ffffff;
  color: #0E2D5F;
  background: -webkit-linear-gradient(top,    #2828FF 0,#ffffff 100%); /**tab页的选中颜色*/
  background: -moz-linear-gradient(top,    #2828FF 0,#ffffff 100%);
  background: -o-linear-gradient(top,    #2828FF 0,#ffffff 100%);
  background: linear-gradient(to bottom,    #2828FF 0,#ffffff 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=    #2828FF,endColorstr=#ffffff,GradientType=0);
}

5，datagrid的行颜色，鼠标触发样式

.datagrid-row-over,
.datagrid-header td.datagrid-header-over {
  background:   #81C0C0  ; /**鼠标放在数据行上时的显示颜色*/
  color: #000000;
  cursor: default;
}
.datagrid-row-selected {
  background:#d0d0d0;/**鼠标选中数据行上时的显示颜色A3D1D1*/
  color: #000000;
}

6，工具栏和分页栏的背景色

.datagrid-toolbar{
    background: #F4F4F4; /**background: #F4F4F4;工具栏的背景色*/
}
.datagrid-pager {
  /**background: #F4F4F4;底部分页栏的背景色*/
  background: -webkit-linear-gradient(top,  #81C0C0   0,#E0ECFF 100%);
  background: -moz-linear-gradient(top,  #81C0C0   0,#E0ECFF 100%);
  background: -o-linear-gradient(top,  #81C0C0   0,#E0ECFF 100%);
  background: linear-gradient(to bottom,  #81C0C0   0,#E0ECFF 100%);
}

整体的效果可参考第一篇。想换风格的，直接替换当中的颜色代码即可。

例如background: -webkit-linear-gradient(top,  #81C0C0   0,#E0ECFF 100%);中的“#81C0C0”，将该颜色代码换成你喜欢的颜色的代码值。