关闭

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

417人阅读 评论(0) 收藏 举报

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

效果图如下:


后续文章请继续关注本博客,谢谢! 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:217238次
    • 积分:2913
    • 等级:
    • 排名:第12086名
    • 原创:15篇
    • 转载:274篇
    • 译文:0篇
    • 评论:20条
    最新评论