代码改变世界

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

2006-12-02 23:07 Jeffrey Zhao 阅读(...) 评论(...) 编辑 收藏

前言

在我之前的文章《我的开源项目: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最为重要,都可以回复给我。我需要大家的宝贵意见和建议。