EasyUI Forum
July 17, 2018, 08:11:40 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Linkbutton toggled change color  (Read 1898 times)
jega
Jr. Member
**
Posts: 87


View Profile
« on: December 21, 2016, 02:50:26 PM »

Hi.

Have searched all day for an solution. Have 4 linkbuttons with toggle:true,group:gk

Want to make the toggled button etc green, and the group buttons go back to default color as untoggled.

Regards Jesper
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3295


View Profile Email
« Reply #1 on: December 21, 2016, 05:14:54 PM »

Please override the 'l-btn-selected' CSS style as below:
Code:
<style type="text/css">
.l-btn-selected{
background: green;
color: #fff;
}
</style>
Logged
jega
Jr. Member
**
Posts: 87


View Profile
« Reply #2 on: December 21, 2016, 10:41:44 PM »

Works fine, but

Let's say i have 2 + 2 buttons in 2 groups.

Button 1 + 2 toggle:true,group:gk1

Button 3 + 4 toggle:true,group:gk2

Want gk1 group to toggle green and gk2 group toogle red
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3295


View Profile Email
« Reply #3 on: December 21, 2016, 11:43:43 PM »

Please try this code:
Code:
<style type="text/css">
.gk1 .l-btn-selected{
background: green;
color: #fff;
}
.gk2 .l-btn-selected{
background: red;
color: #fff;
}
</style>
<span class="gk1">
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'gk1'">Button1</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'gk1'">Button2</a>
</span>
<span class="gk2">
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'gk2'">Button3</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'gk2'">Button4</a>
</span>
Logged
jega
Jr. Member
**
Posts: 87


View Profile
« Reply #4 on: December 26, 2016, 05:45:47 AM »

Working perfect. Tnx

Jesper
Logged
thecyberzone
Full Member
***
Posts: 106



View Profile Email
« Reply #5 on: June 21, 2018, 09:46:13 AM »

What will be CSS entry if I want to change the UnSelected Button Background color ?
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3295


View Profile Email
« Reply #6 on: June 21, 2018, 06:27:25 PM »

Override this CSS style to define the default(unselect) button's style.

Code:
<style type="text/css">
.gk1 .l-btn{
background: #ddd;
}
.gk1 .l-btn-selected{
background: green;
color: #fff;
}
.gk2 .l-btn{
background: #fafafa;
}
.gk2 .l-btn-selected{
background: red;
color: #fff;
}
</style>
Logged
thecyberzone
Full Member
***
Posts: 106



View Profile Email
« Reply #7 on: June 27, 2018, 10:57:57 PM »

Thanks, It works.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!