Nano Hash - криптовалюты, майнинг, программирование

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

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

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

Итак, подытожу то, что я ищу:

  • Виджет раскрывающегося меню JavaScript (нажмите, чтобы открыть меню)
  • Поддержка подменю
  • Настраиваемый внешний вид
  • Произвольные перехватчики JavaScript для запуска при выборе пункта меню
  • Основан на jQuery и/или jQueryUI или является легким/независимым.
  • Позволяет динамически добавлять или удалять элементы меню.
  • Лицензия разрешает коммерческое использование
  • Доступность и поддержка клавиатуры были бы кстати
drop-down-menu jquery jquery-ui
08.12.2011

Ответы:


1

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

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

08.12.2011
  • Хм, KendoUI довольно большой (по крайней мере, 300 КБ), но у него есть поддерживаемый API для добавления и удаления пунктов меню — первый, который я видел! Так что спасибо вам за это. В конце концов я приму этот ответ, если не увижу лучших. 08.12.2011
  • Он выглядит довольно тяжелым, можно только надеяться, что вы сможете собрать необходимые вам виджеты и создать гораздо меньший пакет. 08.12.2011
  • Kendo UI имеет упаковщик, поэтому вы можете получить только то, что вам нужно. 300К - это весь шибанг. 19.12.2011

    • 2

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

    $("#youreUlID").append("<li id='someID'>.........</li>");
$("#someID").remove();
    08.12.2011
  • Это то, что я надеялся сделать, но, к сожалению, кажется, что эти скромные пункты списка претерпевают значительные преобразования на пути к тому, чтобы стать пунктами меню. Простое вставление нового li не запускает всю ту магию установки, которая происходит при первоначальном построении меню. Но да, хакерским решением было бы выяснить, как заставить все это происходить (связывание событий, перенумерация элементов, добавление атрибутов и т. д.) по требованию. Я пытаюсь избежать этого, так как это кажется довольно сложным и хрупким. 08.12.2011
  • О, я вижу. Я думал, что после добавления или удаления должен быть вызван какой-то метод обновления. Я нашел это в todos. Так что, возможно, в следующей версии. 09.12.2011
  • Вы можете воссоздать все меню после динамического добавления элементов, например, $(#menubar).menubar(destroy).menubar(). 16.06.2012

    • 3

    Пользовательский интерфейс Kendo, меню еще не поддерживают dataSource, в качестве обходного пути вы можете создавать биты HTML с помощью функции C #; Вот биты о том, как это сделать с данными модели; вы можете использовать RenderPartial, например @Html.RenderPartial("~/Views/Shared/NavigationalControl.cshtml",Model);

    Навигаталконтрол.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>
    27.03.2013
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..