17.08.2015

Стиль выпадающего списка в форме добавления элемента

В Битриксе можно создавать формы добавления элемента и за их счет можно создавать множество модулей таких как Отзывы, Комментарии, Формы связи и другого назначения. Но, например, если это форма добавления объявления, то будет поле выбора раздела публикации, а это большой список категорий с подкатегориями. Из-за этого пользователь просто будет путаться из-за однообразия оформления и длины списка.

Собственно, чтобы пользователю облегчить жизнь, нужно как-то этот список сделать по нагляднее, чтобы были выделены родительские разделы. Для этого на странице, где расположена форма добавления элемента (iblock.element.add) мы размещаем под ним javascript, который все нам "разукрасит".

<script type="text/javascript">
$("option").each(function (index, elem) {

var title = $(this).text();
if(title.indexOf(" . ") > -1) {$(this).css({'background-color' : '#1c1c1c', 'font-weight' : 'bold', 'color' : '#FFFFFF', 'font-size' : '18px'});}

var title = $(this).text();
if(title.indexOf(" . . ") > -1) {$(this).css({'background-color' : '#656565', 'color' : '#FFFFFF', 'font-size' : '14px'});}

var title = $(this).text();
if(title.indexOf(" . . . ") > -1) {$(this).css({'background-color' : '#d9d9d9', 'color' : '#000000', 'font-size' : '14px'});}

});

</script>

Если у Вас список множественного выбора, то можно сделать так, чтобы при наведении на него мышкой стандартная высота size 8 менялась на более широкую, например, size 25. Для этого добавляем тоже внизу еще один скриптик: <script type="text/javascript">
$("select").hover(
function () {
var title = 25;
$(this).attr("size", title);
},
function () {
var title2 = 8;
$(this).attr("size", title2);
}
);
</script>
Количество показов: 143526