ASP.NET實例——漂亮的自適應寬度的導航條(仿Discuz!)


PHP比較成熟的開放的源代碼比較多,比方說PrestaShop,比方說Discuz!......

雖然語言不同,但基本原理是一樣的,有時間的話讀一讀,對學習ASP.NET應該是非常有好處的(唉,什么時候ASP.NET也能有這么多成熟的,流行的開放源代碼呢?)。

 

這個導航條是動態的,主要是要用后台代碼判斷點擊選擇的是哪個菜單項,然后修改,進而設置當前選擇菜單項的樣式。

 

【效果】

【素材】

素材1:導航條背景

素材2:菜單項鏈接、鼠標懸浮及當前選項樣式背景

 

【前台界面】

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Products.aspx.cs" Inherits="WestGarden.Web.Products" StylesheetTheme="NetShop" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASP.NET實例——漂亮的自適應寬度的導航條(仿Discuz!)</title>
</head>
<body>
    <div id="hd">
        <div class="wp">
            <form id="form1" runat="server">
            <div id="nv">
                <asp:Repeater ID="repCategories" runat="server">
                    <HeaderTemplate>
                        <ul>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <li>
                            <asp:HyperLink runat="server" ID="lnkCategory" NavigateUrl='<%# string.Format("~/Products.aspx?page=0&categoryId={0}", Eval("CategoryId")) %>' Text='<%# Eval("Name") %>' />
                            <asp:HiddenField runat="server" ID="hidCategoryId" Value='<%# Eval("CategoryId") %>' />
                        </li>
                    </ItemTemplate>
                    <FooterTemplate>
                        </ul>
                    </FooterTemplate>
                </asp:Repeater>
            </div>
            </form>
        </div>
    </div>
</body>
</html>

 

【后台代碼】

using System;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

namespace WestGarden.Web
{
    public partial class Products : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string connString = "Server=.\\SQLEXPRESS;Database=NetShop;Trusted_Connection=SSPI;";
            string cmdText = "SELECT * FROM Category";

            SqlConnection conn = new SqlConnection();
            conn.ConnectionString = connString;

            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandType = CommandType.Text;
            cmd.CommandText = cmdText;

            conn.Open();

            SqlDataReader dr = cmd.ExecuteReader();

            repCategories.DataSource = dr;
            repCategories.DataBind();

            dr.Close();
            conn.Close();


            string categoryId = Request.QueryString["categoryId"];
            if (!string.IsNullOrEmpty(categoryId))
                SelectCategory(categoryId);
        }

        private void SelectCategory(string categoryId)
        {
            foreach (RepeaterItem item in repCategories.Items)
            {
                HiddenField hidCategoryId = (HiddenField)item.FindControl("hidCategoryId");
                if (hidCategoryId.Value.ToLower() == categoryId.ToLower())
                {
                    HyperLink lnkCategory = (HyperLink)item.FindControl("lnkCategory");
                    if(string.IsNullOrEmpty(lnkCategory.CssClass))
                        lnkCategory.CssClass = lnkCategory.CssClass + "a";
                    else
                        lnkCategory.CssClass = lnkCategory.CssClass + " a";

                    break;
                }
            }
        }
    }
}


 

【CSS樣式】

 

body { font: 12px/1.5 Tahoma,Helvetica,'SimSun',sans-serif; color: #444444; }

a { color: #333333; text-decoration: none; }
a:hover { text-decoration: underline; }

.wp { margin: 0px auto; width: 960px; }

#hd { border-bottom: 0px solid #C2D5E3; }
#hd .wp { padding: 10px 0px 0px; }


#nv { overflow: hidden; height: 33px; background: url(Images/nv.png) no-repeat scroll 0px 0px #2B7ACD; }

#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; }
.ie_all #nv li { line-height: 36px; }
.ie6 #nv li { line-height: 33px; }

#nv li a { float: left; padding: 0 15px; height: 33px; }
#nv li a { color: #FFFFFF; }

#nv li a.a { margin-left: -1px; background: url(Images/nv_a.png) no-repeat scroll 50% -33px rgb(0, 90, 180); }
#nv li a.a { color: #00FF00; }

#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,都不會有什么問題。

 

【源代碼下載】

 http://download.csdn.net/detail/yousuosi/5834551

 

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com