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

Значки в пользовательском меню jQuery Mobile Select

Я использую пользовательское меню выбора из jQuery Mobile и хочу поместить значки в пользовательское всплывающее меню, чтобы сопровождать каждый option. Я применяю атрибут data-icon к каждому option, например:

<select name='mySelect' id='mySelect' data-icon='gear'>
    <option value='0' data-icon='star'>Option 0</option>
    <option value='1' data-icon='star'>Option 1</option>
    <option value='2' data-icon='star' selected="selected">Option 2</option>
</select>

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

jquery-mobile
23.04.2012

Ответы:


1

Это не поддерживается по умолчанию, но вот небольшой фрагмент кода, чтобы сделать это возможным:

//wait for the correct page to initialize
$(document).delegate('#home', 'pageinit', function () {

    //loop through each of the SELECT elements in this page
    $.each($(this).find('select'), function () {

        //get the ID of this select because it's menu's ID is based off of it
        var currentID = this.id;

        //iterate through each of the OPTION elements for this SELECT element
        $.each($(this).find('option'), function (index, element) {

            //if the OPTION element has the `data-icon` attribute
            if ($(element).attr('data-icon') != undefined) {

                //update the menu for this SELECT by adding an icon SPAN element
                //to each of the OPTION elements that has a `data-icon` attribute
                $('#' + currentID + '-menu').children().eq(index).find('.ui-btn-inner').append('<span class="ui-icon ui-icon-' + $(element).attr('data-icon') + ' ui-icon-shadow" />');
            }
        });
    });
});​​

Вот демонстрация: http://jsfiddle.net/NHQGD/

23.04.2012
  • Это то, чего я боялся... Где форма запроса функции? знак равно 24.04.2012
  • Это довольно крошечный плагин, 336 bytes minified. 24.04.2012
  • Да, он крошечный, но он не охватывает все основы: data-iconpos, например. Также не обрабатывает вызов selectmenu() или срабатывание create для динамического содержимого. Не то чтобы я ожидал этого от ответа ТАК, но я уверен, что вы поняли мой дрейф =) 24.04.2012
  • Нет, это основная идея, которую вы можете конкретизировать по мере необходимости. 24.04.2012
  • что, если у меня нет значка данных для каждой опции? Я получаю значения меню выбора со стороны сервера. 01.03.2013
  • @Zakos У тебя есть варианты. 1) Если JS встроен на динамической странице, вы можете просто жестко закодировать значок в правильном месте в JS. 2) Если ваш JS должен быть внешним или не может быть построен динамически, вы можете сохранить нужные данные как data-attribute в каком-либо элементе (например, элементе body) или в скрытом вводе формы, а затем прочитать это значение в JS . 01.03.2013
  • спасибо за ответ, я пытался много часов и безуспешно, я пробовал что-то вроде var 'zakos = $('#zakosList-menu');' но потом я застрял в том, как добраться до каждой опции и добавить ее 01.03.2013
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..