AjaxControlToolKit--ColorPicker颜色选择器的介绍

1. Introduction:
ColorPicker是个ASP.NET AJAX的扩展控件,它可以附加到任何一个TextBox控件。通过一个弹出框的形式提供了一个能客户端的颜色选择功能。你可以点击选中弹出框的某个颜色和ColorPicker交互。TextBox是用来显示当前颜色的代码(eg:#000000),真正的颜色显示可以通过设置ColorPicker的属性来把某个颜色设置为一个div或者其它控件的背景颜色,如上面提供的图所示。
另外,如果用户手动在textbox中输入个颜色代码而不是从弹出框选择,ColorPicker也能识别出来。

2. Properties:
下面提供的是ColorPicker的所有属性,其中斜体显示的属性是可选属性。

<ajaxToolkit:ColorPickerExtender runat="server"
TargetControlID="Color2"
PopupButtonID="Image1"
SampleControlID="Sample1"
SelectedColor="33ffcc" />

a. TargetControlID: 用来使用ColorPicker扩展的TextBox的ID。
b. PopupButtonID: 当点击这个ID的控件,一般是button或者是imagebutton时弹出ColorPicker的弹出框。
c. SampleControlID: 用来显示ColorPicker选择到的颜色的控件ID。ColorPicker选择的颜色会用来设置此控件的背景颜色,官网说如果没有设置背景颜色那么即使选择了ColorPicker的颜色也没有作用。
d. PopupPosition: 用来设置ColorPicker弹出框的位置,可以设置为BottomRight,TopLeft, TopRight, Left或者Right。
e. SelectedColor: ColorPicker的初始化颜色。
f. OnClientColorSelectionChanged: 是一个javascript的函数,当ColorPicker选择的颜色改变时调用这个函数。
3. Example:
这里会提供两个例子。如上面给出的页面所示,一个使用了colorPicker来设定div的背景颜色,一个是使用了OnClicntColorSelectionChanged这个功能。
第一步: 创建一个ajaxtoolkit模板:




起个项目名字叫做AjaxControlToolKit_ColorPicker,
这里要注意:因为ColorPicker是09年新版本的ajaxtoolkit中加入的,所以你需要使用这个版本的dll。我发现09年这个版本中没有了上面这个模版,所以你可以手动把他们添加到VS的模版目录下。
第二步:为页面注册ajaxtoolkit,
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
然后我们用到的控件很简单scriptManager,button,DIV,和ColorPickExtender.如下图




ColorPick的设置如下:




可以看到OnClientColorSelectionChanged事件触发了Color_Changed这个javascript，如下:
<script type = "text/javascript">
function Color_Changed(sender)
{
sender.get_element().value = "#" + sender.get_selectedColor();
}
</script>
用来把颜色的代码填入TextBox中。

第二例子是微软官网提供的,我就稍微罗嗦几句:
第一步:在项目中右键选”Add New Item”,然后选择web form,可以默认的叫做default2.aspx。
然后注册一下AjaxControlToolKit,上一个例子有代码。
第二步:因为这个例子里面所用到饿得东西在第一个例子里都用到过,所以这里就不多说了。大家看一下这个图应该就能明白。




另外第一个ColorPicker控件使用了javascript来设定textbox的背景颜色:
<script type="text/javascript">
function colorChanged(sender) {
sender.get_element().style.color = "#" + sender.get_selectedColor();
}
</script>
4. Css Style:
<style>
/* Content Page Layout */
.demoarea {
padding:20px;
background:#FFF url(images/demotop.png) no-repeat left top;
}

.demoarea p
{
padding:5px;
}

.demoheading {
padding-bottom:20px;
color:#5377A9;
font-family:Arial, Sans-Serif;
font-weight:bold;
font-size:1.5em;
}

.demobottom {
height:8px;
background:#FFF url(images/demobottom.png) no-repeat left bottom;
}
</style>

5. SourceCode:
源码下载地址: http://dujingjing1230.download.csdn.net/
如果前面的几个控件介绍你还没有看到,可以在下面这个链接看到所哟的ajaxControlToolKit系列的控件。
http://blog.csdn.net/dujingjing1230/category/558041.aspx

下一篇介绍ComboBox控件，另外如果你有一些好的例子可以给我留下链接,大家一起学习,一起进步。^_^