Practical tips for implementing onmouseover and onmouseout applications to RadioButtonList or CheckBoxList controls

Always wanted to implement onmouseover and onmouseout on RadioButtonList or CheckBoxList controls, and finally have time to implement it tonight. This function is when the mouse passes RadioButtonList or CheckBoxList each item, let the item have special effects show, leave, restore the original. You can see the effect:

RadioButtonList Effect:

CheckBoxList Effect:

This capital implements the data, Insus.net prepares the five elements (Five phases)

Create an object [Five phases]:
FivePhases.cs

Copy Code code as follows:

Using System;
Using System.Collections.Generic;
Using System.Linq;
Using System.Web;

<summary>
Summary description for Fivephases
</summary>
public class Fivephases
{
private int _id;
private string _name;

public int ID
{
get {return _id;}
set {_id = value;}
}

public string Name
{
get {return _name;}
set {_name = value;}
}

Public fivephases ()
{
//
Todo:add constructor Logic here
//
}

public fivephases (int ID, string name)
{
This.id = ID;
This._name = Name;
}
}

Copy Code code as follows:

Private list<fivephases> getfivephases ()
{
list<fivephases> LISTFH = new list<fivephases> ();
Fivephases fh = new fivephases ();
Fh.id = 1;
Fh. Name = "Wood";
Listfh.add (FH);

FH = new fivephases ();
Fh.id = 2;
Fh. Name = "Fire";
Listfh.add (FH);

FH = new fivephases ();
Fh.id = 3;
Fh. Name = "soil";
Listfh.add (FH);

FH = new fivephases ();
Fh.id = 4;
Fh. Name = "Gold";
Listfh.add (FH);

FH = new fivephases ();
Fh.id = 5;
Fh. Name = "Water";
Listfh.add (FH);

return LISTFH;
}

At this point, you can pull a RadioButtonList or CheckBoxList control into a Web page, as an example of a RadioButtonList control.

Copy Code code as follows:

<asp:checkboxlist id= "radiobuttonlistfivephases" runat= "server" repeatdirection= "Horizontal" ></asp: Checkboxlist>

Then bind the data in CS:

Copy Code code as follows:

Using System.Data.OleDb;
Using System.Linq;
Using System.Web;
Using System.Web.UI;
Using System.Web.UI.WebControls;
Using Insus.net;

public partial class _default:system.web.ui.page
{
protected void Page_Load (object sender, EventArgs e)
{
if (! IsPostBack)
Data_binding ();
}

private void Data_binding ()
{
This. Radiobuttonlistfivephases.datasource = Getfivephases ();
This. Radiobuttonlistfivephases.datatextfield = "Name";
This. Radiobuttonlistfivephases.datavaluefield = "ID";
This. Radiobuttonlistfivephases.databind ();
}

}

Also have to prepare the mouse over and out style:

Copy Code code as follows:

<style type= "Text/css" >
. overstyle {
Font-weight:bold;
Color: #f00;
}

. outstyle {
Font-weight:normal;
Color:none;
}
</style>

Implementing each item in JavaScript has onmouseover and onmouseout events, so you have to write JavaScript scripts and place them in

Copy Code code as follows:

<script type= "Text/javascript" >
function Windowonload () {
var RBL = document.getElementById (' <%= radiobuttonlistfivephases.clientid%> ');
var labels = rbl.getelementsbytagname (' label ');

for (var i = 0; i < labels.length; i++) {
var lbl = labels[i];

Lbl.onmouseover = function () {
This.classname = ' Overstyle ';
};

Lbl.onmouseout = function () {
This.classname = ' Outstyle ';
};
}
}
Window.onload = Windowonload;
</script>