Linkbutton toggled change color

[jega]

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

[stworthy]

Please override the 'l-btn-selected' CSS style as below:

Code:

<style type="text/css">
	.l-btn-selected{
		background: green;
		color: #fff;
	}
</style>

[jega]

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

[stworthy]

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>

[jega]

Working perfect. Tnx

Jesper

[thecyberzone]

What will be CSS entry if I want to change the UnSelected Button Background color ?

[stworthy]

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>

[thecyberzone]

Thanks, It works.