数据库驱动的 HTML 弹出菜单

Mugombi

3.35/5 (8投票s)

2005年10月27日

1分钟阅读

99930

3209

一篇文章，介绍如何从数据库生成 HTML 弹出菜单。

Sample Image

引言

不久前，我的老板找到我，希望我为一家公司做一个内容管理系统，该公司希望在他们的网站上为子链接提供下拉菜单。我在网上搜索试图找到一个可以轻松实现这一点的控件，但令我惊讶的是，我什么也没找到！这激励我编写一个类似 Dreamweaver 的弹出菜单控件，该控件从数据库获取父节点和子节点，并创建与 Macromedia Dreamweaver 中相同的 JavaScript 下拉菜单。

使用代码

我创建了一个类库（附件），其中包含两个类。 dvstories 类返回一个包含主/子页面列表的 DataView。第二个，buildmenu - 返回一个包含用于构建菜单的父节点和子节点的 JavaScript 字符串。

在所有 .aspx 页面的页眉文件中 - top.ascx - 我构造一个字符串来引发菜单弹出的 MouseOver 事件。我还硬编码了（对于此版本）菜单尺寸，这决定了菜单的显示位置

//mouseover event
//refer to mm_menu.js to understand the variables
string mnustr = "onMouseOver=\"MM_showMenu(window.mnmenu," + 
       "x,138,null,'image2')\" onMouseOut=\"MM_startTimeout();\"";
sect2 = "";
sect3 = "";
sect4 = "";
sect6 = "";
//location of menu - y axis
int 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 位置等属性。任何帮助都将不胜感激。