Дизайн Фильтра
#1
Отправлено 13 Февраль 2014 - 14:38
Вот описание В данном скрипте происходит скрытие стандартных форм и постановка на их место своих картинок с применением jQuery. Не Везде checkbox и radio хорошо смотрятся и если вас неудовлетворяют или не подходят к дизайну интерфейса обычные формы, то прошу качать этот плагин.
Код очень легкий и к тому же вы всегда можете поменять дизайн флажков, так как это просто навсего картинки. На место них можете крепить, что угодно. Html код:
<div>
<input checked="checked" id="CheckBox1" class="CheckBoxClass" type="checkbox">
<label id="Label1" for="CheckBox1" class="CheckBoxLabelClass LabelSelected">Checkbox 1</label>
<input checked="checked" id="CheckBox2" class="CheckBoxClass" type="checkbox">
<label id="Label2" for="CheckBox2" class="CheckBoxLabelClass LabelSelected">Checkbox 2</label>
</div>
<div>
<input checked="checked" id="Radio1" class="RadioClass" name="group1" type="radio">
<label id="Label1" for="Radio1" class="RadioLabelClass RadioSelected">Radio 1</label>
<input id="Radio2" class="RadioClass" name="group1" type="radio">
<label id="Label2" for="Radio2" class="RadioLabelClass">Radio 2</label>
<input id="Radio3" class="RadioClass" name="group1" type="radio">
<label id="Label3" for="Radio3" class="RadioLabelClass">Radio 3</label>
</div>
Простой Css без излишеств:
.CheckBoxClass,.RadioClass{
display: none;
}
.CheckBoxLabelClass{
background: url("UnCheck.png") no-repeat;
padding-left: 30px;
padding-top: 3px;
margin: 5px;
height: 28px;
width: 150px;
display: block;
}
.CheckBoxLabelClass:hover, .RadioLabelClass:hover{
text-decoration: underline;
}
.LabelSelected{
background: url("Check.png") no-repeat;
}
.RadioLabelClass{
background: url("UnCheck.png") no-repeat;
padding-left: 30px;
padding-top: 3px;
margin: 5px;
height: 28px;
width: 70px;
display: block;
float: left;
}
.RadioSelected{
background: url("Check.png") no-repeat;
}
И подключаем js, который есть в архиве.
Как это сделать?к сожалению файл jquery-1.js загрузить не могу
#2
Отправлено 14 Февраль 2014 - 00:40
#3
Отправлено 14 Февраль 2014 - 13:26
Сake (14 Февраль 2014 - 00:40) писал:
Если честно, ничего из темы не понятно, можно установить нельзя.
Может объясните поподробнее, на этом примере. Думаю многим начинающим будет интересно.
#4
Отправлено 15 Февраль 2014 - 00:10
#6
Отправлено 22 Февраль 2014 - 00:31
<option value="1" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}selected="selected"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</option>
и замените её на
{% IF filter_attr_list.values.NB_GOODS_FILTERED > 0 %} <option value="1" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}selected="selected"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</option> {% ENDIF %}
чуть ниже найдите
<option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option>
и замените на
{% IF filter_prop_list.values.NB_GOODS_FILTERED > 0 %} <option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option> {% ENDIF %}
#7
Отправлено 28 Февраль 2014 - 10:26
#8
Отправлено 25 Июнь 2014 - 12:19
Сake (22 Февраль 2014 - 00:31) писал:
[/CODE]
<!-- Фильтры по товарам. Появляются только на странице категории и поиска по товарам --> {% IF SHOW_GOODS_FILTERS %} <div class="filters"> <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь --> <form action="" method="get"> <div class="contentTbodySearchFilterBlock cornerAll"> <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) --> {% FOR filter_attr_list %} <div class="contentTbodySearchFilterBlockValues"> {filter_attr_list.NAME}:<br /> <select onchange="$(this).attr('name', $(this).find('option:selected').attr('rel'));this.form.submit();" name="{% FOR values %}{% IF filter_attr_list.values.CHECKED %}form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]{% ENDIF %}{% ENDFOR %}"> <option> - все - </option> {% FOR values %} <option value="1" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}selected="selected"{% ENDIF %}>{filter_attr_list.values.VALUE}</option> {% ENDFOR %} </select> </div> {% ENDFOR %} <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) --> {% FOR filter_prop_list %} <div class="contentTbodySearchFilterBlockValues"> {filter_prop_list.NAME}:<br /> <select onchange="$(this).attr('name', $(this).find('option:selected').attr('rel')); this.form.submit();" name="{% FOR values %}{% IF filter_prop_list.values.CHECKED %}form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]{% ENDIF %}{% ENDFOR %}"> <option> - все - </option> {% FOR values %} <option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ENDIF %}>{filter_prop_list.values.VALUE}</option> {% ENDFOR %} </select> </div> {% ENDFOR %} <div class="clear"></div> </div> </form> </div> {% ENDIF %} {% ENDIF %} <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->
#9
Отправлено 26 Июнь 2014 - 00:42
<option value="1" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}selected="selected"{% ENDIF %}>{filter_attr_list.values.VALUE}</option>
и строка
<option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ENDIF %}>{filter_prop_list.values.VALUE}</option>
данный строки необходимо просто обвернуть в условие указанное в сообщении ранее.
#10
Отправлено 21 Ноябрь 2014 - 12:51
Сake (22 Февраль 2014 - 00:31) писал:
<option value="1" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}selected="selected"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</option>
и замените её на
{% IF filter_attr_list.values.NB_GOODS_FILTERED > 0 %} <option value="1" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}selected="selected"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</option> {% ENDIF %}
чуть ниже найдите
<option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option>
и замените на
{% IF filter_prop_list.values.NB_GOODS_FILTERED > 0 %} <option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option> {% ENDIF %}
Добрый день!
Подскажите,а как можно тоже самое сделать в шаблоне "Движение"?
#11
Отправлено 25 Ноябрь 2014 - 02:23
#12
Отправлено 12 Декабрь 2015 - 04:05
У меня уже установлены фильтры в боковое меню, хотелось бы изменить их стилизацию на такую, как показано в посте 1.
Немного непонятно, куда именно вставить код из первого поста? У меня шаблон шоколад.
Заранее благодарю за ответы.
#13
Отправлено 17 Декабрь 2015 - 03:51
Vaccina (25 Ноябрь 2014 - 02:23) писал:
Что-то никто не отвечает уже почти неделю...
Опять вся надежда на Вас!
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных