Есть ли в JavaScript виджет меню, который позволяет динамически добавлять и удалять элементы меню? - PullRequest
Новая
       24

Есть ли в JavaScript виджет меню, который позволяет динамически добавлять и удалять элементы меню?

1 голос
/ 08 декабря 2011

Я ищу виджет панели меню JavaScript, который позволяет динамически добавлять и удалять элементы меню. Я уже загружаю jQuery и jQueryUI, поэтому любая библиотека, основанная на этих библиотеках, предпочтительнее той, которая требует другой базовой структуры. Облегченная библиотека с несколькими зависимостями тоже подойдет.

Виджет jQueryUI mebubar , по-видимому, обладает необходимой мне функциональностью (строка меню, поддержка подменю, предположительно с поддержкой тем) кроме возможность добавлять и удалять пункты меню без труда. Я начал изучать, как взломать эту способность в этом виджете, но она оказалась более сложной, чем я ожидал. Библиотека, которая уже имеет эту функцию, будет проще. (Если это не удастся, возможно, я открою еще один вопрос о том, как лучше взломать этот виджет.)

Итак, чтобы подвести итог того, что я ищу:

  • Виджет раскрывающегося меню JavaScript (нажмите, чтобы открыть меню)
  • Поддержка подменю
  • Настраиваемый внешний вид
  • Произвольные хуки JavaScript, запускаемые при выборе пункта меню
  • Сборки на jQuery и / или jQueryUI или легковесные / независимые
  • Позволяет динамически добавлять или удалять элементы меню
  • Лицензия разрешает коммерческое использование
  • Специальные возможности и поддержка клавиатуры были бы хороши

Ответы [ 3 ]

3 голосов
/ 08 декабря 2011

Kendo UI включает в себя красивый виджет меню: http://demos.kendoui.com/web/menu/index.html. API выглядит довольно надежным и простым.

Единственное, что я вижу, что вам не хватает, - это клавиатурная навигация - также обратите внимание, что естьСтоимость его использования в коммерческих проектах.

2 голосов
/ 08 декабря 2011

Я бы посоветовал вам использовать JqueryUI menubar и просто добавлять / удалять элементы li с помощью jquery следующим образом: 

$("#youreUlID").append("<li id='someID'>.........</li>");
$("#someID").remove();
0 голосов
/ 27 марта 2013

Kendo UI, меню еще не поддерживают источник данных, так как вы можете создать биты HTML с помощью функции C #;Вот биты о том, как это сделать, с данными модели;Вы можете RenderPartial, как @ Html.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>
...