基于ASP.NET MVC的JQueryUI控件开发(3) - Accordion控件设计

来源：互联网发布：淘宝摄影布光基本知识编辑：程序博客网时间：2024/06/01 22:03

先上图:

使用代码:

Code:

<%using (Html.Accordion("ad1",AccordionOption.AutoHeight|AccordionOption.Navigation)){%>
<%using (Html.AccordionPanel("Section 1")){%>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
<%}%>
<%using (Html.AccordionPanel("Section 2")){%>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
<%}%>
<%using (Html.AccordionPanel("Section 3")){%>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
<%}%>
<%using (Html.AccordionPanel("Section 4")){%>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
<%}%>
<%}%>

使用方法说明:

Code:

<%using (Html.Accordion("ad1",选项)){%>
<%using (Html.AccordionPanel("Section 1")){%>
面板1的内容
<%}%>
<%using (Html.AccordionPanel("Section 2")){%>
面板2的内容
<%}%>
.........................
<%}%>

代码和Tabs很相似，不过在这里加了一个选项设置功能，

选项使用枚举类型定义:

Code:

public enum AccordionOption {
FillSpace = 1,
AutoHeight = 2,
Navigation = 4,
Collapsible = 8,
Mouseover = 16
}

使用方法是:

<%using (Html.Accordion("ad1",AccordionOption.AutoHeight|AccordionOption.Navigation)){%>

问题是如何判断?

判断的方法是用“与”操作,即:(option & AccordionOption.AutoHeight) == AccordionOption.AutoHeight 即可

代码说明：

Html.Accordion方法:

Code:

{
return new Accordion(hh, id);
}
public static Accordion Accordion(this HtmlHelper hh, string id, string config)
{
return new Accordion(hh, id, config);
}
public static Accordion Accordion(this HtmlHelper hh, string id,AccordionOption option)
{
return Accordion(hh, id,"",option);
}
public static Accordion Accordion(this HtmlHelper hh, string id, string config, AccordionOption option)
{
string cfg = "";
cfg += "autoHeight:" + ((option & AccordionOption.AutoHeight)
== AccordionOption.AutoHeight).ToString().ToLower()+",";
cfg += "collapsible:" + ((option & AccordionOption.Collapsible)
== AccordionOption.Collapsible).ToString().ToLower() + ",";
cfg += "fillSpace:" + ((option & AccordionOption.FillSpace)
== AccordionOption.FillSpace).ToString().ToLower() + ",";
if ((option & AccordionOption.Mouseover) == AccordionOption.Mouseover)
cfg += "event:'mouseover',";
cfg += "navigation:" + ((option & AccordionOption.Navigation)
== AccordionOption.Navigation).ToString().ToLower();
if (!string.IsNullOrEmpty(config))
cfg += "," + config;
return new Accordion(hh, id, cfg);
}

Accordion类代码:

Code:

public class Accordion:IDisposable
{
HtmlHelper hh;
string id;
string config;
public Accordion(HtmlHelper hh, string id):this(hh,id,"")
{
}
public Accordion(HtmlHelper hh, string id,string config)
{
this.hh = hh;
this.id = id;
this.config = config;
hh.ViewContext.Writer.WriteLine("<div id='"+id+"'>");
}
#region IDisposable 成员
public void Dispose()
{
if (string.IsNullOrEmpty(config))
config = "{}";
else
config = "{" + config + "}";
hh.ViewContext.Writer.WriteLine("</div>");
hh.ViewContext.Writer.WriteLine("<script>$(function(){$('#"+id+"').accordion("+config+");})</script>");
}
#endregion
}

Html.AccordionPanel代码:

Code:

public static AccordionPanel AccordionPanel(this HtmlHelper hh, string title)
{
return new AccordionPanel(hh, title);
}

AccordionPanel类代码:

Code:

public class AccordionPanel:IDisposable
{
HtmlHelper hh;
string title;
public AccordionPanel(HtmlHelper hh, string title)
{
this.hh = hh;
this.title = title;
hh.ViewContext.Writer.WriteLine("<h3><a href='#'>"+title+"</a></h3>");
hh.ViewContext.Writer.WriteLine("<div>");
}
#region IDisposable 成员
public void Dispose()
{
hh.ViewContext.Writer.WriteLine("</div>");
}
#endregion
}

基本完成！