65.9K
CodeProject 正在变化。 阅读更多。
Home

基于 YUI Color Picker 的 ASP.NET 颜色选择器控件

Alon.Weiss
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.53/5 (9投票s)

2009年5月31日

Ms-PL

7分钟阅读

viewsIcon

44362

downloadIcon

981

基于 YUI Color Picker 的 ASP.NET 颜色选择器控件

引言

YuiColorPicker 是一个 ASP.NET 控件，可以在页面或控件中的各种方式下使用。顾名思义，它使用了方便的 YUI Color picker 控件。对于不熟悉 YUI 的朋友们，它是一组用于构建丰富交互式 Web 应用程序的 Javascript 实用程序和控件。它的文件通过 CDN 提供，这使得速度更快，并减轻了服务器的负担。该选择器控件提供了诸如动画、内联或模态弹出行为、YUI 库的动态加载以及客户端/服务器事件等功能。我最初为一位朋友编写这个控件，他非常喜欢颜色选择器控件，但又不想处理与基于 Javascript (非服务器) 的控件相关的复杂实现。

以往的工作

在 YUI 控件和 ASP.NET 技术的集成方面已经做了大量 工作。我发现其中大多数控件都不适合我的需求。特别是，它能够在对话框容器中显示控件，与其他服务器端和客户端代码良好集成，并且消耗的带宽很少。Alexander Turlov 的 这篇文章以及一些 其他文章 提供了一些不错的纯手工制作的颜色选择器。然而，YUI 库提供的选择器具有良好的外观和感觉，并提供了一些额外的酷功能。它还允许您将需求降至最低 - 无需服务器端渲染，也无需使用 ASP.NET Ajax Control Toolkit。

设计目标与架构

设计目标是

  • 单一文件复制粘贴集成
  • 无需 <include> 任何 CSS 或 JS 文件。YUI 加载器会自动包含所有必需的资源 (请参阅下方参考文档中的 LoadYui 属性)。
  • 最小的服务器端渲染
  • 使用流行且经过测试的控件 (YUI)
  • 健壮性以及调整 YUI 控件各种功能的能力
  • 通过包含单个 .CS 文件进行项目集成
  • 浏览器和平台独立性

该控件可以放置在标记的任何位置。客户端 Javascript 代码嵌入在 C# 代码中。这样做是为了减少额外的请求，并使初始集成速度更快。未来的版本可能会允许您将此代码 (未压缩时约 3Kb) 放在您的 Web 服务器或 CDN 上。

Using the Code

基本用法

以下代码片段展示了最简单的颜色选择器使用方法

Default.aspx

...
<yui:YuiColorPicker 
      ID="YuiColorPicker1" 
      RunAt="server" 
      ColorPickerMode="Inline"
      OnColorChanged="YuiColorPicker1_ColorChanged"
      LoadYui="true"
        />
...

让我们来回顾一下上面颜色选择器的主要属性

  • ColorPickerMode 属性的值为“Inline”。这将作为文档的一部分内联渲染颜色选择器。
  • OnColorChanged 事件是一个服务器端事件，每当颜色选择器的值发生变化时，都会引发该事件。
  • LoadYui 属性的值为“true”。这也是默认值，但值得一提的是，这将使用 YUI 加载器来引导所需的 YUI 库组件。如果您已经在页面中使用 YUI 库，请确保包含 colorpicker 模块，并将其设置为“false”。对于其余的示例，将省略此属性，因为我们将始终动态加载 YUI 库。
使用 CodeRun 测试此代码

动画

以下代码片段展示了如何使用颜色选择器，并添加了一些动画效果

Default.aspx

...
<yui:YuiColorPicker 
     ID="YuiColorPicker1" 
     RunAt="server" 
     ColorPickerMode="Inline"
     OnColorChanged="YuiColorPicker1_ColorChanged"
     EnableAnimation="true"
     Color="#ff0000" 
     />
...

注释

  • EnableAnimation 属性使颜色选择器产生轻微动画：选择新颜色时，选择器将从旧颜色平滑过渡到新颜色。
  • Color 属性设置选择器的初始颜色。
使用 CodeRun 测试此代码

浮动对话框

以下代码片段展示了如何在浮动对话框中使用颜色选择器。这允许您以一种非常不引人注目的方式添加颜色选择器

Default.aspx

...
<yui:YuiColorPicker 
     ID="YuiColorPicker1" 
     RunAt="server" 
     ColorPickerMode="FloatingDialog"
     OnColorChanged="YuiColorPicker1_ColorChanged"
     LoadYui="True"
     />
...

注释

  • ColorPickerMode 属性的值为“FloatingDialog”。这会导致颜色选择器在浮动对话框中渲染。
使用 CodeRun 测试此代码

浮动模态对话框

在此示例中，选择器将在浮动的模态对话框容器中渲染。当对话框可见时，整个文档将被遮盖且无法访问

Default.aspx

...
<yui:YuiColorPicker 
     ID="YuiColorPicker1" 
     runat="server" 
     ColorPickerMode="FloatingDialog"
     ModalBehavior="true"   
     OnColorChanged="YuiColorPicker1_ColorChanged"
     />
...

注释

  • ModalBehavior 结合“FloatingDialog”模式，会产生对话框行为。
使用 CodeRun 测试此代码

客户端集成

ASP.NET YUI 颜色选择器控件为客户端代码提供了一些方便的集成点。这是通过在控件本身上公开服务器端方法来实现的

Default.aspx

...
<yui:YuiColorPicker 
      ID="YuiColorPicker1" 
      runat="server" 
      ColorPickerMode="Inline"
      ModalBehavior="false"      
      EnableAnimation="false"
      OnColorChanged="YuiColorPicker1_ColorChanged"
      UpdateMode="Continuous"
      />
...         
    <asp:Button ID="Button1" runat="server" Text="Postback" OnClick="Btn_Click"  />  
    <input type="button" ID="btnShow" runat="server" value="Show" />
    <input type="button" ID="btnHide" runat="server" value="Hide" />
    <input type="button" ID="btnGetValue" runat="server" value="ShowValue" />
...

Default.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    btnShow.Attributes["onclick"] = YuiColorPicker1.GetClientShowPickerScript();
    btnHide.Attributes["onclick"] = YuiColorPicker1.GetClientHidePickerScript();
    btnGetValue.Attributes["onclick"] = "alert('color picker value is '+" + YuiColorPicker1.GetClientGetPickerValueScript() + ");";
    YuiColorPicker1.OnClientColorChanged = "document.body.style.backgroundColor = '#'+" + YuiColorPicker1.GetClientGetPickerValueScript()+";";
}

注释

  • GetClientGetPickerValueScript() 将返回一个 Javascript 表达式 (作为字符串)，该表达式将计算为选定的颜色。
  • GetClientShowPickerScript() 将返回一个 Javascript 语句 (作为字符串)，该语句将导致颜色选择器显示。
  • GetClientHidePickerScript() 将返回一个 Javascript 语句 (作为字符串)，该语句将导致颜色选择器隐藏。
  • OnClientColorChanged 属性可以包含一些 Javascript 代码，这些代码将在选定值更改时执行。与上述方法结合使用，您可以获得一些不错的效果。
使用 CodeRun 测试此代码

多个实例

多个控件实例工作得很好。您可以 在线测试。

完整参考

属性
ColorPickerMode FloatingDialog - (默认) 颜色选择器将渲染到一个浮动的对话框容器中。
当选择器不需要一直可见和可用，或者您不希望它干扰页面布局时，请使用此选项。

Inline - 颜色选择器将渲染到文档中。
当选择器需要一直可见并作为页面的一部分可用时，请使用此选项。
UpdateMode Continuous - (默认) 当用户单击颜色时 (甚至在确认颜色之前)，颜色选择器将立即触发客户端/回调事件。
当您想要可视化或以其他方式响应选定的颜色时，请使用此选项。

OnConfirm - 颜色选择器仅在用户通过单击“确定”来批准颜色时，才会触发客户端/回调事件。
(仅当 ColorPickerMode 为 FloatingDialog 时可用)
EnableAnimation 设置为 true 时，颜色选择器将产生轻微动画：选择新颜色时，选择器将从旧颜色平滑过渡到新颜色
ModalBehavior 当使用 FloatingDialog 模式时，这将使浮动对话框变为模态，在显示时遮盖其余文档。
UseCallback 如果您使用 ASP.NET 回调 (例如在 ASP.NET Ajax 中)，将此属性设置为 true 将在值更改时触发回调。
(另请参阅 UpdateMode 属性)
RGB 这保存了选定的 RGB 值。它可以被赋值或从中读取。
IsHidden 将其设置为 false 将在下一次回发时隐藏选择器。您可以使用 GetClientShowPickerScript() 在客户端动态显示它。
ShowControls 隐藏/显示所有控件
ShowHexControls 隐藏/显示十六进制控件
ShowHexSummary 隐藏/显示十六进制摘要
ShowHSVControls 隐藏/显示 HSV 控件
ShowRGBControls 隐藏/显示 RGB 控件
ShowWebSafe 隐藏/显示 WebSafe 色板
LoadYui 这将通过 YUI Loader 动态加载 YUI 库。
如果您已经在页面中包含了 YUI，请确保包含 colorpicker 模块。
OnClientColorChanged 每当值更改时执行的 Javascript 代码。(另请参阅 UpdateMode 属性)
事件
ColorChanged 每当颜色选择器值发生变化时触发的服务器端事件。
方法
GetClientHidePickerScript 服务器端方法，返回一个 Javascript 语句 (作为字符串)，该语句将导致颜色选择器隐藏。
GetClientShowPickerScript 服务器端方法，返回一个 Javascript 语句 (作为字符串)，该语句将导致颜色选择器显示。
GetClientGetPickerValueScript 服务器端方法，返回一个 Javascript 表达式 (作为字符串)，该表达式将计算为选定的颜色。

未来版本

编写这个控件让我非常开心。我很乐意收到反馈和功能请求。在此期间，这是我的清单：

  • 添加一个 ExternalWindow 的 ColorPickerMode 选项，该选项将在一个单独的外部窗口 (例如 window.open) 中渲染选择器。
  • 添加一个 Button 的 ColorPickerMode 选项，该选项会将选择器渲染在一个按钮旁边，类似于下拉框。
  • 移除 ModalBehavior 并添加另一个 ColorPickerMode - ModalFloatingDialog。
  • 能够将 JavaScript 代码放在外部文件中，并将其放在 CDN / 您的网站上以进行缓存、最小化和 GZip 压缩。
  • 支持一些 JQuery 颜色选择器，它们可能需要更少的代码并提供一些额外的功能。
  • 与一些不错的 JQuery 弹出窗口集成。
  • 启用 AutoPostback 功能

关注点

这里有一些有用的链接： 

编码愉快！
© . All rights reserved.