Question

我正在寻找一个JavaScript菜单栏小部件，它允许动态添加和删除菜单项。我已经加载了jQuery和jQueryUI，因此构建在这些库上的任何库都比需要另一个底层框架的库更可取。一个具有很少依赖性的轻量级库也可以。

jQueryUI mebubar widget似乎具有我需要的功能（菜单栏，子菜单支持，可能是主题）除了能够轻松添加和删除菜单项。我已经开始研究如何将这种能力破解到这个小部件中，但结果却比我想象的要复杂得多。已经具有此功能的库将更容易。（如果不这样，也许我会打开另一个问题，询问如何最好地破解这个小部件。）

所以，总结我正在寻找的东西：

JavaScript pull-down菜单栏小部件（单击以下拉菜单）
子菜单支持
可自定义外观
选择菜单项时要运行的任意JavaScript挂钩
构建于jQuery和/或jQueryUI上，或者是轻量级/独立的
允许动态添加或删除菜单项
许可证允许商业用途
辅助功能和键盘支持很不错

Answer 1

Kendo UI包含一个漂亮的菜单小部件：http://demos.kendoui.com/web/menu/index.html。 API看起来相当健壮和简单。

我唯一注意到你注意到的是键盘导航 - 同时请注意，在商业项目中使用它会有成本。

Answer 2

我建议您使用JqueryUI菜单栏，只需使用jquery追加/删除li元素：

$("#youreUlID").append("<li id='someID'>.........</li>");
$("#someID").remove();

Answer 3

Kendo UI，Menus还不支持dataSource，因为你可以使用C＃函数创建HTML位;这是关于如何做的比特，模型数据;你可以像@ Html.RenderPartial一样使用RenderPartial（“〜/ Views / Shared / NavigationalControl.cshtml”，Model）;

NavigationalControl.cshtml

@model MenuItemModel
<div id="navMenu" class="k-content">
    <div id="navigationMenu">
        <ul id="menu">
            <li></li>
        </ul>
    </div>

    <script> var menu = null;
        $(document).ready(function () {
            $("#menu").kendoMenu({ dataSource: @Html.Raw(Json.Encode(GetMenu(Model.MenuItemFinal)))});
        });
    </script>

    @functions
    {
        public class Menu
        {
            public string text { get; set; }
            public string url { get; set; }
            public string imageUrl { get; set; }
            public List<Menu> items { get; set; }
        }
        private List<Menu> GetMenu(IEnumerable<MenuItemUI> items)
        {
            return items.Select(item => new Menu()
                {
                    text = item.MenuText,
                    url = String.Format("/{0}/{1}{2}", Convert.ToString(ViewData["LanguageCode"]), Convert.ToString(ViewData["CountryCode"]), item.URL)
                    ,
                    items = item.Children != null && item.Children.Any() ? GetMenu(item.Children) : null
                }).ToList();
        }
    }
</div>

是否有一个JavaScript菜单栏小部件，允许动态添加和删除菜单项？

3 个答案: