Нестандартный select (dropdown) плагин jQuery?

Question

[55k_filatov]

Здравствуйте. Столкнулся с проблемой поиска плагина, не могли бы помочь?

Ищу плагин для селекта. Работать он должен как на картинке, выбранный результат остается всегда по середине, а остальные варианты равномерно распределены вверх и вниз. Искал по разным запросам, но везде натыкаюсь на варианты где выпадает список вниз или вверх, а не на обе стороны.

Заранее спасибо, Константин.

Answer 1

[Ольга Стогова]

jsfiddle.net/helgastogova/u5C5v
пишу все очень примерно, чтобы изложить идею, писать надо будет больше, стили только нужные для того чтобы показать идею

теги

<div class="select__list">
                    <span>1</span>
                    <ul>
                        <li class="active">1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>

стили

.select__list{
   position: relative;
   ul{
     top: 0px;
     position: absolute;
     display: none;
   }
 }

скрипт

//при клике на элемент показываем список — селектлист
    $('.select__list').click(function(){
        $(this).find('ul').show();
        });
    //при клике на пункт селектлиста — передаем его значение в span (его вам надо будетт передать в input hidden еще, или как у вас там работает форма
    $('.select__list li').click(function(){
     
        $(this).parent().parent().find('span').html($(this).html());
        //запоминаем порядок элемента, на который мы кликнули (если первый то сдвиг 0, второй сдвиг а высоту li. третий на 2 высоты и т.д.. таким образом он должен быть всегда сдвинут к активной строке)
        var top_count = $(this).index();
        var li_height = $('.select__list li').height();//ну они конечно в этом случае одинаковыми должны быть
        $('.select__list ul').css('top',-(top_count*li_height)+'px');
        //так же можно добавить активный класс, чтобы приписать на него стрелочки
        $('.select__list li').removeClass('active');
        $(this).addClass('active');
        //скрываем ul
        $(this).find('ul').hide();
        });

Comments

[55k_filatov]

Спасибо!

[55k_filatov]

Вы не могли подсказать, возможно ли сделать так, чтобы активный пункт меню всегда оставался в центре, а остальные распределялись вверх и вних?
Вот пример, что вышло в итоге — https://www.dropbox.com/sh/0k5lu7z942xmkg8/AAC7SRB...
То есть сейчас список меняет свое положение, активный по центру, но остальные либо по центру, либо сверху, либо снизу.

У меня тяжело с jQuery, спасибо за помощь вам :-)

[Ольга Стогова]

@k_filatov вставьте ссылку по-другому, или расшарьте мне этот dropbox на [e-mail], тут она обрезается

[Ольга Стогова]

@k_filatov кроме того, что я б фиксировала ширину области, где выбранное слово, чтобы она не прыгала, мне кажется, все правильно)

но вам наверное, надо, чтобы все время по центру было среднее слово? Если да, то изначальный отступ надо ставить по центру, т.е. задавать css
{
top: 50%,
margin-top: -(высота ul-селектлиста)/2
}
или
{
top: (рассчитанный фиксированный отступ, равный величине высоты одного li)
}

и не менять ее при выборе, т.е. это не надо

var top_count = $(this).index();
var li_height = $('.select__list li').height();//ну они конечно в этом случае одинаковыми должны быть
$('.select__list ul').css('top',-(top_count*li_height)+'px');

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

и еще надо дописать сюда
$('.select__list').click(function(){
$('.select__list ul').hide(); <--- это, чтобы открытой был только один select в одно время
$(this).find('ul').show();
});

[55k_filatov]

Спасибо, все получилось :-)

[Ольга Стогова]

@k_filatov пожалуйста)

Answer 2

[Алексей]

Что-то мне подсказывает что и не найдете - самому писать придется и сортировать список как надо.
Либо возьмите с того сайта что на скрине - если это не дизайн :)

Comments

[55k_filatov]

К сожалению дизайн )