Default Green Orange
Gemini_13's Blog
Блокнот полезных вещей
Home
    • Карта сайта
    • Обо мне
RSS

Поля форм на Yii2: CheckboxList()

Разное, Скрипты Add comments

Это первая статейка с примерами из серии работы с полями в ActiveForm в Yii2. Постараемся, чтобы эта серия статей максимально покрывала самые популярные варианты использования полей. Чтение официальной документации никто не отменял 😀

Примеры содержат в себе код на PHP и получаемый результат на HTML, как его генерируем Yii2.

Внимание: Примеры будут обновляться, так как не задеты вопросы вывода ошибок и валидации полей на стороне клиента.

Список примеров:
1. Стандартное использование
2. Убираем враппер div.form-group
3. Заменяем класс form-group на свой
4. Заменяем враппер div.form-group на свой тег и со своим классом
5. Кастомный вид одного чекбокса

Небольшая оговорка для упрощения примеров. Под переменной $interest_categories подразумевается такой вот массив:

$interest_categories = [
	1	=> 'Mind Body Spirit Events/Workshops/Courses/Tours',
	2	=> 'New Age/Paranormal/Metaphysical Publications',
	3	=> 'UFO, Paranormal Events & Tours',
	4	=> 'Films & Documentaries/Sc-Fi Releases',
	5	=> 'Merchandise/Health Products and Services',
	6	=> 'None. (Its OK, We Are Not Offended)',
];


Стандартное использование
Пример стандартного использования checkboxlist() в Yii2.

<?= $interest_form->field($interest_model, 'interest_category_id')->checkboxlist($interest_categories);?>
<div class="form-group field-usersinterestcategoriesform-interest_category_id required">
	<input type="hidden" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;" value="">
	<div id="usersinterestcategoriesform-interest_category_id">
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="1">Mind Body Spirit Events/Workshops/Courses/Tours</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="2">New Age/Paranormal/Metaphysical Publications</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="3">UFO, Paranormal Events & Tours</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="4">Films & Documentaries/Sc-Fi Releases</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="5">Merchandise/Health Products and Services</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="6">None. (Its OK, We Are Not Offended)</label></div>
	</div>
</div>

Убираем враппер div.form-group
В данном примере видно как можно убрать враппер div.form-group внутри которого лежат чекбоксы.

<?= $interest_form->field(
	$interest_model,
	'interest_category_id', [
	'options' => [
		'tag'	=> false,
	]
])->checkboxlist($interest_categories);?>
<input type="hidden" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;" value="">
<div id="usersinterestcategoriesform-interest_category_id">
	<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="1">Mind Body Spirit Events/Workshops/Courses/Tours</label></div>
	<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="2">New Age/Paranormal/Metaphysical Publications</label></div>
	<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="3">UFO, Paranormal Events & Tours</label></div>
	<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="4">Films & Documentaries/Sc-Fi Releases</label></div>
	<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="5">Merchandise/Health Products and Services</label></div>
	<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="6">None. (Its OK, We Are Not Offended)</label></div>
</div>

Заменяем класс form-group на свой
Поменяем класс враппера div.form-group на div.trololo.

<?= $interest_form->field(
	$interest_model,
	'interest_category_id', [
	'options' => [
		'class'	=> 'trololo',
	]
])->checkboxlist($interest_categories);?>
<div class="trololo field-usersinterestcategoriesform-interest_category_id required">
	<input type="hidden" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;" value="">
	<div id="usersinterestcategoriesform-interest_category_id">
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="1">Mind Body Spirit Events/Workshops/Courses/Tours</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="2">New Age/Paranormal/Metaphysical Publications</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="3">UFO, Paranormal Events & Tours</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="4">Films & Documentaries/Sc-Fi Releases</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="5">Merchandise/Health Products and Services</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="6">None. (Its OK, We Are Not Offended)</label></div>
	</div>
</div>

Заменяем враппер div.form-group на свой тег и со своим классом
Полностью заменим тег и класс для враппера с div.form-group на span.trololo.

<?= $interest_form->field(
	$interest_model,
	'interest_category_id', [
	'options' => [
		'tag'	=> 'span',
		'class'	=> 'trololo',
	]
])->checkboxlist($interest_categories);?>
<span class="trololo field-usersinterestcategoriesform-interest_category_id required">
	<input type="hidden" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;" value="">
	<div id="usersinterestcategoriesform-interest_category_id">
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="1">Mind Body Spirit Events/Workshops/Courses/Tours</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="2">New Age/Paranormal/Metaphysical Publications</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="3">UFO, Paranormal Events & Tours</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="4">Films & Documentaries/Sc-Fi Releases</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="5">Merchandise/Health Products and Services</label></div>
		<div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm&#91;interest_category_id&#93;&#91;&#93;" value="6">None. (Its OK, We Are Not Offended)</label></div>
	</div>
</span>

Кастомный вид одного чекбокса
В этом примере видно как можно кастомизировать внешний вид одноо чекбокса. Для комбинации можно применить опции из примеров выше.

<?= $form->field($model, 'country_id')->checkboxlist($interest_categories, [
	'item' => function($index, $label, $name, $checked, $value)
		{
			return '<div class="checkbox">
				<label for="interview-'. $index .'">
					<input id="interview-'. $index .'" name="'. $name .'" type="checkbox" '. $checked .' value="'. $value .'">
					<span></span>
					'. $label .'
				</label>
			</div>';
		}
]);?>
<div class="form-group field-users-country_id required">
	<input type="hidden" name="Users&#91;country_id&#93;" value=""><div id="users-country_id">
	<div class="checkbox">
		<label for="interview-0">
			<input id="interview-0" name="Users&#91;country_id&#93;&#91;&#93;" type="checkbox"  value="1">
			<span></span>
			Mind Body Spirit Events/Workshops/Courses/Tours
		</label>
	</div>

	<div class="checkbox">
		<label for="interview-1">
			<input id="interview-1" name="Users&#91;country_id&#93;&#91;&#93;" type="checkbox"  value="2">
			<span></span>
			New Age/Paranormal/Metaphysical Publications
		</label>
	</div>

	<div class="checkbox">
		<label for="interview-2">
			<input id="interview-2" name="Users&#91;country_id&#93;&#91;&#93;" type="checkbox"  value="3">
			<span></span>
			UFO, Paranormal Events & Tours
		</label>
	</div>

	<div class="checkbox">
		<label for="interview-3">
			<input id="interview-3" name="Users&#91;country_id&#93;&#91;&#93;" type="checkbox"  value="4">
			<span></span>
			Films & Documentaries/Sc-Fi Releases
		</label>
	</div>

	<div class="checkbox">
		<label for="interview-4">
			<input id="interview-4" name="Users&#91;country_id&#93;&#91;&#93;" type="checkbox"  value="5">
			<span></span>
			Merchandise/Health Products and Services
		</label>
	</div>

	<div class="checkbox">
		<label for="interview-5">
			<input id="interview-5" name="Users&#91;country_id&#93;&#91;&#93;" type="checkbox"  value="6">
			<span></span>
			None. (Its OK, We Are Not Offended)
		</label>
	</div>
</div>

2 июня, 2016  
Tags: activeform, yii2

Leave a Reply

  • Рубрики

    • FreeBSD (20)
    • Linux (46)
    • MySQL (11)
    • Windows (14)
    • Железо (3)
    • Мои моды к TorrentPier II (16)
    • Настройка сервера (49)
    • Разное (33)
    • Скрипты (30)
  • Свежие записи

    • Поля форм на Yii2: textInput(), passwordInput() и hiddenInput()
    • Поля форм на Yii2: CheckboxList()
    • SpeedTest датацентров Digital Ocean
    • Патчим Gearman на Debian
    • nginx + Apache 2.4 и REMOTE_ADDR (решение проблемы)
    • Создание и подключение swap-файла в Debian
    • Запуск PhpStorm 9 x64 на Windows
    • Рекурсивная замена прав доступа для папок и файлов в Linux
    • VirtualBox 5 + phpVirtualBox на Debian 8.2 (jessie)
    • Обработка сессий PHP с помощью Redis + phpredis на Debian 7.8
  • Ссылки

    • My GitHub
  • Архивы

    • Июнь 2016 (2)
    • Март 2016 (2)
    • Январь 2016 (3)
    • Ноябрь 2015 (2)
    • Август 2015 (1)
    • Февраль 2015 (1)
    • Январь 2015 (7)
    • Октябрь 2014 (1)
    • Июнь 2014 (1)
    • Май 2014 (1)
    • Апрель 2014 (7)
    • Февраль 2014 (9)
    • Январь 2014 (5)
    • Декабрь 2013 (7)
    • Ноябрь 2013 (1)
    • Октябрь 2013 (3)
    • Август 2013 (4)
    • Июль 2013 (4)
    • Июнь 2013 (3)
    • Апрель 2013 (2)
    • Март 2013 (2)
    • Февраль 2013 (6)
    • Январь 2013 (2)
    • Декабрь 2012 (1)
    • Ноябрь 2012 (2)
    • Октябрь 2012 (7)
    • Сентябрь 2012 (22)
Все права защищены © 2016 Gemini_13's Blog
G13.org.ua