实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上
程序员文章站
2024-03-04 13:00:35
一直想实现onmouseover和onmouseout应用于radiobuttonlist或checkboxlist控件上，今晚终于有时间实现它。此功能就是当鼠标经过时ra...
一直想实现onmouseover和onmouseout应用于radiobuttonlist或checkboxlist控件上，今晚终于有时间实现它。此功能就是当鼠标经过时radiobuttonlist或checkboxlist每一个item时，让item有特效显示，离开时，恢复原样。可以看到效果：
radiobuttonlist效果：
checkboxlist效果：
这资实现数据，insus.net准备了五行（five phases）
创建一个对象[five phases]:
fivephases.cs
复制代码 代码如下:
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;
}
}
复制代码 代码如下:
private list<fivephases> getfivephases()
{
list<fivephases> listfh = new list<fivephases>();
fivephases fh = new fivephases();
fh.id = 1;
fh.name = "木";
listfh.add(fh);
fh = new fivephases();
fh.id = 2;
fh.name = "火";
listfh.add(fh);
fh = new fivephases();
fh.id = 3;
fh.name = "土";
listfh.add(fh);
fh = new fivephases();
fh.id = 4;
fh.name = "金";
listfh.add(fh);
fh = new fivephases();
fh.id = 5;
fh.name = "水";
listfh.add(fh);
return listfh;
}
此时，你可以拉一个radiobuttonlist或是checkboxlist控件至网页中，此例以radiobuttonlist控件为例。
复制代码 代码如下:
<asp:checkboxlist id="radiobuttonlistfivephases" runat="server" repeatdirection="horizontal"></asp:checkboxlist>
然后在cs绑定数据：
复制代码 代码如下:
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();
}
}
还得准备鼠标的over与out样式：
复制代码 代码如下:
<style type="text/css">
.overstyle {
font-weight: bold;
color: #f00;
}
.outstyle {
font-weight: normal;
color: none;
}
</style>
在javascript中实现每个item有onmouseover和onmouseout事件，因此还得写javascript脚本，放于<head>内。
复制代码 代码如下:
<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>