Картинки вместо RadioList в Yii2

Замена радиокнопок картинками в php-фреймворке Yii2.

Исходные radiobutton выглядят привычно, но иногда этого недостаточно.

Для начала подготовим изображения. Нам потребуется две картинки соответствующие разному статусу чекбокса — когда он включен и выключен (рис. 1). На рисунке серые картинки являются неактивными, синие - активными.

Лучше всего объединить две картинки в одну, сделать из них CSS-спрайт. Если этого не сделать, то первая картинка покажется сразу после загрузки, а вторая начнёт загружаться только после щелчка по чекбоксу. Несмотря на малый размер изображений и объём загружаемого файла, на загрузку и отображение картинки в первый раз потребуется какое-то время. Даже когда речь идёт о доли секунды эта задержка заметна визуально. Если же мы объединим рисунки в одно изображение, то оно будет загружаться целиком и показываться без малейшего замедления. Чтобы создать иллюзию того, что у нас одна картинка, а не две, надо ограничить размеры элемента и выводить изображение в виде фона. И в нужный момент просто-напросто смещать фон вверх или вниз.
Берется стандартный для ActiveForm RadioList, убираем Label.

<?= $form->field($model, 'auto_type')->radioList(
        ['mas'=>'Массив названий'],
        ['Настройки']
    )->label(false);
?>

Массив названий будет выглядеть следующим образом:

['sedan'=>'Седан','universal'=>'Универсал','vnedorojnik'=>'Внедорожник','minivan'=>'Минивэн','kabrio'=>'Кабриолет','pickup'=>'Пикап','minibus'=>'Миниавтобус','furgon'=>'Фургон','platform'=>'Платформа']

В настройках прописываем шаблон элементов:

['item' => function($index, $label, $name, $checked, $value) {
                $check = $checked ? ' checked="checked"' : '';
                $return = '<div class="col-md-1" id="autotype" style="width: 11.11111%;margin-top: 12px;"><label class="'. $value .'">';
                $return .= '<input type="radio" name="' . $name . '" value="' . $value . '" tabindex="3" '.$check.'>';
                $return .= '<span></span><p>' . ucwords($label) . '</p>';
                $return .= '</label></div>';
                return $return;
            }
]

Переменные $index, $label, $name, $checked, $valueявляются стандартными.
Переменная
$check = $checked ? ' checked="checked"' : '';проверяет отметку, если она уже есть в базе данных.
В таблице стилей убираем стиль для input:

<style type="text/css">
.sedan > input[type=radio] {
        display: none;
}
</style>

Каждый элемент имеет стиль:

<style type="text/css">
.sedan > span {
        background: url(/uploads/img/sedan.png);
        display:inline-block;
        width:70px;
        height:35px;
        vertical-align:middle;
        margin: 5px;
        border: 1px #fff;
}
.sedan > input[type=radio]:checked + span {
        background: url(/uploads/img/sedan_ok.png);
        color: #637cb2;
}
<style>

В результате, вместо радиокнопок будут выводится картинки, как на рисунке 1. И при редактировании (модель CRUD) уже будет отмечена та радиокнопка, которую отметили при создании.
Таким образом, при помощи фреймворка Yii2 ускорятся процесс написания кода.
Подобным способом, с применением css-фреймворка Bootstrap делается выбор цвета кузова автомобиля, как на рисунке 2.
В данном случае, реализация выглядит еще проще, так как из массива элементов можно брать название цвета ($value) и сразу вставлять его:

<span style="background-color: '.$value.';" class="tooltips" data-original-title="' . ucwords($label) . '"></span>

скачать dle 11.1смотреть фильмы бесплатно