服务器之家

服务器之家 > 正文

实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上

时间:2019-10-18 11:39     来源/作者:asp.net教程网

一直想实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上,今晚终于有时间实现它。此功能就是当鼠标经过时RadioButtonList或CheckBoxList每一个Item时,让Item有特效显示,离开时,恢复原样。可以看到效果:

RadioButtonList效果:

实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上


CheckBoxList效果:

实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上

 

这资实现数据,Insus.NET准备了五行(Five Phases)

实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上

 

创建一个对象[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> 

相关文章

热门资讯

玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分 2019-06-21
男生常说24816是什么意思?女生说13579是什么意思?
男生常说24816是什么意思?女生说13579是什么意思? 2019-09-17
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情 2019-06-22
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字 2019-06-05
超A是什么意思 你好a表达的是什么
超A是什么意思 你好a表达的是什么 2019-06-06
返回顶部