[翻译]用表单字段加亮的方式为用户提供友好的界面
2006-10-01 20:52
337 查看
摘要:这是一篇在www.asp.net找到的文章,详细地址在http://developer.bracora.com/Articles/FormHighlight.aspx,作者是Martin Millar。文章里有句话说的很好:
代码是很简单的。而当你做开发的时候,你有时候或许需要站在用户的角度想一想,因为他们每天八个小时在电脑前做这些数据录入做的时候,是多么的不容易的。
背景[/b][/b]
我们设计的程序往往会有这样的情况,就是一个表单上有很多的内容需要用户来填写,而对于一个不太熟练的用户来说,“看走眼”的事情会经常的发生。
解决方案[/b][/b]
如果当用户在表单里填写一个字段的同时我们把那个字段的颜色边一下,也就是背景颜色,那么会是这个字段明显区别于其它待填写或已填写好的字段,这样用户就可以很容易的找到当前所填写的是哪里。
在这个方案里我们把提交焦点并且出发事件的任务交给客户端的Javascript来完成,通过它,可以利用CSS来动态的改变一个控件的背景颜色。
具体实现[/b][/b]
首先,我们先看下最终效果。请留意下当前获得焦点的那个字段的颜色与其它控件的区别。
.normalfld
.focusfld
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
SetHighlightFields(Page.Form)
Me.txtForename.Focus()
End If
End Sub
Sub SetHighlightFields(ByVal frm As Control)
Dim TempCheckbox As CheckBox = Nothing
Dim TempTextBox As TextBox = Nothing
For Each tmpctl As Control In frm.Controls
If TypeOf tmpctl Is TextBox Then
TempTextBox = CType(tmpctl, TextBox)
TempTextBox.Attributes.Add("onFocus", "DoFocus(this);")
TempTextBox.Attributes.Add("onBlur", "DoBlur(this);")
End If
Next
End Sub
Sub ClearFields(ByVal frm As Control)
For Each tmpctl As Control In frm.Controls
If TypeOf tmpctl Is TextBox Then
CType(tmpctl, TextBox).Text = ""
End If
Next
End Sub
做到这里所有的工作就都完成了。用户只要一通过单击或者Tab的方式使控件获得焦点,那么这个字段就会变成高亮的状态。
总结[/b][/b]
当你设计类似那种填写表单的web程序的时候,这篇文章还是提供了几个方法的。如您所见,代码是很简单的。而当你做开发的时候,你有时候或许需要站在用户的角度想一想,因为他们每天八个小时在电脑前做这些数据录入做的时候,是多么的不容易的。
关于作者[/b][/b]
作者是英国一家大型的telecoms and internet公司的程序开发人员。他专著于基于ASP.NET和SqlServer的Web开发,并且是微软的MCSD。在其业余时间开了一个叫做bracora的web设计的公司,http://www.bracora.com,你也可以直接访问他的博客http://www.martinmillar.co.uk。
翻译心得:
翻译起来很憋嘴,但是从里面能理解作者的意思,所以干脆就是以自己的理解方式,当然,这种方式实际上是和大家交流和学习中总结出来的,出自于大家的习惯。而国外人思维跨度有时候很难被我们理解,不过,咱们能做的,就是try to understand what they want to tell。
学习心得:
正如作者所说,代码是很简单的。但是,我觉得其里面用到的这个循环编历表单上的控件的方法确实很实用。而对于Foreach的这个东西,说实在的,起初学c#那会儿,怎么的无法理解为什么要有这么一个东西,同是循环体结构却和for这样的结构有这么大的区别。看过这个代码,我想可以给很多初学者解释为什么其存在。不过,任何事物存在都是有其理由的,学习这个东西,就是这样,很多东西,你刚开始不会很理解,甚至理解不上去那个层次,而慢慢的,就会发现,原来这么设计真的是好啊。关键之处,就是不要放弃。
代码是很简单的。而当你做开发的时候,你有时候或许需要站在用户的角度想一想,因为他们每天八个小时在电脑前做这些数据录入做的时候,是多么的不容易的。
背景[/b][/b]
我们设计的程序往往会有这样的情况,就是一个表单上有很多的内容需要用户来填写,而对于一个不太熟练的用户来说,“看走眼”的事情会经常的发生。
解决方案[/b][/b]
如果当用户在表单里填写一个字段的同时我们把那个字段的颜色边一下,也就是背景颜色,那么会是这个字段明显区别于其它待填写或已填写好的字段,这样用户就可以很容易的找到当前所填写的是哪里。
在这个方案里我们把提交焦点并且出发事件的任务交给客户端的Javascript来完成,通过它,可以利用CSS来动态的改变一个控件的背景颜色。
具体实现[/b][/b]
首先,我们先看下最终效果。请留意下当前获得焦点的那个字段的颜色与其它控件的区别。
.normalfld
.focusfld
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
SetHighlightFields(Page.Form)
Me.txtForename.Focus()
End If
End Sub
Sub SetHighlightFields(ByVal frm As Control)
Dim TempCheckbox As CheckBox = Nothing
Dim TempTextBox As TextBox = Nothing
For Each tmpctl As Control In frm.Controls
If TypeOf tmpctl Is TextBox Then
TempTextBox = CType(tmpctl, TextBox)
TempTextBox.Attributes.Add("onFocus", "DoFocus(this);")
TempTextBox.Attributes.Add("onBlur", "DoBlur(this);")
End If
Next
End Sub
Sub ClearFields(ByVal frm As Control)
For Each tmpctl As Control In frm.Controls
If TypeOf tmpctl Is TextBox Then
CType(tmpctl, TextBox).Text = ""
End If
Next
End Sub
做到这里所有的工作就都完成了。用户只要一通过单击或者Tab的方式使控件获得焦点,那么这个字段就会变成高亮的状态。
总结[/b][/b]
当你设计类似那种填写表单的web程序的时候,这篇文章还是提供了几个方法的。如您所见,代码是很简单的。而当你做开发的时候,你有时候或许需要站在用户的角度想一想,因为他们每天八个小时在电脑前做这些数据录入做的时候,是多么的不容易的。
关于作者[/b][/b]
作者是英国一家大型的telecoms and internet公司的程序开发人员。他专著于基于ASP.NET和SqlServer的Web开发,并且是微软的MCSD。在其业余时间开了一个叫做bracora的web设计的公司,http://www.bracora.com,你也可以直接访问他的博客http://www.martinmillar.co.uk。
翻译心得:
翻译起来很憋嘴,但是从里面能理解作者的意思,所以干脆就是以自己的理解方式,当然,这种方式实际上是和大家交流和学习中总结出来的,出自于大家的习惯。而国外人思维跨度有时候很难被我们理解,不过,咱们能做的,就是try to understand what they want to tell。
学习心得:
正如作者所说,代码是很简单的。但是,我觉得其里面用到的这个循环编历表单上的控件的方法确实很实用。而对于Foreach的这个东西,说实在的,起初学c#那会儿,怎么的无法理解为什么要有这么一个东西,同是循环体结构却和for这样的结构有这么大的区别。看过这个代码,我想可以给很多初学者解释为什么其存在。不过,任何事物存在都是有其理由的,学习这个东西,就是这样,很多东西,你刚开始不会很理解,甚至理解不上去那个层次,而慢慢的,就会发现,原来这么设计真的是好啊。关键之处,就是不要放弃。
相关文章推荐
- 用表单字段加亮的方式为用户提供友好的界面
- PHP PEAR/HTML/QuickForm实现用户注册表单界面
- 让sql2005运行在独立用户下出现 WMI 提供程序错误的解决方式
- form表单实现用户注册界面
- sharepoint 域认证的时候给用户一个友好的登陆界面
- YII用户注册表单的实现熟悉前台各个表单元素操作方式
- 配置为域用户提供web方式修改密码
- SharedPerferences 保存数据,android提供用于保存简单配置信息,标记,用户数据的一种方式
- 用户友好的输入界面
- 【JavaEE笔记】Struts2 (二) 结果页面配置 、获取表单提交数据 、提供获取表单数据方式 、获取数据封装到集合中
- 【看别人的,学习】文本增强,再也不怕用户要修改标准界面的字段描述了
- form表单实现用户注册界面
- 用户友好的,网站设计方式总结
- 网易有道将为微信用户提供免费外语微信翻译服务
- Crash: 处理UncaughtExcption,捕获未处理异常信息,界面友好提示用户
- 通过MySQL C API界面(mysql自己提供的API方式访问mysql数据库)
- ruby on railst添加照片,翻译,美化界面及用户注册
- openwrt【703n固件】用户友好的界面配置无线连接互联网
- loner_li 机试题 一个文本文件含有如下内容,分别表示姓名和成绩:张三 90 ..提供用户一个控制台界面,允许用户输入要查询的姓名,输入姓名并且按回车以后,打印出此人的成绩...
- S2.3_Struts2_ActionGetInputFormData Action动作类接收用户输入表单数据的3种实现方式