导航条的重构
此段时间写的程序，一些功能均被朋友推翻，由静态的改为动态的。就如下面这个导航条，是参考下面这个来实现的：http://www.cnblogs.com/insus/archive/2011/08/18/2144041.html
原本Insus.NET已经写好：
代码如下：
View Code
<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; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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>
没有办法了，作为开发者来说，朋友也是客户，让客户满意，一句话，就是改。
在数据库中，创建一个表，让用户在后台能管理这些导航条的内容，添加，编辑与删除等。
View Code
-- ============================================= -- 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控件上。而实现动态生成显示：
View Code
<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; width: 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:
View Code
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
