使用CSS+SiteMap+UserControl+MasterPage实现简易的Tab

我们在做网站后台管理的时候,往往需要用到Tab形式的导航菜单,博客园如此,BlogEngine也如此,前段时间研究修改BlogEngine的时候看到其Tab实现如此容易,思路不错,但是有一点使我郁闷,他的Tab标题是取文件名,而使用中文的文件名是写程序的大忌,自然就想到了Asp.Net2.0的特性Web.sitemap,我们的数据源如何不从它来,于是简单写了下,其实很简单,只需要一个样式文件,一个SiteMap,一个通用的UserControl,一个母版页。

 

下面是核心Code)

protected   void  Page_Load( object  sender, EventArgs e)
        {
            
if  ( ! Page.IsCallback)
            {
                BindMenu();
            }
        }
    

        
///   <summary>
        
///  Binds the menu.
        
///   </summary>
         private   void  BindMenu()
        {
            SiteMapNodeCollection smnc 
=  SiteMap.CurrentNode.ParentNode.ChildNodes;

            
foreach  (SiteMapNode smn  in  smnc)
            {
                AddItem(smn.Title, smn.Url);
            }
        }

        
///   <summary>
        
///  Adds the item.
        
///   </summary>
        
///   <param name="text"> The text. </param>
        
///   <param name="url"> The URL. </param>
         public   void  AddItem( string  text,  string  url)
        {
            HtmlAnchor a 
=   new  HtmlAnchor();
            a.InnerHtml 
=   " <span> "   +  text  +   " </span> " ;
            a.HRef 
=  url;

            
if  (Request.RawUrl.EndsWith(url, StringComparison.OrdinalIgnoreCase))
                a.Attributes[
" class " =   " current " ;

            HtmlGenericControl li 
=   new  HtmlGenericControl( " li " );
            li.Controls.Add(a);
            ulMenu.Controls.Add(li);
        }

运行效果:

image

源码下载:web projectTab.zip
          web site Tab.rar

你可能感兴趣的:(master)