InteWidgetTookit现有三个控件的使用方法

前言

在我之前的文章《我的开源项目：InteWidgetTookit》里，对InteWidgetToolkit进行了的简单介绍。现在我已经开始使用CodePlex进行开发和管理，它的地址是：http://www.codeplex.com/InteWidget，欢迎感兴趣的朋友关注。在之前的基础上，我改进了基于Dojo开发Extender所以使用的DojoExtenderControlBase与BaseScripts.js，现在使用它们开发基于Dojo的Extender只需简单地在服务器端编写一个类，使用CustomAttribute进行一些标记即可，几乎不要写任何客户端代码，并且能够在UpdatePanel中执行。

现在我基于Dojo简单地开发了三个不同类型的Extender：ColorPalatteExtender、TooltipExtender和SplitContainerExtender。这次我将描述一下它们的使用方式。

 

使用介绍

ColorPalatteExtender

ColorPalatteExtender的作用是生成一个选择颜色的调色板。属性如下：

Icon	Member	Description
	TargetControlID	System.String类型。用于生成调色板的Panel。
	OnColorSelected	System.String类型。在某个颜色被选中时会被触发的客户端方法，然后可以通过Behavior的color属性获得当前选中的颜色。
	Size	InteWidgetToolkit.Dojo.ColorPaletteSize枚举类型。当该属性为Large时，则会产生7x10的调色板，当该属性为Small时，则会产生3x4的调色板。

代码示例如下：

<asp:Panel runat="server" ID="ColorPalattePanel"></asp:Panel>
<dojo:ColorPaletteExtender runat="server" ID="ColorPaletteExtender1"
    TargetControlID="ColorPalattePanel"
    OnColorSelected="onColorSelected"
    Size="Large" />

 

TooltipExtender

TooltipExtender的作用是为某个控件添加一个Tooltip提示。属性如下：

Icon	Member	Description
	TargetControlID	System.String类型。作为Tooltip的控件（请注意不是需要添加Tooltip的控件）的ID。
	ConnectControlID	System.String类型。需要添加Tooltip提示的控件。
	Caption	System.String类型。Tooltip内容。
	ToggleStyle	InteWidgetToolkit.Dojo.TooltipToggleStyle类型。该属性为None时Tooltip则直接显示和隐藏；该属性为Fade时Tooltip则会以淡入/淡出的方式显示和隐藏；该属性为Explode时Tooltip则会以扩大/缩小的方式显示和隐藏。
	ToggleDuration	System.Int32类型。该属性用于指定Tooltip以特殊方式显示和隐藏（ToggleStyle为Fade或Explode）时所持续的时间。

您可以通过Caption属性来指定Tooltip的内容。如下：

Hover on <span runat="server" ID="Span1">this</span>            
<span runat="server" ID="DynamicTooltip"></span>
            
<dojo:TooltipExtender runat="server" ID="DynamicTooltipExtender"
    TargetControlID="DynamicTooltip"
    ConnectControlID="Span1"
    Caption="Tooltip Content" />

您也可以通过编写HTML作为Tooltip的内容。如下：

<asp:Button runat="server" ID="Button1" Text="Hover to Show Tooltip" />
<span runat="server" ID="Tooltip1" style="padding: 5px;">
    <span style="color: Blue;">Rich</span>
    <span style="color: Red;">Text</span>
    <span style="color: Black;">Tooltip</span><br />
    <span style="font-weight: bold;">with <i>Explode</i> style</span>
</span>
<dojo:TooltipExtender ID="TooltipExtender1" runat="server"
    TargetControlID="Tooltip1"
    ConnectControlID="Button1"
    ToggleStyle="Explode"
    ToggleDuration="300" />

 

SplitContainerExtender

SplitContainerExtender的作用是将某一块区域划分为多块，类似于WinForm中的SplitContainer。属性如下：

Icon	Member	Description
	TargetControlID	System.String类型。作为Container的Panel的ID。
	Orientation	InteWidgetToolkit.Dojo.SplitOrientation枚举类型。设定分割方向为水平方向或者垂直方向。
	SizerWidth	System.Int32类型。分割栏的宽度。
	ActiveSizing	System.Boolean类型。如果该属性为True，则分割栏的移动会即时生效。如果该属性为False，则分割栏的移动会在鼠标放开后生效。
	SizeShare	System.Int32类型。该属性为SplitContainer嵌套时，内部的SplitContainer所占外部SplitContainer的百分比。

SpitContainerExtender会维护一个ContentPaneCollection，ContentPane类的属性如下：

Icon	Member	Description
	TargetControlID	System.String类型。指定SpitContainer分割出的一块的元素ID。
	SizeShare	System.String类型。分割出的所占外部SplitContainer的百分比。
	MinimumSize	System.Int32类型。分割出的某一块的最小高度或宽度（像素）。

使用SplitContainerExtender可以将一块区域分为多份，下面代码将Panel1分为上下两部分，高度分别占40%与60%：

<asp:Panel runat="server" ID="Panel1" style="width: 100%; height:100%;">
    <asp:Panel runat="server" ID="Panel2" style="overflow: auto;">
        I'm a content pane, and I'm the first child of the SplitContainer,
        so I appear on the left. My initial size is 40%, but if you adjust
        it and come back to the demo, my parent (the SplitContainer) will
        remember the size you set.
    </asp:Panel>
    <asp:Panel runat="server" ID="Panel3">
        I'm another content pane, on the right.
    </asp:Panel>
</asp:Panel>
<dojo:SplitContainerExtender runat="server" ID="SplitContainerExtender1"
    TargetControlID="Panel1" ActiveSizing="true"
    Orientation="Vertical" SizerWidth="3">
    <ContentPanes>
        <dojo:ContentPane TargetControlID="Panel2" SizeShare="40" />
        <dojo:ContentPane TargetControlID="Panel3" SizeShare="60" />
    </ContentPanes>
</dojo:SplitContainerExtender>

也能够将SplitContainerExtender嵌套使用。下面的代码将Panel1分为了左、中、右三部分，其中中间部分也使用了一个SplitContainerExtender，将其分为上下两部分：

<asp:Panel runat="server" ID="Panel1" style="width: 100%; height:100%;">
    <asp:Panel runat="server" ID="Panel2" style="overflow: auto;">
        I'm a content pane, and I'm the first child of the SplitContainer,
        so I appear on the left. My initial size is 40%, but if you adjust
        it and come back to the demo, my parent (the SplitContainer) will
        remember the size you set. On my right is a split container. 
        (The parent split container contains a child split container.)
    </asp:Panel>
    <asp:Panel runat="server" ID="InnerPanel1" style="overflow: auto;">
        <asp:Panel runat="server" ID="InnerPanel2" style="overflow: auto;">
            This is the top part of the inner split container.
        </asp:Panel>
        <asp:Panel runat="server" ID="InnerPanel3">
            ...and this is the bottom.
        </asp:Panel>
    </asp:Panel>
    <asp:Panel runat="server" ID="Panel3">
        I'm another content pane, on the right.
    </asp:Panel>
</asp:Panel>
<dojo:SplitContainerExtender runat="server" ID="SplitContainerExtender1"
    TargetControlID="Panel1" ActiveSizing="true"
    Orientation="Horizontal" SizerWidth="3">
    <ContentPanes>
        <dojo:ContentPane TargetControlID="Panel2" SizeShare="40" />
        <dojo:ContentPane TargetControlID="Panel3" SizeShare="30" />
    </ContentPanes>
</dojo:SplitContainerExtender>
<dojo:SplitContainerExtender runat="server" ID="SplitContainerExtender2"
    TargetControlID="InnerPanel1" ActiveSizing="false"
    Orientation="Vertical" SizerWidth="3" SizeShare="30">
    <ContentPanes>
        <dojo:ContentPane TargetControlID="InnerPanel2" SizeShare="50" />
        <dojo:ContentPane TargetControlID="InnerPanel3" SizeShare="50"
            MinimumSize="100"/>
    </ContentPanes>
</dojo:SplitContainerExtender>

 

效果演示

在我之前的文章《我的开源项目：InteWidgetTookit》里有部分截图。另外，目前我发布了一个TechPreview Release，其中包含了一个SampleWebSite，不过它还需要Dojo脚本库的支持。Dojo的官方网站是http://dojotoolkit.org，您可以点击这里下载到它最新的0.4版本。下载Dojo库之后，请您将压缩包内“\dojo-0.4.0-ajax\dojo.js”文件复制为网站的“~/js/dojo/dojo.js”文件，并且将压缩包内“\dojo-0.4.0-ajax\src\”目录下的所有内容复制到网站的“~js/dojo/src/”文件夹下。其中“~/js/dojo/dojo.js”为Dojo的入口文件，它的地址可以在Web.config里进行配置，但是dojo.js文件和src目录的相对位置必须保持不变，这个是Dojo的“强制要求”。

然后您可以打开解决方案文件，编译后运行SampleWebSite下的Default.aspx即可。

 

反馈

如果大家在发现了任何的Bug，或者您对于某个Extender有什么建议，甚至于您认为哪个Extender最为重要，都可以回复给我。我需要大家的宝贵意见和建议。