Есть ли в любом случае список с изображениями (с использованием двойного списка и плагина комбинированного списка изображений) или другое решение?

Question

Я использую плагин jquery dual listbox (который прекрасно работает), но я хочу, чтобы рядом с записями в каждом из списков были изображения. Я хотел применить функциональность, как вы делаете в этот плагин jobery комбинированного изображения .

Я пытался объединить эти два, но, похоже, это не сработало. я продолжаю получать исключение в строке .msdropdown () комбо-кода изображения.

Кто-нибудь смог получить эффект совместной работы этих плагинов или может предложить другой подход к решению этого требования.

Answer 1

Вот почему у вас будут проблемы с вашим подходом:

<option> в HTML <select> очень ограничены в том, что они будут делать - HTML-элементы внутри них удаляются, а стили CSS, которые добавляют изображения, не работают. Смотрите этот ответ:

• Можно ли стилизовать поле выбора?

Сценарий jquery.dd.js программно заменяет <select> на <div>, содержащий <span> s, а затем сам обрабатывает нажатия клавиш и события - для одного выберите раскрывающийся список.

Сценарий jquery.duallistbox-1.3.js использует элементы списка, находящиеся в <select>. Он не эмулирует события поведения выбора. Он использует поведение встроенного браузера (которое отличается на разных платформах) для множественного выбора.

Пока они стоят, они не совместимы. Чтобы объединить их, вам нужно будет эмулировать множественный выбор, используя <div>/<span> вместо <select>/<option>, в том числе с учетом различий платформы. Конечно, возможно, но не быстрое решение.

Answer 2

Я полностью согласен с комментариями @James Crook.

Однако вы можете попробовать этот рабочий пример Codepen , который я создал.

О решении:

Имея следующий select Код HTML-элемента:

<select name="webmenu" id="webmenu">
    <option value="calendar" data-image="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" data-image="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" data-image="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" title="icons/icon_email.gif">Email</option>
    <option value="faq" data-image="icons/icon_faq.gif">FAQ</option>
    <option value="games" data-image="icons/icon_games.gif">Games</option>
</select>

Сначала нужно применить jquery.duallistbox к этому select элементу HTML следующим образом:

$("select").DualListBox({
    json: false // use local data
    timeout: 300 // delay for filter functionality
});

В результате этот плагин создает два разных select HTML-элемента. И мы должны применить плагин jquery.msDropDown к каждому из них следующим образом:

$("select.unselected").msDropDown();
$("select.selected").msDropDown();

С этим пользовательский интерфейс готов.

Однако нам нужно сохранить функциональность для обоих плагинов. Нам нужно обновлять / перерисовывать dropdowns with icons каждый раз, когда пользователь вносит изменения либо:

1. нажатие на кнопки jquery.duallistbox:

   $('div.center-block button').on('click', updateDropdowns);
   

2. или связав внутри jquery.duallistbox фильтр input поле:

   $('input.filter').on('keyup', function(){
       // Following timeout value (300) should not be lower than
       // timeout option from DualListBox
       setTimeout(updateDropdowns, 300);
   });
   

Обратите внимание, что эти слушатели ссылаются на метод updateDropdowns. И здесь мы играем с DOM, чтобы заново отобразить выпадающие списки, применяя плагин jquery.msDropDown к каждому select HTML-элементам. Этот метод выглядит так:

var updateDropdowns = function(){
    // Update/re-render first dropdown
    $('select.selected').detach().appendTo('.col-md-5:last');
    $('.col-md-5:last').find('div').remove();
    delete $('select.selected').data().dd;
    $('select.selected').msDropdown();

    // Update/re-render second dropdown
    $('select.unselected').detach().appendTo('.col-md-5:first');
    $('.col-md-5:first').find('div').remove();
    delete $('select.unselected').data().dd;
    $('select.unselected').msDropdown();
};

Хочу подчеркнуть, что этот процесс может быть дорогим в плане производительности при работе с большим количеством options в select HTML-элементах. Определенно, это обходной путь, и лучшим выбором может быть метод .redraw(), который должен быть реализован для плагина jquery.msDropDown.

Надеюсь, что это решение поможет решить вашу проблему.

Answer 3

Чтобы не создавать заново мульти-выбор, который находится на странице, вам необходимо использовать плагин jQuery UI position (), чтобы расположить значки относительно позиции опции на странице.

Перейдите к опциям:

jQuery('select[multiple]').children('option').each(function() {
   var imgSrc = this.value + '.png';
   jQuery('<img src=" + imgSrc + '">').appendTo('body').position({
        // position properties
   });

});

Взгляните на http://jqueryui.com/demos/position/.

Вам придется обновлять положение значков каждый раз, когда обновляются списки.