酷徒LOGO
0 0 评论
文章标签:BASE  YUI  挖掘  颜色选择器  pick  asp-net  asp  color  

介绍

YuiColorPicker是一个 ASP.NET 控件,可以在页或者控件的各种方式中使用。 就像 NAME 所暗示的那样,它使用了方便的YUI 颜色选取器控件。 对于那些不熟悉 YUI 插件的人来说,它是一组Javascript工具和控件,用于构建丰富交互的web应用程序。 它的文件通过插件提供,这使它变得更快,并且减轻了服务器的负载。 选择器控件提供诸如动画。inline 或者模式弹出行为。YUI 库和客户端/服务器事件动态加载等功能。 我最初为一个颜色选择器控制写了这个控件,但并不希望与基于javascript的( 非服务器) 控件混乱。

以前的工作

在控件和 ASP.NET 技术集成方面已经有很多工作。 我发现这些控件中的大多数都不适合我的需要。 具体来说,可以在对话容器中显示控件,与它的他服务器和客户端代码集成,并使用小带宽。 这篇文章由亚历山大Turlov和一些其他文章提供了一些漂亮的手工挑选颜色选取器。 但是,YUI 库提供的选择器有一个好看的&感觉,提供了一些额外的。 此外,还允许你将需求保持到最低- 不需要服务器端呈现和使用 ASP.NET Ajax控件工具包

设计目标和 architectrue

设计目标如下:

  • 单个文件copy-and-paste集成
  • 对 <没有任何要求包括> 或者JS文件。 YUI 加载程序动态包含所有必需的资源( 参见下面参考文档中的LoadYui属性)。
  • 最小服务器端呈现
  • 使用受欢迎的和经过测试的控制( YUI )
  • 健壮性和调整 YUI 控件各种特性的能力
  • 通过包含单个. CS 文件的项目集成
  • 浏览器和平台独立性

控件可以放置在标记的任何位置。 客户端JavaScript代码嵌入在 C# 代码中。 这样做可以减少进一步的请求,并使初始集成快速。 未来版本可以能允许你将这里代码( ~3Kb未压缩) 放在你的web服务器。

使用代码

基本使用方法

以下代码段演示如何以最简单的形式使用颜色选取器:

Default.aspx:


...


<yui:YuiColorPicker 



      ID="YuiColorPicker1" 



      RunAt="server" 



      ColorPickerMode="Inline"



      OnColorChanged="YuiColorPicker1_ColorChanged"



      LoadYui="true"



        />


...



让我们浏览上面颜色选取器的主要属性:

  • ColorPickerMode 属性的值为"行内"。 这将使颜色选取器 inline 成为文档的一部分。
  • 每次使用颜色选择器时都会引发一个服务器端事件,这将引发服务器端事件。
  • LoadYui 属性的值为"true"。 这也是默认值,但是值得注意的是,这将使用 YUI 加载程序来 Bootstrap 所需的YUI 库组件。 如果你已经在页面中使用了 YUI 库,请确保包含 colorpicker MODULE,并将它的设置为"false"。 对于它的余的示例,将省略这里属性,因为我们将动态地加载 YUI 库。
用CodeRun代码测试这里代码。

动画

以下代码段演示如何使用颜色选取器,并添加一些动画:

Default.aspx:


...


<yui:YuiColorPicker 



     ID="YuiColorPicker1" 



     RunAt="server" 



     ColorPickerMode="Inline"



     OnColorChanged="YuiColorPicker1_ColorChanged"



     EnableAnimation="true"



     Color="#ff0000" 



     />


...



注释:

  • EnableAnimation属性会使颜色选取器稍微具有动画效果: 选择新颜色时,选取器将从旧颜色平滑移动到新颜色。
  • Color属性设置选取器的初始颜色。
用CodeRun代码测试这里代码。

浮动对话框

以下代码Fragment显示如何在浮动对话框中使用颜色选取器。 这样可以非常非侵入性的方式添加颜色选取器:

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"



     />


...



注释:

  • "floatingdialog"模式一起使用的ModalBehavior会导致对话框行为。
用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代码测试这里代码。

多个实例

控件的多个实例很好地工作。 你可以在网上测试它。

完整 referece

属性英镑事件方法
ColorPickerModeFloatingDialog - ( 默认值) 颜色选取器将呈现到浮动对话框容器中。
如果选取器不需要不断可见和可用,或者你不希望它干扰页面的布局,则使用这里选项。

Inline Inline color颜色选取器将呈现到文档中。
当选取器需要持续可见且可以用作页面的一部分时使用这里选项。
UpdateMode连续 - ( 默认值) 将在用户单击颜色( 甚至在确认颜色之前) 时立即触发客户端/回调事件。
当你想要可视化或者响应所选颜色时使用这里选项。

OnConfirm - 当用户通过单击'行'来批准颜色时,颜色选取器将只触发客户端/回调事件。
( 仅在ColorPickerMode为FloatingDialog时可用)
EnableAnimation当设置为 true 时,颜色选取器将被稍微设置动画: 选择新颜色时,选取器将从旧颜色平滑移动到新颜色
ModalBehavior使用FloatingDialog模式时,这将使浮动对话框模态,屏蔽文档的它的余部分,同时显示。
UseCallback如果使用 ASP.NET 回调( 在 ASP.NET Ajax中例如),将这里属性设置为 true 将在值更改时触发回调
( 另请参见UpdateMode属性)
RGB这将保存选定的RGB值。 它可以被分配给或者从。
IsHidden将这里设置设置为 false 将隐藏下一个 postback 上的选取器。 你可以使用英镑 GetClientShowPickerScript ( ) 在客户端动态显示。
ShowControls隐藏/显示整个控件集
ShowHexControls隐藏/显示十六进制控件
ShowHexSummary隐藏/显示十六进制摘要
ShowHSVControls隐藏/显示hsv控件
ShowRGBControls隐藏/显示rgb控件
ShowWebSafe隐藏/显示网页安全样本
LoadYui这将导致通过 YUI 加载器动态加载 YUI 库。
如果你在页面中已经包含了 YUI,请确保包含 colorpicker colorpicker MODULE。
OnClientColorChanged当值更改时将执行的JavaScript代码。 ( 请参见 UpdateMode 属性)
ColorChanged当颜色选择器值更改时将激发的服务器端事件。
GetClientHidePickerScript返回( 作为字符串) 语句的服务器端方法,该语句将导致颜色选取器隐藏。
GetClientShowPickerScript返回( 作为字符串) 语句的服务器端方法,该语句将导致颜色选取器显示。
GetClientGetPickerValueScript返回将计算为选定颜色的javascript表达式( 作为字符串)的服务器端方法。

未来版本

我写这个控件有很多乐趣。 我很高兴能得到一些反馈和功能要求。 同时,这是我的列表:

  • 将在单独的外部窗口( 比如 window.open ) 中呈现选择器的ExternalWindow的附加ColorPickerMode选项。
  • 将在按钮旁边呈现选取器的按钮的附加ColorPickerMode选项,类似于下拉框。
  • 删除ModalBehavior并添加另一个 ColorPickerMode - ModalFloatingDialog。
  • 能够将JavaScript代码放入外部文件中,并将它的放在/你的网站上进行缓存。缩小和GZipping操作。
  • 提供一些支持更少代码的 JQuery颜色选取器插件,并提供一些额外的功能。
  • 一些漂亮的 JQuery弹出窗口集成。
  • 启用自动回滚功能

Points of Interest

下面是一些有用的链接:

快乐编码


文章标签:BASE  控制  COL  asp  asp-net  color  pick  挖掘  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备17041772号-2  |  如果智培  |  酷兔英语  |  帮酷