基于ASP.NET的JQueryUI控件开发(4) - JQTab和JQAccordion

先上图:



设计思路:

参照ASP.NET控件MultiView的使用方法，在MultiView中可以放多个View

Code:

[Designer("System.Web.UI.Design.WebControls.MultiViewDesigner, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a")]

public class JQTabPanel : Panel

{

string headerTitle;

//标题

public string HeaderTitle

{

get

{

if (string.IsNullOrEmpty(headerTitle))

{

if (!string.IsNullOrEmpty(ToolTip))

return ToolTip;

return this.ClientID;

}

return headerTitle;

}

set { headerTitle = value; }

}

}





[ParseChildren(typeof(JQTabPanel)),

Designer("System.Web.UI.Design.WebControls.MultiViewDesigner, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"),

AspNetHostingPermission(SecurityAction.LinkDemand,

Level = AspNetHostingPermissionLevel.Minimal),

AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]

public class JQTab:Panel

{

//增加子选项卡

protected override void AddParsedSubObject(object obj)

{

if (obj is JQTabPanel)

{

this.Controls.Add(obj as Control);

}

else

{

if (!(obj is LiteralControl))

throw new Exception("只能使用JQTabPanel控件!");

}

}

//呈现之前处理

protected override void OnPreRender(EventArgs e)

{

base.OnPreRender(e);

StringBuilder sb = new StringBuilder();

sb.Append("<ul>");

for (int i = 0; i < this.Controls.Count; i++)

{

if (this.Controls[i] is JQTabPanel)

{

var tp = this.Controls[i] as JQTabPanel;

sb.AppendFormat("<li><a href='#{0}'>{1}</a></li>",tp.ClientID,tp.HeaderTitle);

}

}

sb.Append("</ul>");

Literal lit = new Literal();

lit.Text = sb.ToString();

this.Controls.AddAt(0, lit);

}

public override void RenderEndTag(HtmlTextWriter writer)

{

base.RenderEndTag(writer);



string config = "";

if (config.Length > 0)

{

config = config.Substring(0, config.Length - 1);

config = "{" + config + "}";

}

writer.Write("/n<script>$('#" + this.ClientID + "').tabs(" + config + ");</script>/n");

}

}

两个类,一个是Tab和一个TabPanel

使用时ASP.NET的标记如下：

Code:

<cc1:JQTab ID="JQTab1" runat="server">

<cc1:JQTabPanel ID="JQTabPanel1" runat="server" HeaderTitle="选项卡一">

选项卡一<br />

选项卡一<br />

选项卡一<br />

选项卡一<br />

选项卡一<br />

选项卡一

</cc1:JQTabPanel>

<cc1:JQTabPanel ID="JQTabPanel2" runat="server" HeaderTitle="选项卡二">

选项卡二<br />

选项卡二<br />

选项卡二<br />

选项卡二<br />

选项卡二<br />

选项卡二

</cc1:JQTabPanel>

<cc1:JQTabPanel ID="JQTabPanel3" runat="server" HeaderTitle="选项卡三">

选项卡三<br />

选项卡三<br />

选项卡三<br />

选项卡三<br />

选项卡三<br />

选项卡三

</cc1:JQTabPanel>

</cc1:JQTab>

生成的客户端HTML如下:

Code:

<div id="JQTab1">

<ul><li><a href='#JQTabPanel1'>选项卡一</a></li><li><a href='#JQTabPanel2'>选项卡二</a></li><li><a href='#JQTabPanel3'>选项卡三</a></li></ul><div id="JQTabPanel1">



选项卡一<br />

选项卡一<br />

选项卡一<br />

选项卡一<br />

选项卡一<br />

选项卡一



</div><div id="JQTabPanel2">



选项卡二<br />

选项卡二<br />

选项卡二<br />

选项卡二<br />

选项卡二<br />

选项卡二



</div><div id="JQTabPanel3">



选项卡三<br />

选项卡三<br />

选项卡三<br />

选项卡三<br />

选项卡三<br />

选项卡三



</div>

</div>

<script>$('#JQTab1').tabs();</script>

即可实现!

相同道理即可以实现JQAccordion功能

效果图:



ASP.NET界面效果:



源代码和Tab类似，如下：有两个类一个是JQAccordion一个是JQAccordionPanel

Code:

[Designer("System.Web.UI.Design.WebControls.MultiViewDesigner, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a")]

public class JQAccordionPanel : Panel

{

private string title;



public string Title

{

get { return title; }

set { title = value; }

}

public override void RenderBeginTag(HtmlTextWriter writer)

{

if (string.IsNullOrEmpty(title)) title = this.ClientID;

writer.Write("/n<h3><a href=/"#/">" + title + "</a></h3>/n");

base.RenderBeginTag(writer);

}

protected override void OnPreRender(EventArgs e)

{

base.OnPreRender(e);

}

}



[ParseChildren(typeof(JQAccordionPanel)),

Designer("System.Web.UI.Design.WebControls.MultiViewDesigner, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"),

AspNetHostingPermission(SecurityAction.LinkDemand,

Level = AspNetHostingPermissionLevel.Minimal),

AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]

public class JQAccordion:Panel

{



private int activeIndex = 0;



public int ActiveIndex

{

get { return activeIndex; }

set { activeIndex = value; }

}



protected override void AddParsedSubObject(object obj)

{

if (obj is JQAccordionPanel)

{

this.Controls.Add(obj as Control);

}

else

{

if(!(obj is LiteralControl))

throw new Exception("只能使用JQAccordionPanel控件!");

}

}

private Effect animated=Effect.None;



public Effect Animated

{

get { return animated; }

set { animated = value; }

}



private bool collapsible;





public bool Collapsible

{

get { return collapsible; }

set { collapsible = value; }

}



public override void RenderEndTag(HtmlTextWriter writer)

{

base.RenderEndTag(writer);



string config = "";

if (animated != Effect.None)

{

config += "animated:'" + animated.ToString().ToLower() + "',";

}

config += "active:" + activeIndex+",";

config += "collapsible:" + collapsible.ToString().ToLower() + ",";



if (config.Length > 0)

{

config = config.Substring(0, config.Length - 1);

config = "{" + config + "}";

}



writer.Write("/n<script>$('#"+this.ClientID+"').accordion("+config+");</script>/n");

}

}

ASP.NET使用代码:

Code:

<cc1:JQAccordion ID="JQAccordion1" runat="server">

<cc1:JQAccordionPanel ID="JQAccordionPanel1" runat="server" Title="测试一">

测试一<br />

测试一<br />

测试一

</cc1:JQAccordionPanel>

<cc1:JQAccordionPanel ID="JQAccordionPanel2" runat="server" Title="测试二">

测试二<br />

测试二<br />

测试二

</cc1:JQAccordionPanel>

<cc1:JQAccordionPanel ID="JQAccordionPanel3" runat="server" Title="测试三">

测试三<br />

测试三<br />

测试三

</cc1:JQAccordionPanel>

</cc1:JQAccordion>

生成客户端HTML代码:

Code:

<div id="JQAccordion1">



<h3><a href="#">测试一</a></h3>

<div id="JQAccordionPanel1">



测试一<br />

测试一<br />

测试一



</div>

<h3><a href="#">测试二</a></h3>

<div id="JQAccordionPanel2">



测试二<br />

测试二<br />

测试二



</div>

<h3><a href="#">测试三</a></h3>

<div id="JQAccordionPanel3">



测试三<br />

测试三<br />

测试三



</div>

</div>

<script>$('#JQAccordion1').accordion({active:0,collapsible:false});</script>





完工,待续...