导航条的重构

此段时间写的程序，一些功能均被朋友推翻，由静态的改为动态的。就如下面这个导航条，是参考下面这个来实现的：http://www.cnblogs.com/insus/archive/2011/08/18/2144041.html 

原本Insus.NET已经写好：

代码如下：

<style type="text/css">
    .fsoverstyle {
        border-color: #3599ff;
    }

    .divoverstyle {
        background-color: #3399ff;
        color: #fff;
    }

    .fsoutstyle {
    }

    .divoutstyle {
    }   
</style>
<script type="text/javascript">

    function onOver(id, sid) {
        var fs = document.getElementById(id);
        var div = document.getElementById(sid);

        if (fs)
            fs.className = 'fsoverstyle';
        if (div)
            div.className = 'divoverstyle';
    }

    function onOut(id, sid) {
        var fs = document.getElementById(id);
        var div = document.getElementById(sid);

        if (fs)
            fs.className = 'fsoutstyle';
        if (div)
            div.className = 'divoutstyle';
    }
</script>



<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#3599ff;" >
    <tr align="center" valign="middle" style="height:35px;">
        <td>
            <fieldset id="fs8" style="margin:3px; padding: 7px;  75px; text-align: center;"
                onmouseover="onOver('fs8','div8')" onmouseout="onOut('fs8','div8')">
                <div id="div8">                    
                    <asp:HyperLink ID="HyperLink8" runat="server" NavigateUrl="~/Index.aspx" Text="网站首页" Target="_blank"></asp:HyperLink>
                </div>
            </fieldset>
        </td>
         <td>
            <fieldset id="fs1" style="margin:3px; padding: 7px;  75px; text-align: center;"
                onmouseover="onOver('fs1','div1')" onmouseout="onOut('fs1','div1')">
                <div id="div1">                    
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/ArticleList.aspx?ID=2" Text="教育动态" Target="_blank"></asp:HyperLink>
                </div>
            </fieldset>
        </td>
        <td>
            <fieldset id="fs2" style="margin: 3px; padding: 7px;  75px; text-align: center;"
                onmouseover="onOver('fs2','div2')" onmouseout="onOut('fs2','div2')">
                <div id="div2">                    
                    <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/ArticleList.aspx?ID=1" Text="校园风采" Target="_blank"></asp:HyperLink>
                </div>
            </fieldset>
        </td>
        <td>
            <fieldset id="fs3" style="margin: 3px; padding: 7px;  75px; text-align: center;"
                onmouseover="onOver('fs3','div3')" onmouseout="onOut('fs3','div3')">
                <div id="div3">                    
                    <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/ArticleList.aspx?ID=3" Text="教育教学" Target="_blank"></asp:HyperLink>
                </div>
            </fieldset>
        </td>
        <td>
            <fieldset id="fs4" style="margin: 3px; padding: 7px;  75px; text-align: center;"
                onmouseover="onOver('fs4','div4')" onmouseout="onOut('fs4','div4')">
                <div id="div4">                    
                    <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/ArticleList.aspx?ID=5" Text="实习实训" Target="_blank"></asp:HyperLink>
                </div>
            </fieldset>
        </td>
        <td>
            <fieldset id="fs5" style="margin: 3px; padding: 7px;  75px; text-align: center;"
                onmouseover="onOver('fs5','div5')" onmouseout="onOut('fs5','div5')">
                <div id="div5">
                    <asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/ArticleList.aspx?ID=6" Text="招生就业" Target="_blank"></asp:HyperLink>
                </div>
            </fieldset>
        </td>
        <td>
            <fieldset id="fs6" style="margin: 3px; padding: 7px;  75px; text-align: center;"
                onmouseover="onOver('fs6','div6')" onmouseout="onOut('fs6','div6')">
                <div id="div6">                    
                    <asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="~/ArticleList.aspx?ID=7" Text="教育资源" Target="_blank"></asp:HyperLink>
                </div>
            </fieldset>
        </td>
        <td>
            <fieldset id="fs7" style="margin: 3px; padding: 7px;  75px; text-align: center;"
                onmouseover="onOver('fs7','div7')" onmouseout="onOut('fs7','div7')">
                <div id="div7">                    
                     <asp:HyperLink ID="HyperLink7" runat="server" NavigateUrl="~/ArticleList.aspx?ID=8" Text="职业培训" Target="_blank"></asp:HyperLink>
            </fieldset>
        </td>
    </tr>
</table>

没有办法了，作为开发者来说，朋友也是客户，让客户满意，一句话，就是改。

在数据库中，创建一个表，让用户在后台能管理这些导航条的内容，添加，编辑与删除等。

-- =============================================
-- Author:        Insus.NET
-- Create date: 2013-01-12
-- Description:    create table [navigate bar]
-- =============================================
CREATE TABLE [dbo].[NavigateBar]
(
    [nbr] TINYINT IDENTITY(1,1) PRIMARY KEY NOT NULL,
    [MenuName] NVARCHAR(30) NOT NULL,
    [Url] NVARCHAR(100) NOT NULL
)

 从上面的源来HTML来看，它只是一个表格，而且有几列。因此把它放在一个Repeater控件上。而实现动态生成显示：

<asp:Repeater ID="RepeaterNavigateBar" runat="server">
    <HeaderTemplate>
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #3599ff;">
            <tr align="center" valign="middle" style="height: 35px;">
    </HeaderTemplate>
    <ItemTemplate>
        <td>
            <fieldset id='<%# "fs" & Eval("nbr")%>' style="margin: 3px; padding: 7px;  75px; text-align: center;"
                onmouseover="onOver('<%# "fs" & Eval("nbr")%>','<%# "div" & Eval("nbr")%>')" onmouseout="onOut('<%# "fs" & Eval("nbr")%>','<%# "div" & Eval("nbr")%>')">
                <div id='<%# "div" & Eval("nbr")%>'>
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("Url")%>' Text='<%# Eval("MenuName")%>' Target="_blank"></asp:HyperLink>
                </div>
            </fieldset>
        </td>
    </ItemTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

vb.net:

Imports Insus.NET

Partial Class AscxControls_Menu
    Inherits System.Web.UI.UserControl
    Dim objNavigateBar As New NavigateBar()

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Data_Binding()
        End If
    End Sub

    Private Sub Data_Binding()
        Me.RepeaterNavigateBar.DataSource = objNavigateBar.GetAll()
        Me.RepeaterNavigateBar.DataBind()
    End Sub
End Class