Select с иконками

Возврат к списку

Хотел поделиться опытом создания выпадающих списков с иконками. Select`ы очень удобны в своем использовании, но а что если выпадающий список хочется украсить, к примеру у нас две версии сайта: Английская и Русская, мы можем в текстовом виде указать обозначение языков, но гораздо приятнее будет смотреться список если мы в него добавим еще иконки флагов.

Для решения этой задачи нам понадобится библиотека ms Dropdown , библиотека так же доступна на Гитхабе. Последний релиз был выложен 13 июля 2013 года. Итак, качаем библиотеку, для работы нам нужно подключить на сайте JS файл jquery.dd.js и файл стилей dd.css.

После того, как подключили, инициализируем библиотеку:

$(document).ready(function(e) {
try {
$("select").msDropDown();
} catch(e) {
alert(e.message);
}
});

Иконки для выпадающего списка  сситема бурут из атрибута data-image, который нужно установить option. Вот пример: 

<select name="webmenu" id="webmenu">
		<option>Выберите цвет</option>
		<option value="2" data-image="/bitrix/templates/.default/img/iconlight/БелыйТеплый.png">Белый (теплый)</option>
		<option value="2" data-image="/bitrix/templates/.default/img/iconlight/БелыйДневной.png">Белый (дневной)</option>
		<option value="2" data-image="/bitrix/templates/.default/img/iconlight/Белый.png">Белый</option>
		<option value="2" data-image="/bitrix/templates/.default/img/iconlight/БелыйХолодный.png">Белый (холодный)</option>
		<option value="1" data-image="/bitrix/templates/.default/img/iconlight/Мультицвет.png">Мультицвет</option>
		<option value="2" data-image="/bitrix/templates/.default/img/iconlight/Красный.png">Красный</option>		
		<option value="2" data-image="/bitrix/templates/.default/img/iconlight/Желтый.png">Желтый</option>
		<option value="2" data-image="/bitrix/templates/.default/img/iconlight/Оранжевый.png">Оранжевый</option>
		<option value="2" data-image="/bitrix/templates/.default/img/iconlight/Розовый.png">Розовый</option>
		<option value="2" data-image="/bitrix/templates/.default/img/iconlight/Зеленый.png">Зеленый</option>
		<option value="2" data-image="/bitrix/templates/.default/img/iconlight/Синий.png">Синий</option>
		<option value="2" data-image="/bitrix/templates/.default/img/iconlight/Ультрафиолетовый.png">Ультрафиолетовый</option>
		<option value="2" data-image="/bitrix/templates/.default/img/iconlight/ИК850.png">ИК 850</option>
	</select>   

На этом настройка закончена, забыл упомянуть что обязательно на сайте должна быть подключена библиотека JQuery не ниже версии 1.9.0. После всех манипуляций, мы получаем во  такой вот красивый список:

SelectИИконки.png

При инициализации библиотеки вы можете указать дополнительные параметры, вот их список:

                mainCSS: 'dd',
		height: 120, //not using currently
		visibleRows: 7,
		rowHeight: 0,
		showIcon: true,
		zIndex: 9999,
		useSprite: false,
		animStyle: 'slideDown',
		event:'click',
		openDirection: 'auto', //auto || alwaysUp || alwaysDown
		jsonTitle: true,
		style: '',
		disabledOpacity: 0.7,
		disabledOptionEvents: true,
		childWidth:0,
		enableCheckbox:false, //this needs to multiple or it will set element to multiple
		checkboxNameSuffix:'_mscheck',
		append:'',
		prepend:'',
		reverseMode:true, //it will update the msdropdown UI/value if you update the original dropdown - will be usefull if are using knockout.js or playing with original dropdown
		roundedCorner:true,
		enableAutoFilter:true,

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

>

29.10.2017 в 21:03
0
Буду благодарен автору, если он еще подскажет где прописывать дополнительные параметры при инициализации. А так автору огромный респект, выручил.
ответная реплика
adminadmin29.10.2017 в 21:28
0
Например:
$("select").msDropdown({roundedBorder:false,height:100});

ответная реплика


Возврат к списку