修改easyui panel 默认样式
有这么个需求需要修改easyui panel头部中的背景色。于是根据panel中的最终被浏览器解析出来的类名,直接修改这个css样式,设置backgroud-color这个属性,发现不管用。
于是,就根据panel最后被解析出来的样式类名,手动的建这个类名,然后把背景色修改为白色,发现也无济于事。
经过摸索有两种办法:
1,在引入的easyui.css样式表中,添加没有背景色的样式,下面的样式必须放到easui.css中去,注意:单击建一个css文件,并把下面的代码拷过来就可以了。这个缺点是严重浪费了资源,每一种样式都要添加。
e.g
.panel-header2 {
background: -webkit-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
background: -moz-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
background: -o-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
background: linear-gradient(to bottom,#EFF5FF 0,#E0ECFF 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF,endColorstr=#FFFFFF,GradientType=0);
}
function createPanel(container, groupname, id) {
var icon = 'layout-button-down';
var p = $('<div style=\"margin:1 auto 1 auto;\"></div>').appendTo($(container)).panel({
headerCls: 'panel-header2',//可自定义的类名保持一致
title: groupname,
closed: false,
width: $(container).width(),
iconCls: 'icon-tip',
doSize: false,
tools: [{
iconCls: icon,
handler: function () {
$('#g' + id).toggle("slow");
}
}]
});
return p;
}
然后在动态生成的panel使用这个类名:
还有另外一种方法就是,直接看下面的代码吧,注意这里的类名不是paenl解析之后的panel,而是默认的panel样式,$('.panel-header'),这里是动态设置样式,通过以上两种例子,可以动态修改panel里的内容信息,样式信息。
$('.panel-header').css({ "background-color": "#FFFFFF" }).css({"filter":"progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF,endColorstr=#FFFFFF,GradientType=0)"});
easyui panel提供了自定义的样式,可以动态添加。
panel属性列表不一一列举了,只说
属性:headerCls string 对面版头部引用一个CSS类。
修改easyui panel 默认样式的更多相关文章
- 修改element ui 默认样式最好的解释
KedAyAyA 17年10月 https://forum.vuejs.org/t/elementui/19171/5 首先添加了scoped的style标签会在vue-loader里进行处理 所谓的 ...
- react中修改antd的默认样式
最近在做react+antd项目.不可避免的遇到了修改antd默认样式的问题. 比如,table组件的表头背景色设置,如果直接使用元素样式,会修改整个项目的table.这里我用的方法是,给table添 ...
- 修改select的默认样式
在我们用select的时候,通常因为他的默认样式比较丑而用自己样式,那首先要去掉他的默认样式 去掉select的边框和点击时的蓝色边框 select{border: none;outline: non ...
- css3修改浏览器scroll默认样式
最近公司的新项目.前端样式采用的蚂蚁金服的antDesign. 比较喜欢antDesign.BootStrap一类简约大方的前端样式库. 但是在页面布局上.包括一些选择框.默认的scroll样式简直丑 ...
- 修改easyui datebox默认日期格式
问题描述: 根据jquery easyui datebox demo中给的示例,导入和使用datebox, 发现日期格式为: 6/22/2011, 其他的今天和关闭也是 Today, Close, 对 ...
- css修改overflow滚动条默认样式
html代码 <div class="inner"> <div class="innerbox"> <p style=" ...
- Bootstrap修改input file默认样式
html部分 <div class="form-group"> <label class="col-sm-3 control-label"&g ...
- 修改radio、checkbox、select默认样式的方法
样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...
- Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色
1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...
随机推荐
- 【DFS】Paintball(6-22)
[UVA11853]Paintball 算法入门经典第6章6-22(P175) 题目大意:有一个1000*1000的正方形战场,西南角坐标(0,0),西北角坐标(0,1000),有n个敌人,每个敌人处 ...
- 【贪心】POJ2393-Yogurt Factory
[思路] 水题,没什么好说的.每周为之后多生产的牛奶可以看作之后才生产的.每周最少生产单价=min(上周生产的最小单价+储存单价,本周生产单价).注意ans是long long,否则会WA. #inc ...
- PHP 正则表达式匹配 img ,PHP 正则提取或替换图片 img 标记中的任意属性。
PHP正则提取或替换img标记属性 PHP 正则表达式匹配 img ,PHP 正则提取或替换图片 img 标记中的任意属性. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
- linux svn 配置
#svnadmin create projectname #vi projectname/conf/svnserve.conf anon-access = noneauth-access =write ...
- FeignClient与RestTemplate的区别比较简单研究
题外:个人觉得可能还没达到那种境界,还体会不到真正的实质性区别,就好比用HttpClient可以实现的用FeignClient同样可以实现,反之也是. JAVA 项目中接口调用怎么做 ? Httpcl ...
- Oracle10g 创建一个DataBase实例
Oracle10g创建DataBase实例如下:第一步:Oracle - OraDb10g_home1 -> 配置和移植工具 -> 打开Database Configuration Ass ...
- Word中公式从单栏排版变为双栏排版后公式和编号错开了
如上图公式(2),把自己做的共识从通栏复制到期刊的双栏里就变成这样了(先复制过来参考文献,再复制正文,那么参考文献没事),原来一直搞不懂,今天把它显示所有标记发现多了个制表符(我原来以为是行标记),鼠 ...
- Fork & vfork & clone (转载)
转自:http://blog.csdn.net/zqy2000zqy/archive/2006/09/04/1176924.aspx 进程是一个指令执行流及其执行环境,其执行环境是一个系统资源的集合, ...
- js模板引擎-art-template常用
art-template javascript 模板引擎 分为原生语法和简洁语法,本文主要是讲简洁语法 基础数据渲染 输出HTML 流程控制 遍历 调用自定义函数方法 子模板引入 基础数据渲染 一.引 ...
- FORM动态LIST ITEM
DECLARE rg_list_item recordgroup; ret_code NUMBER; BEGIN --SQL里必做是以值键两个字段顺序,并且都要为字符串类型 rg_list_item ...