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

前言：
色即设——设计，从网页设计的角度出发。因为自己的的特殊性（本身是软件工程师，但是对网页设计却有浓厚的兴趣），所以此系列文章不仅仅从编程角度出发，还将从设计的角度出发来细数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的参考：

.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>

注意：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表现