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


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

checkbox Фильтр по цвету стилями (jbzoo 2.1.2)

фильтр цвет изображение иконка стиль checkbox

Лучший Ответ Atomic , 17 January 2014 - 13:35

 

Если я вас правильно понял, тогда 

jbuniversal/framework/helpers/jbhtml.php

 

Спасибо! 12 часов бился :

 

На всякий случай, может кому пригодится:

Если у вас в фильтре расположена конструкция <label> <input> Текст </label>,

то лезем в указанный php файл, находим код:

            if ($isLabelWrap) {
                $html[] = '<label ' . $this->_buildAttrs($extraLabel) . '>'
                    . ' <input ' . $this->_buildAttrs($extra) . ' /> '
                    . $text . '</label>';

            } else {
                $html[] = ' <input ' . $this->_buildAttrs($extra) . ' />'
                    . '<label ' . $this->_buildAttrs($extraLabel) . '> ' . $text . '</label>';

и меняем его на:

           if ($isLabelWrap) {
                $html[] = ' <input ' . $this->_buildAttrs($extra) . ' />'
                    . '<label ' . $this->_buildAttrs($extraLabel) . '> ' . $text . '</label>';

            } else {
                $html[] = '<label ' . $this->_buildAttrs($extraLabel) . '>'
                    . ' <input ' . $this->_buildAttrs($extra) . ' /> '
                    . $text . '</label>';

после чего применяем конструкцию в jbzoo.filter.css:

input[class="value-belyj"] {
display: none;
}

label[for^="idbelyj"] {
 display: inline-block;
height: 50px;
width: 50px;
border:1px #000 solid;
background: #FFF;
font-size: 0px;
}

input[class="value-belyj"]:checked + label[for^="idbelyj"] {
background: #000;

}
Перейти к сообщению


  • Закрытая тема Тема закрыта
Сообщений в теме: 2

#1 Atomic

Atomic

Отправлено 17 January 2014 - 12:58

Добрый день!

 

Решил сделать фильтрацию по цвету с стилем. Т.е., мне нужно получить строку с квадратиками разных цветов, без текста. При этом, если я нажал на флажок, стиль цветного квадратика должен поменяться (появляется рамочка).

 

Полазил в коде, почитал треды на форуме:

http://forum.jbzoo.c...tcvetu/?hl=цвет

http://forum.jbzoo.c...цвет#entry30437

 

Найденное решение для изменения стилей кнопок - изменение стиля соседнего элемента в зависимости от параметра checked - на моей версии jbzoo не сработало.

 

Начал разбор полётов.

1. Выяснилось, что в новой версии zoo/jbzoo id дива "label" не статичен и назначить ему стиль можно так:

дописываем файл /media/zoo/applications/jbuniversal/assets/css/jbzoo.filter.css

 

определяем стиль для дива, в котором выводится чекбокс выбора белого цвета

Смотрим в фаербаге на строку <label class="checkbox-lbl lbl-belyj" for="idbelyj-generated_number>

css:

label[for^="idbelyj"] {стили дива с идентификатором, начинающимся на idbelyj}

Поскольку наш ID теперь нестатичен, синтаксис следующего вида не подходит:

input#filterel128cad5a-5d2e-4f82-ba18-22e6d5009679belyj {
display: none;
}

решение для скрытия стандартного чекбокса следующее:

фаербагом смотрим на див input:

<input id="idbelyj-52d911d7e43c3" class="value-belyj" type="checkbox" name="e[95f6e743-ea9b-4452-851f-acc5ea5060ca][]" value="Белый">

input[class="value-belyj"] {
display: none;
}

О логике:

у нас есть два дива: label и input.

Нам надо передать в див label два стиля: базовый (его мы задаем без проблем) и при нажатом чекбоксе.

Т.е. при  input[class="id1"]:checked - стиль для label[for="id2"] должен меняться.

 

Так вот, на форуме вот здесь http://forum.jbzoo.c...цвет#entry30437 описана как раз такая ситуация.

 

На решенном примере, формат вывода был такой:

<input class="id1">

<label for="id2">Белый</label>

 

Т.е. два дива являются либо соседними (и в css подходит конструкция вида label[blabla] + input[blabla] {стиль} ), либо див label является дочерним по отношению к input. В этом случае подходят конструкции:

1. input[blabla] > label[blabla] {стиль}

2. input[blabla] label[blabla] {стиль}

 

На моём примере, формат вывода такой:

<label for="id2">

<input class="id1">Белый</label>

 

Т.е. див input является дочерним по отношению к диву label. Короче, это значит, что я не могу переопределить стиль дива LABEL исходя из наличия дочернего элемента.

 

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

/media/zoo/elements/checkbox/checkbox.php

 

Полез в код, и увидел, что стандартный элемент чекбокс от ZOO генерирует строку правильным образом, т.е. сначала input, потом label:

$html[]  = '<div>
              <input id="'.$name.$i.'" type="checkbox" name="'.$name.'" value="'.$option['value'].'"'.$checked.' />
              <label for="'.$name.$i++.'">'.$option['name'].'</label>
           </div>';

При попытке поменять этот код или вообще удалить всё, кроме

class ElementCheckbox extends ElementOption {
    public function edit(){return JText::_("There are no options to choose from.");}
}

- ничего не менялось. Вообще ничего, чекбоксы как выводились так и выводятся.

 

Стало понятно, что html строку с дивами label и input для стандартного элемента checkbox выводит не ZOO, а JBZoo

.

Вообще, у меня было две таблицы для товара: цвет (элемент select), пол (элемент checkbox). Т.е. при добавлении карточки товара, цвет выводится списком, а пол - чекбоксом.

В настройках шаблона фильтра  для "цвета" указан чекбокс, и для "пола" тоже чекбокс.

Так вот, если удалить файл zoo/elements/checkbox/checkbox.php,

то при выводе фильтра значения "пола" будут меняться (перестанут отображаться), а значения "цвета" - не будут.

И это наталкивает на:

 

Вопрос знатокам:

кто выводит чекбоксы в фильтре JBZoo для элементов произвольного вида (не для элементов ckeckbox)?


Сообщение отредактировал Atomic: 17 January 2014 - 13:00

  • 0

#2 tapakan

tapakan

Отправлено 17 January 2014 - 13:11

Если я вас правильно понял, тогда 

jbuniversal/framework/helpers/jbhtml.php

Сообщение отредактировал tapakan: 17 January 2014 - 13:16

  • 1

#3 Atomic

Atomic

Отправлено 17 January 2014 - 13:35   Лучший Ответ

 

Если я вас правильно понял, тогда 

jbuniversal/framework/helpers/jbhtml.php

 

Спасибо! 12 часов бился :

 

На всякий случай, может кому пригодится:

Если у вас в фильтре расположена конструкция <label> <input> Текст </label>,

то лезем в указанный php файл, находим код:

            if ($isLabelWrap) {
                $html[] = '<label ' . $this->_buildAttrs($extraLabel) . '>'
                    . ' <input ' . $this->_buildAttrs($extra) . ' /> '
                    . $text . '</label>';

            } else {
                $html[] = ' <input ' . $this->_buildAttrs($extra) . ' />'
                    . '<label ' . $this->_buildAttrs($extraLabel) . '> ' . $text . '</label>';

и меняем его на:

           if ($isLabelWrap) {
                $html[] = ' <input ' . $this->_buildAttrs($extra) . ' />'
                    . '<label ' . $this->_buildAttrs($extraLabel) . '> ' . $text . '</label>';

            } else {
                $html[] = '<label ' . $this->_buildAttrs($extraLabel) . '>'
                    . ' <input ' . $this->_buildAttrs($extra) . ' /> '
                    . $text . '</label>';

после чего применяем конструкцию в jbzoo.filter.css:

input[class="value-belyj"] {
display: none;
}

label[for^="idbelyj"] {
 display: inline-block;
height: 50px;
width: 50px;
border:1px #000 solid;
background: #FFF;
font-size: 0px;
}

input[class="value-belyj"]:checked + label[for^="idbelyj"] {
background: #000;

}

Сообщение отредактировал Atomic: 17 January 2014 - 13:36

  • 1





Темы с аналогичным тегами фильтр, цвет, изображение, иконка, стиль, checkbox

Click to return to top of page in style!