实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上
一直想实现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>
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();
}
}
<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>
相关推荐
-
javascript中mouseover、mouseout使用详解
本文并没有像标题说的那样,真正阻止事件元素的子元素冒泡... 只是在子元素冒泡到事件元素处时进行了一个判断,判断是否要触发事件,哦...不对 应该是是否要运行事件函数中的相关操作... 首先你可以猛戳这里: 问题的出现 注:jquery中的mouseover/out事件也有此问题 解决方法一: 在ie下有mouseenter 与 mouseleave事件来替代mouseover 和 mouseout. 网上很多说法,这两个事件只有ie支持,其他浏览器不支持. 但是我在最新版本的火狐与谷歌都支持了
-
onmouseover和onmouseout的一些问题思考
一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout. 很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout. 在上图中,对于'A'来说:当鼠标进入'A'(路径'1′)时那么就会触发'A'的onmouseover事件:接着鼠标移动到'B'(路径'2′),此时'A'会触发onmouse
-
javascript mouseover、mouseout停止事件冒泡的解决方案
在IE里有onmouseleave和onmouseenter, 而对于要兼容各大浏览器的Web开发人员来说还是一件头疼的事. 虽然网上已经有针对Mozilla Firefox的一些计策,但代码量也是不容乐观的. 想寻求比较好的解决方案,于是就翻遍了国内的大小网站,终一无所获,不得不硬着头皮去读国外网站,结果是理想的,因为W3C里有relatedTarget,于是就有了下边的解决方案: 复制代码 代码如下: function isMouseLeaveOrEnter(e, handler) { if
-
经过绑定元素时会多次触发mouseover和mouseout事件
javascript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jquery解决办法: jquery的mouseenter和mouseleave方法已经修复了这个问题,可以直接用来替代mouseover和mouseout 不过有个mouseenter和mouseleave有个小问题是,让鼠标从文档外直接进入绑定事件的元素时,mouseenter不生效 暂时解决办法是,别让绑定事件的元素靠浏览器边
-
兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
前段时间一直找这个的简短实现 网上也有很多方法 昨天发现了这种方法 感觉是用代码最少的 呵呵 ie下支持css的js ff等支持:hover 就这样了 觉得好的就顶起来 无标题文档 #b_g_date tr{ event:expression(onmouseover = function(){this.style.backgroundColor='#E3FFC9'},onmouseout = function(){this.style.backgroundColor='#FFFFFF'});
-
基于mouseout和mouseover等类似事件的冒泡问题解决方法
最近写点东西,比较闹心,一个弹出层,上边有其他元素,本意是鼠标离开弹出层时,执行一些动作,但在实际应用中,鼠标离开弹出层中的元素时,也会激活这些动作.试了各浏览器的停止事件冒泡的方法,均无效. 还是咱们javaeye里高人众多,在一个哥们博客中发现了如下代码: 复制代码 代码如下: function isMouseLeaveOrEnter(e, handler) { if (e.type != 'mouseout' && e.type != 'mouseover')
-
js ondocumentready onmouseover onclick onmouseout 样式
复制代码 代码如下: <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="doInit()" /> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="doMouseover()" /> <PUBLIC:ATTACH EVENT="onclick" ONEVENT="doClick()&q
-
实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上
一直想实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上,今晚终于有时间实现它.此功能就是当鼠标经过时RadioButtonList或CheckBoxList每一个Item时,让Item有特效显示,离开时,恢复原样.可以看到效果: RadioButtonList效果: CheckBoxList效果: 这资实现数据,Insus.NET准备了五行(Five Phases) 创建一个对象[Five Phases]:FivePhases.
-
ASP.NET中 RadioButtonList 单选按钮组控件的使用方法
RadioButtonList 控件表示一个封装了一组单选按钮控件的列表控件. 可以使用两种类型的 ASP.NET 控件将单选按钮添加到网页上:各个 RadioButton 控件或一个 RadioButtonList 控件.这两类控件都允许用户从一小组互相排斥的预定义选项中进行选择.使用这些控件,可定义任意数目的带标签的单选按钮,并将它们水平或垂直排列. 一.常用属性 属性 值 作用 RepeatDirection Horizontal|Vertical 项的布局方向:水平方向|竖直风向 Rep
-
云原生自动化应用于docker仓库私有凭据secret创建
目录 Secret Secret的创建 应用于docker私有仓库的secret 其他 Secret Secret 是一种包含少量敏感信息例如密码.令牌或密钥的对象. 这样的信息可能会被放在 Pod 规约中或者镜像中. 使用 Secret 意味着你不需要在应用程序代码中包含机密数据.(这段话来自官网) 使用过程与ConfigMap类似 与ConfigMap不同的是: ConfigMap用于明文,Secret用于加密文件,如:密码 ConfigMap是没有类型的,但是Secret有类型(type)
-
Winform控件SaveFileDialog用于保存文件
SaveFileDialog用于保存文件,供大家参考,具体内容如下 1.新建Winform窗体应用程序,命名为SaveFileDialogDemo. 2.在界面上添加一个按钮的控件(用于打开保存文件对话框),添加文本控件,用于输入要保存的内容. 3.后台代码实现: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing;
-
ASP.NET服务器端控件RadioButtonList，DropDownList，CheckBoxList的取值、赋值用法
这三个控件都有一个Items集合,可以用 RepeatLayout 和 RepeatDirection 属性来控制列表的呈现形式.如果 RepeatLayout 的值为 Table,那么将在表中呈现列表.如果设置成 Flow,那么将在没有任何表结构的情况下呈现列表.默认情况下,RepeatDirection 的值为 Vertical.将此属性设置成 Horizontal 将会使列表水平呈现. RadioButtonList:控件提供已选中一个选项的单项选择列表(数据源单选).与其他列表控件相似,
-
ASP.NET控件之RadioButtonList详解
"RadioButtonList"控件表示一个封装了一组单选按钮控件的列表控件. 可以使用两种类型的 ASP.NET 控件将单选按钮添加到网页上:各个"RadioButton"控件或一个"RadioButtonList"控件.这两类控件都允许用户从一小组互相排斥的预定义选项中进行选择.使用这些控件,可定义任意数目的带标签的单选按钮,并将它们水平或垂直排列. 命名空间:System.Web.UI.WebControls 程序集:System.Web
-
JS分页控件 可用于无刷新分页
JS分页控件,可用于无刷新分页 复制代码 代码如下: function PagerBar(recordcount, pagesize, pageindex, showpagecount) { var NumberRegex = new RegExp(/^\d+$/); this.PageIndex = 1; //页索引,当前页 if (pageindex != null && NumberRegex.test(pageindex)) this.PageIndex =