给所有控件加上onmouseover
刚开始写博总觉得没什么写的呢,才疏学浅就是这样,不过这样下去好象就这样荒废了.所以决定还是充数的写下去才行啊.
项目第一阶段完成了.总算能轻松下来看点东西了,突然发现新东西真的是太多了,可是基础都还不是很牢啊,不去想那些了.老老实实从基础学起.
从别人的帖子那学来的一点东西.比如在input的onmouseover属性上绑定,用来显示当前激活的是哪个控件在ie中可以用css expression来做到这种效果,不过加载起来可以明显看到有点慢不太平滑.其实支持CSS2.1的话用element:focus是个比较好的选择.(IE6就是这样,一个奇怪的浏览器 = =)
以下是一种Javascript+Css的解决办法,收益于某位大哥(不好意思,名字忘了)
style.css
input
{
background-color: #FFFFFF;
}
.focusfld
{
background-color: #FFFFCC;
}
SetHightLight.js{
background-color: #FFFFFF;
}
.focusfld
{
background-color: #FFFFCC;
}
function SetHighlightFields(type, tag, parentId) {
var sfEls = (parentId == null) ? document.getElementsByTagName(tag) : document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
}
sfFocus = function(sfEls) {
for (var i=0; i < sfEls.length; i++) {
sfEls[i].onfocus = function() {
this.className += " focusfld";
}
sfEls[i].onblur = function() {
this.className = this.className.replace(new RegExp(" focusfld\\b"), "");
}
}
}
function window.onload(){
SetHighlightFields(sfFocus, 'input');
SetHighlightFields(sfFocus, 'textarea');
}
var sfEls = (parentId == null) ? document.getElementsByTagName(tag) : document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
}
sfFocus = function(sfEls) {
for (var i=0; i < sfEls.length; i++) {
sfEls[i].onfocus = function() {
this.className += " focusfld";
}
sfEls[i].onblur = function() {
this.className = this.className.replace(new RegExp(" focusfld\\b"), "");
}
}
}
function window.onload(){
SetHighlightFields(sfFocus, 'input');
SetHighlightFields(sfFocus, 'textarea');
}
毕竟现在在学习Asp.Net,也有一个用Asp.Net来实现的方法,其实很简单,在微软的一个例子里出现过.
一个函数
public static void SetInputControlsHighlight(Control container, string className, bool onlyTextBoxes)//将指定的样式应用于页面控件
{
foreach (Control ctl in container.Controls)//与
{
if ((onlyTextBoxes && ctl is TextBox) || ctl is TextBox || ctl is DropDownList ||
ctl is ListBox || ctl is CheckBox || ctl is RadioButton ||
ctl is RadioButtonList || ctl is CheckBoxList)
{
WebControl wctl = ctl as WebControl;
wctl.Attributes.Add("onmouseover", string.Format("this.className = '{0}';", className));
wctl.Attributes.Add("onmouseout", "this.className = '';");
}
else
{
if (ctl.Controls.Count > 0)
SetInputControlsHighlight(ctl, className, onlyTextBoxes);
}
}
}
{
foreach (Control ctl in container.Controls)//与
{
if ((onlyTextBoxes && ctl is TextBox) || ctl is TextBox || ctl is DropDownList ||
ctl is ListBox || ctl is CheckBox || ctl is RadioButton ||
ctl is RadioButtonList || ctl is CheckBoxList)
{
WebControl wctl = ctl as WebControl;
wctl.Attributes.Add("onmouseover", string.Format("this.className = '{0}';", className));
wctl.Attributes.Add("onmouseout", "this.className = '';");
}
else
{
if (ctl.Controls.Count > 0)
SetInputControlsHighlight(ctl, className, onlyTextBoxes);
}
}
}
在page_load()中调用该函数即可.
形式例如:
SetInputControlsHighlight(this, className, true);
另外加一个gridview中增加onmouseover的办法,现在这类插件比较多,其实如果只是需要这样的一种效果的话,用下面这种办法就可以了。(适当减轻程序的杂乱性,:))
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add(OnMouseOut, this.style.backgroundColor='White';this.style.color='#000000');
e.Row.Attributes.Add(OnMouseOver, this.style.backgroundColor='#FFEFD5';this.style.color='#8C4510');
//双击事件
e.Row.Attributes.Add(OnDblClick, DbClickEvent(' + e.Row.Cells[1].Text + ',' + e.Row.Cells[0].Text + '));
//单击事件
e.Row.Attributes.Add(OnClick, ClickEvent(' + e.Row.Cells[1].Text + '));
//按钮按下事件
e.Row.Attributes.Add(OnKeyDown, GridViewItemKeyDownEvent(' + e.Row.Cells[1].Text + '));
e.Row.Attributes[style] = Cursorhand;
}
}
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add(OnMouseOut, this.style.backgroundColor='White';this.style.color='#000000');
e.Row.Attributes.Add(OnMouseOver, this.style.backgroundColor='#FFEFD5';this.style.color='#8C4510');
//双击事件
e.Row.Attributes.Add(OnDblClick, DbClickEvent(' + e.Row.Cells[1].Text + ',' + e.Row.Cells[0].Text + '));
//单击事件
e.Row.Attributes.Add(OnClick, ClickEvent(' + e.Row.Cells[1].Text + '));
//按钮按下事件
e.Row.Attributes.Add(OnKeyDown, GridViewItemKeyDownEvent(' + e.Row.Cells[1].Text + '));
e.Row.Attributes[style] = Cursorhand;
}
}
最后,还是希望标准问题能早些找到合适的解决办法啊.~~