Как организовать стили для разных selectmenu?

Question

[nepster-web]

Использую jQuery UI: jqueryui.com/selectmenu

На странице нужно в разных местах использовать селекты разных стилей. У меня есть класс .primary (синий) и .orange (оранжевый).

Пример реализации:
jsbin.com/kujesotoge/1/edit?html,output

Как видно зи примера все работает кроме стилей при нажатии. Тоесть у меня не получается применить стили исходя из primary и orange к выпадающему списку.

Все дело в том, что jquery ui генерирует div внизу страницы для каждого селекта и показывает его при нажатии.

Эти стили можно оформить вот так:

.ui-state-focus.ui-corner-top {
  border: solid 1px @color-style-primary-border;
  .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
}

.ui-widget-content {
  border: 1px solid @color-brand-primary-border;
  background: @color-brand-primary;
  color: #ffffff;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  color: #ffffff;
  font-weight: 400;
}

Но это будет общее оформление для всех, а вот как их оформить исходя из класса primary или orange ?

Answer 1

[Михаил Горячкин]

У каждого из списков, которые показываются при клике по селекту есть свой уникальный идентификатор вот по ним и можете прописывать стили:
#ui-id-1-menu
#ui-id-2-menu
Либо если вам необходим именно класс добавить, то вы можете сделать так:

$(document).ready(function () {
 var selects = $('select'), ln = selects.length;

   for(var i = 0; i < ln; i++) {
     var loc = $(selects[i]), tmenu ;
     loc.selectmenu();
     tmenu = '#' + loc .attr('id') + '-menu';
     var style = loc.data('style');
     $(tmenu).parent().addClass(style);
   } 
});

Comments

[nepster-web]

вот эта штука не работает. Тоесть не вешает классы. =(

[Михаил Горячкин]

Вот попробуйте так. Код в ответе заменил.

[nepster-web]

Михаил Горячкин: там еще не все так просто есть много классов оберток. У меня получилось накостылить вот так:

$("select").selectmenu({
open: function( ul, item ) {
var target = $(ul.target);
var tmenu = '#' + target.attr('id') + '-menu';
var style = target.data('style');
$(tmenu).parent().addClass(style);
}
});

Что думаете ?

[Михаил Горячкин]

Да работать будет, только вынесите нахождение нужного блока за пределы плагина, а то его поиск будет производиться каждый раз, как вы кликнете на селект. Обновил коде.

[nepster-web]

Михаил Горячкин: здорово, спасибо.