Перейти к содержимому


Фотография
- - - - -

Мультиселект для фильтра


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

#1 i001

i001

Отправлено 07 September 2014 - 20:15

*
Популярное сообщение!

На данный момент есть 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>  

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

 

6b4d22fa9031c9ecb3d8604a2f7c5d3797b5f556.jpg

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

  • Прикрепленный файл  js.zip   62.2К   69 Количество загрузок:

  • 6

#2 cj

cj

Отправлено 30 September 2014 - 14:51

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


  • 0

#3 cj

cj

Отправлено 01 October 2014 - 12:36

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

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

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

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

 

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

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

 

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

 

Все круто!


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

  • 1

#4 Ёшкин Кот

Ёшкин Кот

Отправлено 14 October 2014 - 14:04

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

  • 2




Click to return to top of page in style!