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

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

效果图如下:


后续文章请继续关注本博客,谢谢! 
阅读更多
个人分类: AJAX
上一篇使用Ajax实现换肤功能
下一篇Asp.net Ajax Control Toolkit设计编程备忘录(色眼窥观版)——第2回(F4专辑)
想对作者说点什么? 我来说一句

asp.net AJAX Control Toolkit

2007年11月22日 3.36MB 下载

ASP.NET AJAX Control Toolkit

2008年11月17日 1.26MB 下载

ASP.NET AJAX Control Toolkit 控件说明

2010年03月18日 238KB 下载

没有更多推荐了,返回首页

关闭
关闭