原本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")%>' 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.NETPartial 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 SubEnd Class