Asp.net Ajax Control Toolkit设计编程备忘录(色眼窥观版)——第3回(UE专辑)

转载 2007年09月25日 22:05:00

前言:
色即设——设计,从网页设计的角度出发。因为自己的的特殊性(本身是软件工程师,但是对网页设计却有浓厚的兴趣),所以此系列文章不仅仅从编程角度出发,还将从设计的角度出发来细数AjaxControlToolkit系列控件,告诉你这些控件最终的结构表现形式、样式,还有如何修改他们的样式使之适合于你的网页整体规划。
窥,小视也——《说文》,此小视非必小视呀。此小视的意思是:水平有限,不能望其全貌,仅能管中窥豹。所以很多地方还请高人指点则个。

相关链接:
Asp.net Ajax Control Toolkit设计编程备忘录(色眼窥观版)——第1回(柿子专辑)
Asp.net Ajax Control Toolkit设计编程备忘录(色眼窥观版)——第2回(F4专辑)
Asp.net Ajax Control Toolkit设计编程备忘录(色眼窥观版)——第3回(UE专辑)
Asp.net Ajax Control Toolkit设计编程备忘录(色眼窥观版)——第4回(忍者专辑)
Asp.net Ajax Control Toolkit设计编程备忘录(色眼窥观版)——第5回(错不了专辑)
Asp.net Ajax Control Toolkit设计编程备忘录(色眼窥观版)——第6回(习惯专辑)

正文:
今天我们来讲三个可以提高UE(用户体验)的控件。看以前的关于Ajax Control Toolkit的文章,很多作者总是说,这个控件没有什么用,那个控件纯粹是鸡肋,用这个控件还不如用原来的XXX控件。这样说的朋友,多数仍然还是站在程序员的角度来设计UI,而不是从网页设计师的角度来设计UI。设计网页的时候,一定不能站在程序员的角度上,一看画面就想到了代码,就想到了实现,因为如果你这样想的话,就有可能会因为某种方法比另一种方法要多写两行代码而放弃。也许那种方法正是能更好提高用户体验的方法。我个人的想法,也是我努力的方向是这样的:如果你们公司,没有专门的技术很好的美工,网页的设计仍然依赖程序员来做的话。在设计的时候,你就应该完全放弃程序员的身份,而以设计师的身份工作,设计师要做的,是网站整体的外观策划,外观细节的把握,更重要的是:怎样的才是最方便用户的操作方式。常常惊讶于,讲UE已经讲到现在了,仍然有很多的网站用弹框的方式来提醒用户。一个网站不停的“砰~砰~”的弹框。特别是弹的都是模态框,你让那些使用多tab浏览器的用户,只能先来点了你的模态框才能浏览其他的tab。这是多么残酷的用户体验!随着网站制作成本的降低,以及web2.0用户提供资源的运营模式的成熟(以后我会专门写一篇关于web2.0网站运营模式的个人之见拙作,还请各位捧场),以后的同类型网站间的竞争,必将是如何通过良好的用户体验来留住高质量的用户,从而使用户产生更多、更好的资源。所以UE的设计是绝对不可小视的。

7:ResizableControl
一个给UE(用户体验)带来无限可能的控件。以前有人说不知道用这个来做什么,的确,如果你不从设计和用户体验的角度来看的话,这个的确没有什么作用,放大字体?那个用Slider不是更好吗?说道用户体验,顺便说一下,现在正是一个好的机遇,因为现在正是窄屏显示器向宽屏显示器过渡的时期,能让用户自由的放大、缩小区域绝对会带来用户的高体验度。下面就先来讲下属性和用法,然后举个例子来说明一下它用作提高用户体验的一个例子。
照常,先放出属性,这次还将放出它的几个事件:
1. TargetControlID - The ID of the element that becomes resizable【目标控件】
2. HandleCssClass - The name of the CSS class to apply to the resize handle【Handle(把手?)样式,这个是必须设置的!】
3. ResizableCssClass - The name of the CSS class to apply to the element when resizing【目标控件的样式】
4. MinimumWidth/MinimumHeight - Minimum dimensions of the resizable element【最小高宽】
5. MaximumWidth/MaximumHeight - Maximum dimensions of the resizable element【最大高宽】
6. OnClientResizeBegin - Event fired when the element starts being resized【事件:在开始缩放时触发】
7. OnClientResizing - Event fired as the element is being resized【事件:在缩放过程只能够触发】
8. OnClientResize - Event fired when the element has been resized【事件:在缩放结束后出发】
9. HandleOffsetX/HandleOffsetY - Offsets to apply to the location of the resize handle【Handle的坐标偏移量】

HandleCssClass
属性必须设置,一般我们会放个背景图片上去,这样来指引用户的行为。如这样的一个图片顺便提供俺珍藏n年的一套鼠标样式:点击图片下载rar压缩包文件


这里是个HandleCssClass的参考:注意:OnClientResize="ResizeClientSize"引号里面不是ResizeClientSize();

8:Rating
一个提高用户投票时用户体验度的控件。现在很多网站都有“圈子”的概念。那是因为当人们因为兴趣、信仰团聚在一起,形成一个团体的时候,相互之见有很强的潜意识的约束性和影响性,从而对这个兴趣或者信仰有极高的忠诚度和贡献度。这也是法“Lun”功这样的东西能够壮大的原因。跑题了,不说了。归位,所以网站需要拥有多个忠诚度高,贡献度也高的“圈子”,或者用网游的说法叫“帮派”( 为什么网游会有那么高的忠诚度?其实网游有很多值得网站学习的运营模式。对此有兴趣的朋友可以和我讨论)。最好是能有比较对立或者相互支持的不同的圈子。这样圈子之见的竞争、辩论和支援能很好的“粘着”住用户,从而提高整个网站的“粘着度”。而投票是一个很好的发现、建立不同价值取向和兴趣爱好圈子的途径。所以Rating必然将得到广泛的使用。小弟才疏,多说必然露馅。还是先来看看它的属性和方法吧:
1. AutoPostBack - True to cause a postback on rating item click.【是否引发回传】
2. CurrentRating - Initial rating value【初始时的值】
3. MaxRating - Maximum rating value【最大值】
4. ReadOnly - Whether or not the rating can be changed【只读】
5. StarCssClass - CSS class for a visible star【“星星”的样式,这个是必须设置的】
6. WaitingStarCssClass - CSS class for a star in waiting mode【提交等待时“星星”的样式,这个是必须设置的】
7. FilledStarCssClass - CSS class for star in filled mode【填充“星星”的样式,这个是必须设置的】
8. EmptyStarCssClass - CSS class for a star in empty mode【空白“星星”的样式,这个是必须设置的】
9. RatingAlign - Alignment of the stars (Vertical or Horizontal)【排列方式,竖向还是横向】
10. RatingDirection - Orientation of the stars (LeftToRightTopToBottom or RightToLeftBottomToTop)【“星星”的排列方向,从左(上)到右(下),还是相反】
11. OnChanged - ClientCallBack event to fire when the rating is changed【“星星”数量发生变化时引发的事件】
12. Tag - A custom parameter to pass to the ClientCallBack【TAG】
这里的“星星”加了引号,是因为这个只是个特指,它不一定一定是星星,也可以是其他的的图像。属性和方法都很简单。不多说了,只说一点:其实可以为每个“星星”设置不同的样式的。看看这个图,注意它们不同颜色的边框:具体怎么做,还要从分析它的最终展现形式来入手,先看DOM:

一个DIV,里面包了一个隐藏的Input(用来保存Tag的),一个超链,超链则有N个span(这个其实就是最大值)构成。所以每个span就是每个“星星”,而每个星星都有独立的ID。名称就是Rating控件ID加下划线Star_N这样的形式。这样以来为每个星星设置不同的样式就成为了可能。参考代码如下:

<style type="text/css">
#Rating1_Star_1
{border:1px dotted red;}
#Rating1_Star_2
{border:1px dotted blue;}
#Rating1_Star_3
{border:1px dotted aqua;}
#Rating1_Star_4
{border:1px dotted navy;}
#Rating1_Star_5
{border:1px dotted black;}
</style>

9:AutoComplete
感觉最帅,最能提高用户体验度的控件。知道用户最讨厌做什么吗?按键盘和记忆枯燥的东西绝对是其中的两个。而这个却恰恰解决了这些问题。虽然这个控件比以前的8个控件都要复杂一些,按照循序渐进的方式是不应该现在讲解的,但是既然今天的主题的UE用户体验,那么还是破例讲解一下吧。毕竟,这个控件真的很“UE”。看看google的搜索栏,163邮件的联系人地址栏就能知道它的魅力。先来看看属性,其中的两个可能会引起你的不安,但是现在不清楚没有关系,后面的文章中我们会有所讲解。
1. TargetControlID - The TextBox control where the user types content to be automatically completed【目标控件】
2. ServiceMethod - The web service method to be called. 【服务器方法】
3. ServicePath - The path to the web service that the extender will pull the word/sentence completions from. If this is not provided, the service method should be a page method.【服务路径】
4. MinimumPrefixLength - Minimum number of characters that must be entered before getting suggestions from the web service.【最小的前缀长度,也就是输入多少个字的时候才出现自动完成列表框】
5. CompletionInterval - Time in milliseconds when the timer will kick in to get suggestions using the web service.【延时事件,多少毫秒后出现自动完成列表框】
6. EnableCaching - Whether client side caching is enabled.【是否允许客户端缓存】
7. CompletionSetCount - Number of suggestions to be retrieved from the web service.【自动完成列表框列出多少条满足条件的记录数量】
顺便提一下,老的版本这个控件是有点bug的,当输入的字符很长的时候,就会看不到后面的文字,看下图:

好在新的版本中对此有所修正,可以出现横向滚动条,但是新的版本中背景会有点问题。看下图:

官方对这个控件设置了默认的样式,而且优先级很高,有些样式,我们很难修改,但是,默认样式中没有提到的样式,我们还是仍然可以自己定义的。而且只要定义了一个样式,就可以修正上面提到的那个字符过长引发的bug。效果看下图:

至于如何做到,我们还是从它的最终展示形态入手,看DOM:

其实就是一个无序列表UL(它的id就是autocomplete的id加上下划线加固定字符串”completionListElem”),里面每条记录就是一个li。只要设置了li的margin-right,我们就可以修正字符过长bug。参考样式代码如下:
<style type="text/css">
    #AutoCompleteExtender1_completionListElem
{
        font-size
:180%;
        list-style-image
:url("a.gif");    }


    #AutoCompleteExtender1_completionListElem li
{
        text-indent
:1.1em;
        margin-right
:20px;    }

</style>


今天的三个控件就是这些啦。谢谢你的关注。因为,明天就要回家领结婚证了,所以已经请了3天的假。所以此系列文章可能要暂时的停止一周时间。对关注此系列的朋友说声对不起了。不过,我回来以后,会立即恢复写作。再次谢谢大家的关注。谢谢~

keyword:ajax ResizableControl,ajax Rating,ajax AutoComplete,asp.net ajax,ajax教程,ajax基础教程,ajax技术,ajax.net,asp ajax,ajax设计,ajax网页设计,ajax表现
 

 

.handleCss{
width
:28px;
height
:28px;
background-image
:url("images/seResize.png");
overflow
:hidden;
cursor
:se-resize; /*这个别忘记设置哦*/
}

下面就UE角度来讲下此控件的使用,抛砖引玉,高人勿笑。微软提供的例子中是将这个用在缩放文章中的图片。其实这个我感觉这样不好。首先不说图片缩放会不会引起失真,传统的缩略图实现方法(用一个小的图片来链接背后大的图片)虽然比较麻烦,但是就现在中国的网络状况而言还是很实用的(昨天看到一篇文章说美国的速度是2Mb/s,还说速度已经大大落后于世界水平了,那中国呢?俺上网的时候连电骡都不敢开。哭~)。只说对辛苦排版的破坏这点就值得商榷。所以我感觉对于文章中图片的缩放并不是它很好的用处。我用它来提高宽屏显示器的体验度上。众所周知,现在宽屏液晶显示器的用户越来越多,怎么给花了大价钱的他们更好的体验度是个值得思考的问题(以前也写过一篇文章,有兴趣的可以看下:实现窄屏/宽屏的切换——给宽屏用户超值享受)。到底如何实现,看看下面的图片(点击图片看大图):

将handle的x坐标做个较大的偏移,将它移到外面,将文章的容器居中显示,调整适当的宽度(800*600时不出现横向滚动条为佳),别忘记 调整ResizableControl控件的最小高宽度。这样handle就在最右下角,实用800*600分辨率的用户虽然可以看到,也可以缩小,但是用户一般不会去放大。而在1024*768或者更高的用户来浏览时就可以很方面的放大此阅读区域。然后通过OnClientResize事件记住用户的最终拖放结果,存放起来,这样当用户再浏览其他的页面的适合就不用再拖放了,从而提高用户体验。
最后再说一下ajax控件的事件的用法。习惯javascript的用户可能会不太习惯,那是因为它的事件不要加括号和分号。只要直接写函数名就可以啦。下面是个例子:

<script language="javascript" type="text/javascript">
    
function ResizeClientSize(){
    window.status
="Resize at " + (new Date()).toString();
    }

</script>

<cc1:ResizableControlExtender OnClientResize="ResizeClientSize" ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" HandleCssClass="handleCss" ResizableCssClass="resizableCss" MaximumHeight="1200" MaximumWidth="1200" MinimumHeight="100" MinimumWidth="100" HandleOffsetX="30" HandleOffsetY="3" >
</cc1:ResizableControlExtender>

Asp.net Ajax Control Toolkit设计编程备忘录(色眼窥观版)——第3回(UE专辑)

====================================================== 注:本文源代码点此下载 =============================...

【Asp.net Ajax RC版】我给 Ajax Control Toolkit 挑刺系列(1)

====================================================== 注:本文源代码点此下载 =============================...

使用ASP.NET AJAX Control Toolkit中的NoBot控件拒绝垃圾发布程序

10.1 NoBot:拒绝机器人程序 NoBot 控件可以为页面中的表单提供类似CAPTCHA[注释1]而却无需任何用户操作的验证,以阻止机器人程序自动提交垃圾信息。   10.1.1 ...

ASP.NET AJAX Control Toolkit 控件速查

====================================================== 注:本文源代码点此下载 =============================...

讲座:ASP.NET AJAX Control Toolkit Unleashed

  • 2008年03月19日 16:08
  • 1.47MB
  • 下载

轻松掌握Ajax.net系列教程二:部署Ajax Control Toolkit

====================================================== 注:本文源代码点此下载 =============================...

ASP.NET AJAX Control Toolkit

  • 2008年10月12日 10:43
  • 2.32MB
  • 下载

轻松掌握Ajax.net系列教程二:部署Ajax Control Toolkit

要使用好Ajax.net,就要学会灵活运用Ajax.net所提供的Ajax Control Toolkit。该控件包提供了很多使用效果很炫的控件,有了它你能轻松打造一个Ajax网站。从本章开始,我们一...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Asp.net Ajax Control Toolkit设计编程备忘录(色眼窥观版)——第3回(UE专辑)
举报原因:
原因补充:

(最多只允许输入30个字)