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

来源：互联网发布：android电商项目源码编辑：程序博客网时间：2024/06/05 10:48

先上图:

设计思路:

参照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>

完工,待续...