zoukankan      html  css  js  c++  java

  • Asp.net 导航条【1】

    PHP比较成熟的开放的源代码比较多，比方说PrestaShop，比方说Discuz!......

    虽然语言不同，但基本原理是一样的，有时间的话读一读，对学习ASP.NET应该是非常有好处的（唉，什么时候ASP.NET也能有这么多成熟的，流行的开放源代码呢？）。

    这个导航条是动态的，主要是要用后台代码判断点击选择的是哪个菜单项，然后修改，进而设置当前选择菜单项的样式。

    【效果】

    【素材】

    素材1：导航条背景

    素材2：菜单项链接、鼠标悬浮及当前选项样式背景

    【前台界面】

    [html] view plaincopyprint?
     
    1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Products.aspx.cs" Inherits="WestGarden.Web.Products" StylesheetTheme="NetShop" %>  
    2.   
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    4.   
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head runat="server">  
    7.     <title>ASP.NET实例——漂亮的自适应宽度的导航条（仿Discuz!）</title>  
    8. </head>  
    9. <body>  
    10.     <div id="hd">  
    11.         <div class="wp">  
    12.             <form id="form1" runat="server">  
    13.             <div id="nv">  
    14.                 <asp:Repeater ID="repCategories" runat="server">  
    15.                     <HeaderTemplate>  
    16.                         <ul>  
    17.                     </HeaderTemplate>  
    18.                     <ItemTemplate>  
    19.                         <li>  
    20.                             <asp:HyperLink runat="server" ID="lnkCategory" NavigateUrl='<%# string.Format("~/Products.aspx?page=0&categoryId={0}", Eval("CategoryId")) %>' Text='<%# Eval("Name") %>' />  
    21.                             <asp:HiddenField runat="server" ID="hidCategoryId" Value='<%# Eval("CategoryId") %>' />  
    22.                         </li>  
    23.                     </ItemTemplate>  
    24.                     <FooterTemplate>  
    25.                         </ul>  
    26.                     </FooterTemplate>  
    27.                 </asp:Repeater>  
    28.             </div>  
    29.             </form>  
    30.         </div>  
    31.     </div>  
    32. </body>  
    33. </html>  

    【后台代码】

    [csharp] view plaincopyprint?
     
    1. using System;  
    2. using System.Web.UI.WebControls;  
    3. using System.Data;  
    4. using System.Data.SqlClient;  
    5.   
    6. namespace WestGarden.Web  
    7. {  
    8.     public partial class Products : System.Web.UI.Page  
    9.     {  
    10.         protected void Page_Load(object sender, EventArgs e)  
    11.         {  
    12.             string connString = "Server=.\SQLEXPRESS;Database=NetShop;Trusted_Connection=SSPI;";  
    13.             string cmdText = "SELECT * FROM Category";  
    14.   
    15.             SqlConnection conn = new SqlConnection();  
    16.             conn.ConnectionString = connString;  
    17.   
    18.             SqlCommand cmd = new SqlCommand();  
    19.             cmd.Connection = conn;  
    20.             cmd.CommandType = CommandType.Text;  
    21.             cmd.CommandText = cmdText;  
    22.   
    23.             conn.Open();  
    24.   
    25.             SqlDataReader dr = cmd.ExecuteReader();  
    26.   
    27.             repCategories.DataSource = dr;  
    28.             repCategories.DataBind();  
    29.   
    30.             dr.Close();  
    31.             conn.Close();  
    32.   
    33.   
    34.             string categoryId = Request.QueryString["categoryId"];  
    35.             if (!string.IsNullOrEmpty(categoryId))  
    36.                 SelectCategory(categoryId);  
    37.         }  
    38.   
    39.         private void SelectCategory(string categoryId)  
    40.         {  
    41.             foreach (RepeaterItem item in repCategories.Items)  
    42.             {  
    43.                 HiddenField hidCategoryId = (HiddenField)item.FindControl("hidCategoryId");  
    44.                 if (hidCategoryId.Value.ToLower() == categoryId.ToLower())  
    45.                 {  
    46.                     HyperLink lnkCategory = (HyperLink)item.FindControl("lnkCategory");  
    47.                     if(string.IsNullOrEmpty(lnkCategory.CssClass))  
    48.                         lnkCategory.CssClass = lnkCategory.CssClass + "a";  
    49.                     else  
    50.                         lnkCategory.CssClass = lnkCategory.CssClass + " a";  
    51.   
    52.                     break;  
    53.                 }  
    54.             }  
    55.         }  
    56.     }  
    57. }  


     

    【CSS样式】

    [css] view plaincopyprint?
     
    1. body { font: 12px/1.5 Tahoma,Helvetica,'SimSun',sans-serif; color: #444444; }  
    2.   
    3. a { color: #333333; text-decoration: none; }  
    4. a:hover { text-decoration: underline; }  
    5.   
    6. .wp { margin: 0px auto;  960px; }  
    7.   
    8. #hd { border-bottom: 0px solid #C2D5E3; }  
    9. #hd .wp { padding: 10px 0px 0px; }  
    10.   
    11.   
    12. #nv { overflow: hidden; height: 33px; background: url(Images/nv.png) no-repeat scroll 0px 0px #2B7ACD; }  
    13.   
    14. #nv li { float: left; padding-right: 1px; height: 33px; line-height: 33px; background: url(Images/nv_a.png) no-repeat 100% 0; font-weight: 700; font-size: 14px; }  
    15. .ie_all #nv li { line-height: 36px; }  
    16. .ie6 #nv li { line-height: 33px; }  
    17.   
    18. #nv li a { float: left; padding: 0 15px; height: 33px; }  
    19. #nv li a { color: #FFFFFF; }  
    20.   
    21. #nv li a.a { margin-left: -1px; background: url(Images/nv_a.png) no-repeat scroll 50% -33px rgb(0, 90, 180); }  
    22. #nv li a.a { color: #00FF00; }  
    23.   
    24. #nv li a:hover { background: url(Images/nv_a.png) no-repeat 50% -66px; }  


    【说明】

    1、实例所使用的样式表，基本都是Discuz中的，其中的样式命名基本没做改动。

    2、前台界面主要使用了Repeater控件，HyperLink和HiddenField控件如果不用的话，可以直接用<a>和<span>标签代替，把数据绑上就可以了。

    3、实例的关键是这个HiddenField控件（也可以设置属性不显示的<span>标签），里面存放了分类项的ID，后台代码主要是根据这个ID来判断该菜单项是不是当前选项。

    4、后台代码12--31行是从数据库NetShop中获取分类表Category中的分类项名字和ID，这些代码，如果采用结构化编程会很简捷。

    5、后台代码34-36行是获取链接地址，从地址中取出菜单项ID（categoryId），然后调用函数SelectCategory()。

    6、函数SelectCategory()的主要功能是根据从地址中获取的菜单ID，查找对应项在Repeater的位置，然后，修改该项的class。

    7、素材的几个背景图片是做在一起的，在CSS中，主要是通过背景起始位置来控制链接、鼠标悬浮及当前选项的背景。

    8、自适应宽度的关键在于，设置菜单项背景时，起始水平位置是50%，这样，只要菜单项的宽度不超过背景图片的宽度，也就是160px，都不会有什么问题。

    9、这个导航条通常应该做成用户控件的形式，这样就可以应用到不同的场合，不同的场合下，所要修改的，只是那十四行从数据库获取数据的代码就行了。

    【源代码下载】

     http://download.csdn.net/detail/yousuosi/5834551
  • 相关阅读:
    排列算法问题
    g00 网站说明
    leetcode 401. Binary Watch
    滴滴快车奖励政策，高峰奖励，翻倍奖励，按成交率，指派单数分级（1月7日)
    北京Uber优步司机奖励政策（1月6日）
    滴滴快车奖励政策，高峰奖励，翻倍奖励，按成交率，指派单数分级（1月6日)
    北京Uber优步司机奖励政策（1月5日）
    滴滴快车奖励政策，高峰奖励，翻倍奖励，按成交率，指派单数分级（1月5日)
    全国Uber优步司机奖励政策 (12月28日-1月3日)
    全国Uber优步司机奖励政策 (1月4日-1月10日)
  • 原文地址：https://www.cnblogs.com/aiqingqing/p/4516073.html
Copyright © 2011-2022 走看看