基于ASP.NET的JQueryUI控件开发(3) - JQDialog

先上图:

思路:

JavaScript JQuery Dialog 代码如下：

$("#dialog").dialog({
autoOpen: false,
show: 'blind',
hide: 'explode',
modal: true,
resizable: false
});

代码封装:

[Designer("System.Web.UI.Design.WebControls.MultiViewDesigner, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a")]
public class JQDialog:Panel
{
    bool modal = false;
    //是否是模态
    public bool Modal
    {
        get { return modal; }
        set { modal = value; }
    }

    bool vis=false;
    //是否显示
    public new  bool Visible
    {
        get
        {
            return vis;
        }
        set
        {
            vis = value;
        }
    }

    private string clientFunction="";
    //客户端函数
    public string ClientFunction
    {
        get { return clientFunction; }
        set { clientFunction = value; }
    }
    private bool showOnStart = false;
    //开始启动
    public bool ShowOnStart
    {
        get { return showOnStart; }
        set { showOnStart = value; }
    }
    //渲染之前
    protected override void OnPreRender(EventArgs e)
    {

        base.Visible = true;
        if (!vis)
            this.Style.Add("display", "none");
        base.OnPreRender(e);
    }
    public override void RenderEndTag(System.Web.UI.HtmlTextWriter writer)
    {
        base.RenderEndTag(writer);
        string config = "";
        if (showEffect != Effect.None)
        {
            config += "show:'"+showEffect.ToString().ToLower()+"',";
        }
        if (hideEffect != Effect.None)
        {
            config += "hide:'" + hideEffect.ToString().ToLower() + "',";
        }
        if (!this.Width.IsEmpty)
        {
            config += "width:'" + Width.Value + "',";
        }
        if (!this.Height.IsEmpty)
        {
            config += "height:'" + Height.Value + "',";
        }
        config += "modal:" + modal.ToString().ToLower() + ",";
        if (config.Length > 0)
        {
            config = config.Substring(0, config.Length - 1);
            config = "{" + config + "}";
        }
        if(!string.IsNullOrEmpty(clientFunction))
            writer.WriteLine("<script>function "+clientFunction+"(){$('#" + this.ClientID + "').dialog("+config+");}</script>");
        if(showOnStart)
            writer.WriteLine("<script>$(function(){$('#"+this.ClientID+"').dialog("+config+");});</script>");
    }

    private Effect showEffect=Effect.None;
    //显示时动画
    public Effect ShowEffect
    {
        get { return showEffect; }
        set { showEffect = value; }
    }
    private Effect hideEffect=Effect.None;
    //关闭时动画
    public Effect HideEffect
    {
        get { return hideEffect; }
        set { hideEffect = value; }
    }
}
//动画
public enum Effect
{
    None,
    Blind,
    Bounce,
    Clip,
    Drop,
    Explode,
    Fold,
    Highlight,
    Puff,
    Pulsate,
    Scale,
    Shake,
    Size,
    Slide
}

ASP.NET页面代码:

<cc1:JQDialog ID="JQDialog1" runat="server" ClientFunction="showdlg1"
    HideEffect="Blind" Modal="True" ShowEffect="Scale" ToolTip="我的测试一" >
    haha!
</cc1:JQDialog>

生成客户端代码:

        <div id="JQDialog1" title="我的测试一" style="display:none;">

            haha!

</div><script>function showdlg1(){$('#JQDialog1').dialog({show:'scale',hide:'blind',modal:true});}</script>

哈哈完工，待续.....