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

出处： http://www.cnblogs.com/JustinYoung/articles/798106.html

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

首先说明：
我用的是最新的AjaxControlToolkit 1.0.10606.0版本，侧边栏已经不是晃眼的n多个齿轮了。嗬嗬～

这个版本推荐实用ToolkitScriptManager来替代原来的ScriptManager，其实ToolkitScriptManager继承自ScriptManager（高人于何指点）。

今天我们来讲三个柿子控件，所谓柿子控件就是：柿子捡软的捏^-^!也就是最简单的ajax控件。

1：TextBoxWatermark
可以说是最简单的ajax控件了，标准的“柿子”,进门入手可以从此控件着手。
就有三个属性
1. TargetControlID - The ID of the TextBox to operate on 【目标文本框，就是对哪个文本框设置水印啦】
2. WatermarkText - The text to show when the control has no value 【水印文字】
3. WatermarkCssClass - The CSS class to apply to the TextBox when it has no value (e.g. the watermark text is shown).【水印样式表】

虽然简单，但是也有值得思考的地方。例如，那个WatermarkCssClass到底是怎么起作用的？如果我对原来的文本框设置了样式，那么水印样式会继承原来的文本框样式吗？如果继承了，和原来文本框有冲突的样式将会如何处理？这个自己去研究吧。我的调查结论是这样的。其实就是对水印后的文本框设置两个样式，类似于cssclass=(basicTextBoxcss WatermarkCssClass),也就是说会继承，但是会覆盖冲突的（前提是样式表的优先级相同）。

2：Slider
比较简单的，我的第二个“柿子”，比较实用的控件。
属性较多，但都比较简单
1. Minimum - Minimum value allowed. 【最小值】
2. Maximum - Maximum value allowed. 【最大值】
3. Decimals - Number of decimal digits for the value. 【int 数值，值精确到小数点后的位数】
4. Steps - Number of discrete values inside the slider's range. 【步长】
5. Value - Current value of the slider 【当前值】
6. EnableHandleAnimation - Enable/disable the handle animation. 【允许动画，初学者，例如我，可以不先理解，后面学到动画控件自然就知道了】
7. HandleAnimationDuration - Duration of the handle animation, in milliseconds. 【动画延时】
8. RailCssClass - CSS class for the slider's rail. 【轨道样式（轨道这个词翻译的真“龊”，高手指教）】
9. HandleCssClass - CSS class for the slider's handle. 【把手样式（把手这个词翻译的真“龊”，高手指教）】
10. HandleImageURL - URL of the image to display as the slider's handle. 【把手图片】
11. Length - Width/height of a horizontal/vertical slider when the default layout is used. 【轨道长度，不设置的话有默认值】
12. BoundControlID - ID of the TextBox or Label that dynamically displays the slider's value. 【值绑定控件，只能是TextBox（至少我没有试出来别的），此textbox将动态显示slider的值】
13. RaiseChangeOnlyOnMouseUp - If true, fires the change event on the extended TextBox only when the left mouse button is released.【鼠标按下弹起时，才引发第一次change事件】

值得一提的：修改BoundControlID的值可以动态反馈到slider控件上，这样如果第一个slider的BoundControlID正好是第2个slider的目标控件，就可以很容易的实现2个slider的联动。
色眼看看：其实就是2个div，外面的是rail div，里面包一个handle div，handle div里面什么都没有，就是一个图片。那就是那个小滑块。 来说说RailCssClass和HandleCssClass。先看看他们默认的样式定义：

.ajax__slider_h_rail  {} {} {} {position:relative;background:url(<%=WebResource("AjaxControlToolkit.Slider.Images.slider_h_rail.gif")%>) repeat-x;height:22px;}
.ajax__slider_h_handle  {} {} {} {position:absolute;background:url(<%=WebResource("AjaxControlToolkit.Slider.Images.slider_h_handle.gif")%>) no-repeat;height:22px;width:10px;}
.ajax__slider_v_rail  {} {} {} {position:relative;background:url(<%=WebResource("AjaxControlToolkit.Slider.Images.slider_v_rail.gif")%>) repeat-y;width:22px;}
.ajax__slider_v_handle  {} {} {} {position:absolute;background:url(<%=WebResource("AjaxControlToolkit.Slider.Images.slider_v_handle.gif")%>) no-repeat;height:10px;width:22px;}

<%=WebResource("AjaxControlToolkit.Slider.Images.slider_h_rail.gif")%>这个东西还没有开始研究，高手请提点一下。这里分别是横向和竖向的样式。RailCssClass和HandleCssClass必须两者都设，如果只设置其中之一则不起作用（我的测试结果如此）。通告设置样式可以达到特定的需求。如右图：
没错，就是那个鬼头（谷歌输入法太阴险了，差点用默认第一个词打错字了），也是slider。

3：Calendar
又是一个超级软的“柿子”。但是很实用哦。其实日期选择功能大家应该很久以前就用过javascript实现的版本吧。有了这个，就不用像以前那么麻烦了。
软柿子，属性少且易解：
1. TargetControlID - The ID of the TextBox to extend with the calendar. 【目标控件，没什么好说的，以后不再说了】
2. CssClass - Name of the CSS class used to style the calendar. 【calendar的样式表】
3. Format - Format string used to display the selected date. 【日期格式，可以参看msdn】
4. PopupButtonID - The ID of a control to show the calendar popup when clicked. If this value is not set, the calendar will pop up when the textbox receives focus.【激活calendar的按钮控件，不设置的话默认是目标控件获得焦点时激活】

这个柿子虽然简单，但是结构还比较复杂。好在结构清晰，并且各个部分都用样式类，可以很详细的定制外观。贴下DOM结构，其中cssCalendar样式表就是calendar属性CssClass的定义：


默认的各个部分的样式class可以搜索Calendar.css文件看到，命名清晰明了很容易理解。正式这些清晰明了的样式class定义为我们定制外观提供了方便。没有什么好说的，利用样式表的优先级（特殊性）可以很容易搞定，下面是个小例子：

 1 <style type="text/css">
 2 .cssCalendar {} {
 3color:green;
 4font-size:120%;
 5font-weight:bold;
 6}     
 7 .cssCalendar .ajax__calendar_container {} {
 8background-image:url("images/testcalendar.png");
 9}
10 </style>

效果图如下：


后续文章请继续关注本博客，谢谢！