数据库驱动的HTML弹出菜单

分享于 

4分钟阅读

Web开发

  繁體

Sample Image

介绍

前来我的老板接到我的内容管理系统,为他们的网站上的子链接下降菜单。 我上网尝试找到一个可以让我轻松实现的控制,但是我觉得我没有找到任何东西。 这样我就可以编写一个 in,它可以从数据库中获取父节点和子节点,并创建一个JavaScript下拉菜单。

使用代码

我创建了一个具有两个类的类库( 附加)。 类 dvstories 返回主/子页列表的DataView。 第二个,buildmenu - 返回一个带有JavaScript的字符串,用于构建菜单的父节点和子节点。

在 header 文件的所有. aspx 页面- top.ascx - 我构造一个字符串,以引发菜单弹出菜单的MouseOver 事件。 我还硬编码( 对于这里版本) 菜单尺寸,确定菜单显示位置:

//mouseover event//refer to mm_menu.js to understand the variablesstring mnustr = "onMouseOver="MM_showMenu(window.mnmenu," + 
 "x,138,null,'image2')" onMouseOut="MM_startTimeout();"";
sect2 = "";
sect3 = "";
sect4 = "";
sect6 = "";//location of menu - y axisint x = 160;try 
{
 DataView dvmainlist = new DataView();
 DataView subs = new DataView();
 dvmainlist = dp.dvstories(1);
 //start building menu children from parent nodes//also puts in dimensions of the menu dropdown....foreach (DataRow r in dvmainlist.Table.Rows)
 {
 string mainuid = r["main_pgID"].ToString();
 if (Convert.ToInt32(mainuid)!= dp.sub_id)
 {
 subs = fillchild("2");
 if (subs.Table.Rows.Count >= 1 )
 {
 sect2 = mnustr.Replace("mnmenu", "mm_menu_2_0");
 sect2 = sect2.Replace("x", x.ToString());
 }
 subs = fillchild("3");
 if (subs.Table.Rows.Count >= 1 )
 {
 sect3 = mnustr.Replace("mnmenu", "mm_menu_3_0");
 //location of menu - y-axis sect3 = sect3.Replace("x", (x + 185).ToString());
 }
 subs = fillchild("4");
 if (subs.Table.Rows.Count >= 1 )
 {
 sect4 = mnustr.Replace("mnmenu", "mm_menu_4_0");
 sect4 = sect4.Replace("x", (x + 290).ToString());
 }
 subs = fillchild("6");
 if (subs.Table.Rows.Count >= 1 )
 {
 sect6 = mnustr.Replace("mnmenu", "mm_menu_6_0");
 sect6 = sect6.Replace("x",(x + 300).ToString());
 }
 }
 }
}catch (Exception ex)
{
 Response.Write(ex.ToString());
}

在实际. aspx ( Default.aspx )的HTML部分中,对于示例页面,我必须放置下面的代码:

<!--put this within the head tag -->
<script language="JavaScript">
<!--function mmLoadMenus() {
 <%=menucontents%>} // mmLoadMenus()//--></script>
<script language="JavaScript" src="mm_menu.js"></script>
<!--put this after the <head> tag -->
<script language="JavaScript">mmLoadMenus();</script>

在文件后面的代码中,必须从组件调用 buildmenu 类以保留菜单内容字符串。

历史记录

我目前制作这个控件完全可以自定义- 如后面的颜色,x,y 位置 等等 任何帮助。


相关文章