TwoColorsMenu - 世界上最快的菜单

• 下载源代码 - 49.9 KB

引言

在我之前的文章《Flyout - 在您的网页上节省空间的好方法》中，我向您介绍了一个不错的免费控件。 今天，我想在这里介绍另一个来自 obout inc 的免费 ASP.NET 控件，名为 TwoColorsMenu。 顾名思义，这是一个由两种颜色制成的菜单。 虽然听起来很简单，但它是网页菜单的有效、快速和免费的解决方案。 就像 Flyout 组件一样，TwoColorsMenu 也可以免费用于个人和商业用途。

功能列表

以下是一些突出显示的功能

• 世界上最快的菜单。
• 可以与数据库一起使用。
• 与 Microsoft ASP.NET AJAX 兼容。
• 内容可被网络引擎蜘蛛访问。
• 易于使用：您可以使用非常少的代码来创建一个菜单。

如何将 TwoColorsMenu 添加到您的页面

将 TwoColorsMenu 控件添加到您的页面非常简单。

• 将 *obout_TwoColorsMenu.dll* 复制到您的项目的 *Bin* 文件夹
• 在您的页面上注册 TwoColorsMenu

  <%@ Register TagPrefix="tcm" Namespace="OboutInc.TwoColorsMenu" 
               Assembly="obout_TwoColorsMenu" %>

使用 TwoColorsMenu 控件

以下是一些入门示例代码

<tcm:TwoColorsMenu runat="server" id="tcm1">
    <tcm:Item ID="item1" InnerHtml="Item1"/>
        <tcm:Item ParentID="item1" ID="item11" InnerHtml="Item 1 - 1"/>
        <tcm:Item ParentID="item1" ID="item12" InnerHtml="Item 1-2"/>
    <tcm:Item ID="item2" InnerHtml="Item2"/>
        <tcm:Item ParentID="item2" ID="item21" InnerHtml="Item 2-1"/>
        <tcm:Item ParentID="item2" ID="item22" InnerHtml="Item 2-2"/>
</tcm:TwoColorsMenu>

通过将父项的 ID 放入子项的 ParentID 属性中，我们可以构建一个带有子项甚至子子项的菜单。

这是我们的工作成果

如何更改菜单的颜色？

上图显示了菜单的默认颜色，这些颜色可以更改。 有四个属性可以控制颜色

• ColorBackground：项目的背景颜色。
• ColorBackgroundOver：鼠标悬停时项目的背景颜色。
• ColorFont：项目的字体颜色。
• ColorFontover：鼠标悬停时项目的字体颜色。

如果您希望您的菜单具有其他颜色，例如这样

就这样做

<tcm:TwoColorsMenu runat="server" id="tcm1" 
       ColorBackground="Orange" ColorBackgroundOver="Blue" 
       ColorFont="Black" ColorFontOver="White">
    ...        
</tcm:TwoColorsMenu>

如何制作垂直菜单

默认情况下，TwoColorsMenu 菜单以水平形状显示。 但是，如果您想要一个垂直菜单，您可以将 Vertical 属性设置为 true。

<tcm:TwoColorsMenu runat="server" id="tcm1" Vertical="true" >
    ...        
</tcm:TwoColorsMenu>

关于 TwoColorsMenu 的代码背后

以下是生成 TwoColorsMenu 菜单的 C# 代码片段

TwoColorsMenu tcm1 = new TwoColorsMenu();
tcm1.ID = "tcm1";
tcm1.StyleFolder = "styles/submenuicon";
tcm1.SubMenuText = "";
//You can easily added javascript code for menuitems


tcm1.Add(null, "brands", "Brands", 
               "javascript:alert('you clicked me');void(0);", null);
    tcm1.Add("brands", "ibm", "IBM");
    tcm1.Add("brands", "microsoft", "MICROSOFT");
    tcm1.Add("brands", "obout", "OBOUT", "http://www.obout.com/", "_top");
        // The format of Add() method is Add(string ParentID,string ID,
        //                                   string InnerHtml,string Url, 
        //                                   string Target);


        tcm1.Add("obout", "treeview", "TreeView", 
                 "http://www.obout.com/t2/edraganddrop.aspx", "_top");
        tcm1.Add("obout", "slidemenu", "Slide Menu", 
                 "http://www.obout.com/sm3/whatisnew.aspx", "_top");
        tcm1.Add("obout", "calendar", "Calendar", 
                 "http://www.obout.com/calendar/", "_top");
        tcm1.Add("obout", "postback", "Postback4", 
                 "http://www.obout.com/pb4/", "_top");
        tcm1.Add("obout", "splitter", "Splitter", 
                 "http://www.obout.com/splitter/", "_top");
        tcm1.Add("obout", "easymenu", "EasyMenu", 
                 "http://www.obout.com/em/", "_top");
        tcm1.Add("obout", "combobox", "Combobox", 
                 "http://www.obout.com/em/ex_combobox.aspx", "_top");
        tcm1.Add("obout", "editor", "HTML Editor", 
                 "http://www.obout.com/editor_new/", "_top");
        tcm1.Add("obout", "superbutton", "Super Button", 
                "http://www.obout.com/osb/", "_top");
        tcm1.Add("obout", "treedb", "Tree_DB", 
                 "http://www.obout.com/t_db/index.aspx", "_top");
        tcm1.Add("obout", "twocolorsmenu", "TwoColorsMenu", 
                 "http://www.obout.com/tcm/tcm.aspx", "_top");
tcm1.Add(null, "systems", "Systems");
    tcm1.Add("systems", "desktops", "Desktops");
    tcm1.Add("systems", "handhelds", "Handhelds");
    tcm1.Add("systems", "notebooks", "Notebooks");
    tcm1.Add("systems", "servers", "Servers");
tcm1.Add(null, "hardware", "Hardware");
    tcm1.Add("hardware", "accessories", "Accessories");
    tcm1.Add("hardware", "keyboards", "Keyboards");
    tcm1.Add("hardware", "memory", "Memory");
    tcm1.Add("hardware", "printers", "Printers");
    tcm1.Add("hardware", "videocards", "Video Cards");
tcm1.Add(null, "software", "Software");
    tcm1.Add("software", "applications", "Applications");
    tcm1.Add("software", "licensing", "Licensing");
    Page.Controls.Add(tcm1);

我还可以调整 TwoColorsMenu 中的哪些内容？

• 您可以使用 Font 和 FontParent 属性更改菜单项的字体。
• 您可以使菜单自动定位 - 更多。
• 您可以使用高级 CSS 对 TwoColorMenu 菜单的外观进行更深入的更改 - 更多。
• 您可以从 RightToLeft 更改菜单的对齐方式 - 更多

摘要

在本文中，我向您展示了如何使用来自 obout inc 的 TwoColorsMenu。 TwoColorsMenu 菜单易于使用，并且渲染速度非常快。 您可以在几分钟内为您的网页准备好一个可用的菜单。 我希望您觉得它有用。 在 Zip 文件中，有许多示例供您入门。 您可以随时从 obout Suite 获取最新版本的 TwoColorsMenu 菜单。