EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jega on December 21, 2016, 02:50:26 PM



Title: Linkbutton toggled change color
Post by: jega 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


Title: Re: Linkbutton toggled change color
Post by: stworthy 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>


Title: Re: Linkbutton toggled change color
Post by: jega 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


Title: Re: Linkbutton toggled change color
Post by: stworthy 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>


Title: Re: Linkbutton toggled change color
Post by: jega on December 26, 2016, 05:45:47 AM
Working perfect. Tnx

Jesper


Title: Re: Linkbutton toggled change color
Post by: thecyberzone on June 21, 2018, 09:46:13 AM
What will be CSS entry if I want to change the UnSelected Button Background color ?


Title: Re: Linkbutton toggled change color
Post by: stworthy 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>


Title: Re: Linkbutton toggled change color
Post by: thecyberzone on June 27, 2018, 10:57:57 PM
Thanks, It works.