编程学习

作者:JunChen 2005-5-24 9:56:57
原文:http://www.sovavsiti.cz/css/abbr.html
翻译:JunChen

版权:译者JunChen所有,转载请联系译者.
简介

<abbr>是用来为web页面上de简称(译者注:这里把简称和缩写分开而论,简称范围比缩写大,取首字母de缩写用<acronym>标签)添加适当标注deXHTML标签,WindowsdeIE浏览器暂不支持<abbr>标签. 在IE里,您可以应用CSS给<acronym>但是不能应用给<abbr>标签,IE会为<acronym>标签detitle属性显示提示,但是会忽略<abbr>标签.

这个IEdebug(或者特色)使得一些网站人员认为<abbr>标签一点用都没有,而显然这么认为是不对de.在Mozilla和Opera里还是很正确de处理了这个标签,并且它对于web内容de可读性和语义化来说非常重要.这也是我为什么一直在寻找解决方法,最终我找到了.

解决方法

本方法基于一个简单de事实:即使IE会忽略<abbr>标签,但是其他嵌套在<abbr>标签里de标签还是正常de.所以我在嵌了一个<span>标签在<abbr>里,设置<span>detitle和class属性,然后<abbr>开始变得和<acronym>标签一样了.

相关代码例子

看一下下面de相关代码,是一个简单de缩写词de例子:

<abbr title=”Cascading Style Sheets”>CSS</abbr>
现在,对比一下修改后de相关代码:

<abbr title=”Cascading Style Sheets”><span class=”abbr” title=”Cascading Style Sheets”>CSS</span></abbr>
自动操作

手动de给每一个<abbr>标签嵌入<span>显然不可能——既无聊又对Mozilla和Opera没必要.幸运de是,现在有一个自动de、基于客户端脚本de解决方法.

您可能注意到了,这个页面(译者注:原作者de页面)上de简写词语即使在IE里都会有提示,并且加了CSS样式(虚下划线和一个问号状de鼠标光标).然而您如果看一下源相关代码,您将找不到在上文提到de<span>标签.这得益于本页加载de一个简单deJavaScript:

function styleAbbr() {
var oldBodyText, newBodyText, reg
if (isIE) {
oldBodyText = document.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;
newBodyText = oldBodyText.replace(reg, ‘<ABBR $1><SPAN class=\”abbr\” $1>$2</SPAN></ABBR>’);
document.body.innerHTML = newBodyText;
}
}
window.onload = function(){
styleAbbr()
};

isIE = (document.all) ? true:false;

这段脚本会检查客户端浏览器,如果是IE,那么则替换所有de<abbr>标签为修改过de版本(嵌入了<span>).注意de是我必须使用正则表达式和innerHTML属性来取代标准deDOM方法,因为IE不能通过DOM来获取<abbr>属性.

样式化

最后看一下这个页面上使用deCSS.相当简单:

abbr, acronym, span.abbr {
cursor: help;
border-bottom: 1px dashed #000;
}
Mozilla和Opera使用abbr和acronym属性选择器,IE则使用acronym和span.abbr.无论如何,<abbr>和<acronym>都被样式化了——一个问号状de鼠标光标(当鼠标指上后)和虚下划线.

其他

1.感谢Michael Kusyn提供了JavaScript解决方法.
2.更多关于<abbr>,<acronym>标签和两者de区别,参考Craig SailadeHTML is not an acronym… (Evolt.org)

欢迎交流意见评论,可以发邮件至marek@sovavsiti.cz.

　　论坛中最常见de一个问题是:“ 我怎样在 DataGrid 中显示列合计？”. 我亲自多次为这个问题提供了示例相关代码,因此,我想在DotNetJunkies de标题中提供这么一份指南. 在这份指南中您将会学到怎样在 DataGrid 中编程实现对某一列de值进行统计,并在 DataGrid de页脚中显示其合计值.这份指南中供下载de示例中包括了 C# 和 Visual Basic.NET 两种相关代码.
　　这份指南de最终结果看起来像这样:

　　从上图可看出:
　　上面所用到de屏幕图片中de DataGrid 是一个非常典型de DataGrid .有许多控制 DataGrid 外观de属性,它使用两个 BoundColumns 来操作数据,但这并不是最重要de.做好这项工作真正重要de是使用 DataGrid.OnItemDataBound 事件.这个事件将会触发每次绑定一条记录到 DataGrid.您可以为这个事件创建一个事件处理,以操作数据记录.在这种情况下,您将会得到运行时 Price 列de合计值.
　　页脚指de是数据范围de最后一行.当这行被限定时,在事件句处理您可以得到 Price 列de运行时统计值.
　　实施:
　　首先让我找到一种方法来操作 Web 窗体输出. 这份指南中,您将使用一个 Web 窗体 (calcTotals.aspx) 以及一个类相关代码文件 (calcTotals.aspx.cs).这份指南de意图是, 类相关代码将会使用 Just-In-Time 编译器来编译. 这里是 calcTotals.aspx de相关代码:

<%@ Page Inherits=”myApp.calcTotals” Src=”20010731T0101.aspx.cs” %> AutoGenerateColumns=”False” CellPadding=”4″ CellSpacing=”0″ BorderStyle=”Solid” BorderWidth=”1″ Gridlines=”None” BorderColor=”Black” ItemStyle-Font-Name=”Verdana” ItemStyle-Font-Size=”9pt” HeaderStyle-Font-Name=”Verdana” HeaderStyle-Font-Size=”10pt” HeaderStyle-Font-Bold=”True” HeaderStyle-ForeColor=”White” HeaderStyle-BackColor=”Blue” FooterStyle-Font-Name=”Verdana” FooterStyle-Font-Size=”10pt” FooterStyle-Font-Bold=”True” FooterStyle-ForeColor=”White” FooterStyle-BackColor=”Blue” OnItemDataBound=”MyDataGrid_ItemDataBound” ShowFooter=”True”> ItemStyle-HorizontalAlign=”Right” HeaderStyle-HorizontalAlign=”Center” />

　　在 Web 窗体中您使用 @ Page 来直接声明这个页所继承de类相关代码.SRC 属性指明了类相关代码将使用 JIT 编译器来编译. Web 窗体中de大部分相关代码样式声明用来使 DataGrid 外观变得更好看.
　　最后指定de属性之一是 OnItemDataBound 属性.这个事件将会在 OnItemDataBound 事件发生时被触发.
　　Web 窗体中de DataGrid (MyGrid) 包含有两个 BoundColumns,一个是 Title ,另一个是Price. 这里将显示 Pubs 数据库(SQL Server)中 Titles 表de title 及 price 列.
　　忽略相关代码de定义
　　类相关代码在所有de地方都将使用.在类相关代码中,您可以操作两个事件:Page_Load 事件以及 MyGrid_OnItemDataBound 事件.还有一个私有方法 CalcTotal, 用它来简单de完成运行时统计de数学运算.
　　类相关代码基本结构块de起始部分:

using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; using System.Data; using System.Data.SqlClient; namespace myApp { 　public class calcTotals : Page 　{ 　　protected DataGrid MyGrid; 　　private double runningTotal = 0; 　} }

　　在类相关代码de基本结构中,您必须使用相关语句导入名字空间(namespace).在类声明中,您声明了两个变量,一个是类相关代码中映射 Web 窗体de DataGrid(MyGrid)控件de变量；一个是用来操作 DataGrid de Price 列中运行时统计de双精度值.
　　Page_Load 事件
　　在 Page_Load 事件中,您所要做de就是连接到 SQL Server 并执行一个简单de SqlCommand. 您取得了所有 Price 值>0 de title 和 price 数据.您使用 SqlCommand.ExecuteReader 方法返回一个 SqlDataReader 并将其直接绑定到 DataGrid (MyGrid).

protected void Page_Load(object sender, EventArgs e) { 　SqlConnection myConnection = new SqlConnection(”server=Localhost;database=pubs;uid=sa;pwd=;”);//创建SQL连接 　SqlCommand myCommand = new SqlCommand(”SELECT title, price FROM Titles WHERE price > 0″, myConnection);//创建SQL命令 　try 　{ 　　myConnection.Open();//打开数据库连接 　　MyGrid.DataSource = myCommand.ExecuteReader();//指定 DataGrid de数据源 　　MyGrid.DataBind();//绑定数据到 DataGrid 　　myConnection.Close();//关闭数据连接 　} 　catch(Exception ex) 　{ 　　//捕获错误 　　HttpContext.Current.Response.Write(ex.ToString()); 　} }

　　CalcTotals 方法
　　CalcTotals 方法用来处理 runningTotal 变量.这个值将以字符串形式来传递. 您需要将它解析为双精度型,然后 runningTotal 变量就成了双精度类型.

private void CalcTotal(string _price) { 　try 　{ 　　runningTotal = Double.Parse(_price); 　} 　catch 　{ 　　//捕获错误 　} }

　　MyGrid_ItemDataBound 事件
　　MyGrid_ItemDataBound 事件在数据源中每行绑定到 DataGrid 时被调用.在这个事件处理中,您可以处理每一行数据. 这里您de目de是,您将需要调用 CalcTotals 方法并从 Price 列传递文本,并用金额型格式化每一行de Price 列, 并在页脚行中显示 runningTotal de值.

public void MyDataGrid_ItemDataBound(object sender, DataGridItemEventArgs e) { 　if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 　{ 　　CalcTotal( e.Item.Cells[1].Text ); 　　e.Item.Cells[1].Text = string.Format(”{0:c}”, Convert.ToDouble(e.Item.Cells[1].Text)); 　} 　else if(e.Item.ItemType == ListItemType.Footer ) 　{ 　　e.Item.Cells[0].Text=”Total”; 　　e.Item.Cells[1].Text = string.Format(”{0:c}”, runningTotal); 　} }

　　在 MyGrid_ItemDataBound 事件句柄中,首先您得使用 ListItemType 判断当前de DataGridItem 是一个数据项还是AlternatingItem 行.如果是数据项,您调用 CalcTotals,并将 Price 列de值作为参数传递给它；然后您以金额格式对 Price 列进行格式化及着色.
　　如果 DataGridItem 是页脚,可以用金额格式显示 runningTotal.
　　总结
　　在这份指南中,您学到了怎样使用 DataGrid.OnItemDataBound 事件来实现运行时对DataGrid de某一列进行统计.使用这个事件,您可以创建一个列de合计并可对DataGrid行de页脚进行着色.