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

先上图:

使用代码:

<%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>
        <%}%>
    <%}%>

使用方法说明:

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

      <%using (Html.AccordionPanel("Section 2")){%>
             面板2的内容
  <%}%>
   .........................
<%}%>

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

选项使用枚举类型定义:

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方法:

{
    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类代码:

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代码:

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

AccordionPanel类代码:

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
}

基本完成！

下一步准备将Jquery UI的JS,CSS,图片都封装到Dll文件中，用起来更加的方便!