Сообщений в теме: 3

[i001]

На данный момент есть 2 варианта селекта в фильтрах оба со своими плюсами и минусами. Предлагаю еще один на основе jquery.multiselect.js

Плюсы по моему мнениею:
- занимает мало места

- более удобен и эстетичен)

Что делаем

- В фильтре указываем в качестве шаблона стандартный селект

- скачаиваем архив с js складываем в корень сайта (в моем случае это папка js в корне сайта)

- подключаем скрипты + стили тянем напрямую (можно скачать и подключить отдельно)

  <script src="/js/multiselect/jquery.ui.widget.min.js"></script>
  <script src="/js/multiselect/jquery.multiselect.js?1"></script>
  <link href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css" rel="stylesheet">
  <link href="/js/multiselect/jquery.multiselect.css" rel="stylesheet">
  <style>
    .ui-multiselect {
max-width: 100%;
}
  </style> 

Инициализируем скрипт

<script type="text/javascript">
 jQuery(document).ready(function($){
      jQuery('.jbzoo-filter select').multiselect({'checkAllText':'Все','uncheckAllText':'Снять все','selectedText':'# выбрано','noneSelectedText':'-Выбрать-','multiple':true,'filter':false,'ajaxRefresh':false});
})
</script>  

Получаем вот такой селект

 

Прикрепленные файлы

•  js.zip   62.2К   107 Количество загрузок:

[cj]

Круто! Попробую у себя...

[cj]

Нет... как-то криво все становится...

1. Выпадающий список появляется под футером (скорее всего конфликты скриптов или стилей)

2. В это выпадающем списке открываются сразу все списки фильтра

3. Невозможно применить фильтр\\

 

ПРОСТИТЕ МЕНЯ ПОЖАЛУЙСТА!!!!!!

Все работает )

 

Был не прав, это таблица стилей мультиселекта у меня не встала сначала.... Переместил в другое место и все запорхало!

 

Все круто!

Сообщение отредактировал cj: 01 October 2014 - 12:48

[Ёшкин Кот]

Дополню одну штуку... напоролся на ситуацию. когда скрипт инициализации срабатывает раньше,чем догружается плагин.
 
Как итог - то работает, то нет, на некоторых страничках - всегда срабатывает, на других - педалит и не понятно от чего.
 
Помогла задержка небольшая
 
Измененный код инициализации ниже. Может быть кому то пригодится.

<script type="text/javascript">
jQuery(document).ready(function($){
    setTimeout(function(){
        $('.jbzoo-filter select').multiselect({
            'checkAllText':'Выбрать все',
            'uncheckAllText':'Сбросить все',
            'selectedText':'# выбрано',
            'noneSelectedText':'-Выбрать-',
            'multiple':true,
            'filter':false,
            'ajaxRefresh':false
        });
    }, 0)
})
</script>

Сообщение отредактировал SmetDenis: 15 October 2014 - 14:37
отформатировал код