OutLook样式的导航菜单

一.引用控件:ComponentArt.Web.UI.NavBar

二.实例(menu.cs)

public class Menu
?{
??protected ComponentArt.Web.UI.NavBar NavBar1;
??
??private bool IsFirst;

??public Menu()
??{
???//
???// TODO: 在此处添加构造函数逻辑
???//
??}

??///

??/// 获取菜单要显示的所有项
??///

??///
??///
??///
??public DataTable GetLeftMenu(int staffId, int roleId)
??{
???DataTable dt=new DataTable();
???//Staff staff = new Staff(staffId,roleId);
???SqlDataReader sdr;
???DataRow dr;

???//string admin=staff.MenuLimit;
???string admin = "99,100,101,102,103,104,106,107,108,109,111,114,116,117,118,119,121,125,126,128,131,132,133,134,136,137,138,139,140,141,142,143,145,147,148,149,150,151,152,154,156,157,158,161,163,164,165,166,168,169,170,171,172,174,175,177,178,180,181,182,183,184,191,192,193,194,196,197";

???dt.Columns.Add("NodeId",??Type.GetType("System.String"));
???dt.Columns.Add("ParentNodeId",?Type.GetType("System.String"));
???dt.Columns.Add("Text",???Type.GetType("System.String"));
???dt.Columns.Add("NavigateUrl",?Type.GetType("System.String"));
???dt.Columns.Add("LookId",??Type.GetType("System.String"));
???dt.Columns.Add("ImageUrl",??Type.GetType("System.String"));
???dt.Columns.Add("HoverImageUrl", Type.GetType("System.String"));
???sdr = (SqlDataReader)DBHelper.Instance.ExecuteReader(
????DBHelper.Instance.ConnectionString,
????CommandType.StoredProcedure,
????"P_ObjLeftMenuGet",
????new SqlParameter("@Param", admin));
???while (sdr.Read())
???{
????dr=dt.NewRow();

????dr[0]?=?sdr["MenuId"].ToString();
????dr[1]?=?sdr["UpMenu"].ToString();
????dr[2]?=?sdr["MenuName"].ToString();
????dr[3]?=?sdr["Url"].ToString();
????if (dr[1].ToString()=="0")
????{
?????dr[4]="TopItemLook";
????}
????dr[5]=sdr["MenuImg"].ToString();
????dr[6]=sdr["MenuImg2"].ToString();

????dt.Rows.Add(dr);
???}

???return dt;
??}

??///

??/// 添加子项
??///

??///
??///
??///
??private void PopulateSubNavBar(ref DataTable dt,string MyIf, ComponentArt.Web.UI.NavBarItem item)
??{
???string MyFilter="ParentNodeId="+MyIf;
???
???foreach (DataRow childRow in dt.Select(MyFilter))
???{
????ComponentArt.Web.UI.NavBarItem ChildItem = new ComponentArt.Web.UI.NavBarItem();
????ChildItem.Text = childRow["Text"].ToString();
???
????ChildItem.NavigateUrl = "otherMenu.aspx?MenuId=" + childRow["NodeId"].ToString();
????item.Items.Add(ChildItem);
???}
??}

??///

??/// 创建项
??///

??///
??///
??private ComponentArt.Web.UI.NavBarItem CreateItem(DataRow dbRow)
??{
???ComponentArt.Web.UI.NavBarItem item = new ComponentArt.Web.UI.NavBarItem();
???item.Text = dbRow["Text"].ToString();
???item.LookId="TopItemLook";
???
???if (IsFirst)
???{
????item.Expanded=true;
????IsFirst=false;
???}
???item.SubGroupItemSpacing=15;
???return item;
??}

??///

??/// 初使化一个NavBar
??///

??/// ?????初使化后的NavBar??????
??public ComponentArt.Web.UI.NavBar instantiateNavBar(int staffId, int roleId)
??{
???// Create a new NavBar instance
???NavBar1 = new ComponentArt.Web.UI.NavBar();
???
???// Create the TopItemLook instance and add it to the ItemLooks collection
???ComponentArt.Web.UI.ItemLook TopItemLook = new ComponentArt.Web.UI.ItemLook();
???TopItemLook.LookId = "TopItemLook";
???TopItemLook.CssClass = "TopItem";
???TopItemLook.HoverCssClass = "TopItemHover";
???TopItemLook.ActiveCssClass = "TopItemActive";
???NavBar1.ItemLooks.Add(TopItemLook);

???// Create the DefaultItemLook instance and add it to the ItemLooks collection
???ComponentArt.Web.UI.ItemLook DefaultItemLook = new ComponentArt.Web.UI.ItemLook();
???DefaultItemLook.LookId = "DefaultItemLook";
???DefaultItemLook.ImageUrl = "folder.gif";
???DefaultItemLook.CssClass = "Level2Item";
???DefaultItemLook.HoverCssClass = "Level2ItemHover";
???NavBar1.ItemLooks.Add(DefaultItemLook);
???
???DataTable dt=new DataTable();
???dt=GetLeftMenu(staffId, roleId);
???int a=dt.Rows.Count;
???foreach(DataRow dbRow in dt.Rows)
???{
????if(dbRow["ParentNodeId"].ToString()=="0")
????{???
?????ComponentArt.Web.UI.NavBarItem newItem = CreateItem(dbRow);
?????NavBar1.Items.Add(newItem);
?????PopulateSubNavBar(ref dt,dbRow["NodeId"].ToString(),newItem);
????}
???}

???// Set NavBar properties
???NavBar1.ID = "NavBar1";
???NavBar1.CssClass = "NavBar";
???NavBar1.DefaultItemLookId = "DefaultItemLook";
???NavBar1.ImagesBaseUrl = "images/menu";
???NavBar1.ScrollUpImageUrl = "scrollup.gif";
???NavBar1.ScrollDownImageUrl = "scrolldown.gif";
???NavBar1.ScrollUpHoverImageUrl = "scrollup_hover.gif";
???NavBar1.ScrollDownHoverImageUrl = "scrolldown_hover.gif";
???NavBar1.ScrollUpActiveImageUrl = "scrollup_active.gif";
???NavBar1.ScrollDownActiveImageUrl = "scrolldown_active.gif";
???NavBar1.ScrollUpImageWidth = 16;
???NavBar1.ScrollUpImageHeight = 16;
???NavBar1.ScrollDownImageWidth = 16;
???NavBar1.ScrollDownImageHeight = 16;
???NavBar1.ExpandSinglePath = true;
???NavBar1.FullExpand = true;
???NavBar1.DefaultTarget="OtherMenuFrame";
???NavBar1.Width = int.Parse("130");
???NavBar1.Height = int.Parse("688");

???return NavBar1;
??}

三.加载

NavigateBar.aspx

private void Page_Load(object sender, System.EventArgs e)
??{
???// 在此处放置用户代码以初始化页面
???if (!IsPostBack)
???{
????Menu mu = new Menu();

????PlaceHolder1.Controls.Add(
?????mu.instantiateNavBar(19,38));
???}
??}

四.样式

navstyle.css

----------

.NavBar
{
? background-color: #DBEAF5;
? border: 1px solid #9D9DA1;
? cursor: default;
}

.TopItem
{
?border-right: #9d9da1 1px solid;
?border-top: white 1px solid;
?font-size: 10pt;
?padding-bottom: 4px;
?border-left: white 1px solid;
?cursor: hand;
?color: white;
?padding-top: 4px;
?border-bottom: #9d9da1 1px solid;
?background-color: #4791c5;
?text-align: center;
}

.TopItemHover
{
?font-size: 10pt;
?border-right: #9d9da1 2px solid;
?border-top: white 2px solid;
?padding-bottom: 3px;
?border-left: white 2px solid;
?cursor: hand;
?padding-top: 3px;
?border-bottom: #9d9da1 2px solid;
?background-color: #8FC1E6;
?text-align: center;
}

.TopItemActive
{
?font-size: 10pt;
?border-right: white 2px solid;
?border-top: #9d9da1 2px solid;
?padding-bottom: 3px;
?border-left: #9d9da1 2px solid;
?cursor: hand;
?padding-top: 3px;
?border-bottom: white 2px solid;
?text-align: center;
}

.Level2Item
{
?font-size: 9pt;
?cursor: hand;
?color: #0000cc;
?text-align: center;
}

.Level2ItemHover
{
?font-size: 9pt;
?cursor: hand;
?text-align: center;
}

.Level2Group
{
?font-size: 9pt;
?border-top-color: #f0f1f5;
?padding-top: 5px;
}

.Empty
{
}