Картинки вместо RadioList в Yii2
Замена радиокнопок картинками в php-фреймворке Yii2.
Рисунок 1 - Реализация картинок вместо radiobutton
Лучше всего объединить две картинки в одну, сделать из них CSS-спрайт. Если этого не сделать, то первая картинка покажется сразу после загрузки, а вторая начнёт загружаться только после щелчка по чекбоксу. Несмотря на малый размер изображений и объём загружаемого файла, на загрузку и отображение картинки в первый раз потребуется какое-то время. Даже когда речь идёт о доли секунды эта задержка заметна визуально. Если же мы объединим рисунки в одно изображение, то оно будет загружаться целиком и показываться без малейшего замедления. Чтобы создать иллюзию того, что у нас одна картинка, а не две, надо ограничить размеры элемента и выводить изображение в виде фона. И в нужный момент просто-напросто смещать фон вверх или вниз.
Берется стандартный для ActiveForm RadioList, убираем Label.
Переменная
В таблице стилей убираем стиль для input:
Таким образом, при помощи фреймворка Yii2 ускорятся процесс написания кода.
Подобным способом, с применением css-фреймворка Bootstrap делается выбор цвета кузова автомобиля, как на рисунке 2.
![](https://pp.vk.me/c837724/v837724967/13cfe/v7BWiMM9y2w.jpg)
Исходные radiobutton выглядят привычно, но иногда этого недостаточно.
Для начала подготовим изображения. Нам потребуется две картинки соответствующие разному статусу чекбокса — когда он включен и выключен (рис. 1). На рисунке серые картинки являются неактивными, синие - активными.
![](https://pp.vk.me/c837724/v837724967/13cc1/jVur1gMw1PQ.jpg)
Лучше всего объединить две картинки в одну, сделать из них 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.
![](https://pp.vk.me/c837724/v837724967/13cfe/v7BWiMM9y2w.jpg)
Рисунок 2 - Реализация выбора цвета автомобильного кузова
В данном случае, реализация выглядит еще проще, так как из массива элементов можно брать название цвета ($value) и сразу вставлять его:<span style="background-color: '.$value.';" class="tooltips" data-original-title="' . ucwords($label) . '"></span>
Комментариев 1