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

先上效果图:

001.png (大小:18.9 K 下载次数:0)

视图代码:

002.png (大小:6.2 K 下载次数:0)

使用方法:
------------------------------------------------------------------
Html.Tabs(ID){
   Html.Header(){
           Html.Header(ID,Title);
           Html.Header(ID,Title);
   }
  HTML.Tab(ID);
  HTML.Tab(ID);
}
即可实现JqueryUI Tabs功能。
代码说明:
------------------------------------------------------------------
Html.Tabs(ID):代码
------------------------------------------------------------------
       public static Tabs Tabs(this HtmlHelper hh, string id, string config)
       {
           return new Tabs(hh, id, config);
       }
------------------------------------------------------------------
Tabs类代码:
------------------------------------------------------------------
   public class Tabs:IDisposable
   {
       HtmlHelper hh;
       string id;
       string config;
       public Tabs(HtmlHelper hh, string id,string config)
       {
           this.hh = hh;
           this.id = id;
           this.config = config;          
           hh.ViewContext.Writer.WriteLine("<div id=/"" + id + "/">");
       }
       public Tabs(HtmlHelper hh, string id):this(hh,id,"")
       {  
       }
       #region IDisposable 成员
       public void Dispose()
       {
           hh.ViewContext.Writer.WriteLine("</div>");
           if (string.IsNullOrEmpty(config))
               config = "{}";
           else
               config = "{" + config + "}";
           hh.ViewContext.Writer.WriteLine("<script>$(function(){$('#"+id+"').tabs("+config+");})</script>");
       }
       #endregion
   }
------------------------------------------------------------------
Html.Header()代码:
------------------------------------------------------------------
       public static TabHeader TabHeader(this HtmlHelper hh)
       {
           return new TabHeader(hh);
       }
------------------------------------------------------------------
TabHeader类代码:
------------------------------------------------------------------
   public class TabHeader : IDisposable
   {
       HtmlHelper hh;
       public TabHeader(HtmlHelper hh)
       {
           this.hh = hh;
           hh.ViewContext.Writer.WriteLine("<ul>");
       }
       #region IDisposable 成员
       public void Dispose()
       {
           hh.ViewContext.Writer.WriteLine("</ul>");
       }
       #endregion
   }
------------------------------------------------------------------
Html.Header(ID,Title);代码
------------------------------------------------------------------
       public static string TabHeader(this HtmlHelper hh, string id, string title)
       {
           return "<li style='margin-bottom:1px'><a href=/"#" + id + "/">" + title + "</a></li>";
       }
------------------------------------------------------------------
HTML.Tab(ID);代码:
------------------------------------------------------------------
       public static Tab Tab(this HtmlHelper hh, string id)
       {
           return new Tab(hh, id);
       }
------------------------------------------------------------------
Tab类代码:
------------------------------------------------------------------
   public class Tab : IDisposable
   {
       HtmlHelper hh;
       public Tab(HtmlHelper hh, string id)
       {
           this.hh = hh;
           hh.ViewContext.Writer.WriteLine("<div id=/""+id+"/">");
       }
       #region IDisposable 成员
       public void Dispose()
       {
           hh.ViewContext.Writer.WriteLine("</div>");
       }
       #endregion
   }
------------------------------------------------------------------
希望对大家有帮助.