jquery easyUi的样式库怎么管理的,
还有如果我一个页面有几个panel,每个panel的样式都有点不同,这样怎么改?
请问jquery easyUi 怎么更改样式?
答案:2 悬赏:20 手机版
解决时间 2021-03-19 23:48
- 提问者网友:贪了杯
- 2021-03-19 16:56
最佳答案
- 五星知识达人网友:舍身薄凉客
- 2021-03-19 18:27
easyui的css文件夹下面有一个theme文件夹,里面就是装了不同风格的样式表,每个组件都有单独一个文件,也有一个全部合起来的easyui.css,找到panel.css后就复制几个,然后再单独修改
全部回答
- 1楼网友:長槍戰八方
- 2021-03-19 19:10
首先,当然实现静态页面的代码,具体如下:
01
-
02
- gallery 03
- submit 04
06
第二步,实现css样式
页签样式:
01
ul.tabs {
02
margin: 0;
03
padding: 0;
04
float: left;
05
list-style: none;
06
height: 32px;
07
border-bottom: 1px solid #999;
08
border-left: 1px solid #999;
09
width: 100%;
10
}
11
ul.tabs li {
12
float: left;
13
margin: 0;
14
padding: 0;
15
height: 31px;
16
line-height: 31px;
17
border: 1px solid #999;
18
border-left: none;
19
margin-bottom: -1px;
20
overflow: hidden;
21
position: relative;
22
background: #e0e0e0;
23
}
24
ul.tabs li a {
25
text-decoration: none;
26
color: #000;
27
display: block;
28
font-size: 1.2em;
29
padding: 0 20px;
30
border: 1px solid #fff;
31
outline: none;
32
}
33
ul.tabs li a:hover {
34
background: #ccc;
35
}
36
html ul.tabs li.active, html ul.tabs li.active a:hover {
37
background: #fff;
38
border-bottom: 1px solid #fff;
39
}
页签内容样式:
01
.tab_container {
02
border: 1px solid #999;
03
border-top: none;
04
overflow: hidden;
05
clear: both;
06
float: left; width: 100%;
07
background: #fff;
08
}
09
.tab_content {
10
padding: 20px;
11
font-size: 1.2em;
12
}
第三步,用jquery实现页签交换功能
01
$(document).ready(function() {
02
03
//when page loads...
04
$(".tab_content").hide(); //hide all content
05
$("ul.tabs li:first").addclass("active").show(); //activate first tab
06
$(".tab_content:first").show(); //show first tab content
07
08
//on click event
09
$("ul.tabs li").click(function() {
10
11
$("ul.tabs li").removeclass("active"); //remove any "active" class
12
$(this).addclass("active"); //add "active" class to selected tab
13
$(".tab_content").hide(); //hide all tab content
14
15
var activetab = $(this).find("a").attr("href"); //find the href attribute value to identify the active tab + content
16
$(activetab).fadein(); //fade in the active id content
17
return false;
18
});
19
20
});
至此,页签功能实现,完毕!
具体可见demo:用 css+jquery实现页签
07
08
09
10
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
推荐资讯