Опубликовано 29.03.2015, 22:11 by Jerry в разделе DLE / Хаки2

Кнопка "Подписаться на комментарии" и стилизация чекбокса

В процессе подгонки нового шаблона на DLE пришлось так же вносить правки и в движок.
С некоторыми полезными решениями, на мой взгляд, решил поделиться и с вами.

Для того, что бы перенести чекбокс и текст подписки на комментарии, необходимо открыть
/engine/modules/bbcode.php
найти строку

if ( isset($allow_subscribe) AND $allow_subscribe ) $code .= " " . $lang['c_subscribe'] . "";


И удалить эту часть
 " . $lang['c_subscribe'] . "


В результате будет так:
if ( isset($allow_subscribe) AND $allow_subscribe ) $code .= "";


После чего в шаблоне вставляем html код в необходимое место
<input type="checkbox" name="allow_subscribe" id="allow_subscribe" value="1" /><label for="allow_subscribe">Подписаться на комментарии</label>


И всего делов.

В дополнение к этому можно интересно оформить чекбокс средствами css.

HTML разметка:
<input type="checkbox" class="checkbox" id="checkbox" />
<label for="checkbox">Я переключаю чекбокс</label>

<input type="radio" class="radio" id="radio" />
<label for="radio">А я переключаю радиокнопку</label>


При этом важно, чтобы тег
<label>
обязательно был расположен после тега
<input>
.

CSS стили:

/* Cначала обозначаем стили для IE8 и более старых версий
т.е. здесь мы немного облагораживаем стандартный чекбокс. */
.checkbox {
	vertical-align: top;
	margin: 0 3px 0 0;
	width: 17px;
	height: 17px;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают
селекторы с плюсом. Показываем, что label кликабелен. */
.checkbox + label {
	cursor: pointer;
}

/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
в них все нижеследующие стили не сработают. */

/* Прячем оригинальный чекбокс. */
.checkbox:not(checked) {
	position: absolute;
	opacity: 0;
}
.checkbox:not(checked) + label {
	position: relative; /* будем позиционировать псевдочекбокс относительно label */
	padding: 0 0 0 60px; /* оставляем слева от label место под псевдочекбокс */
}
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
.checkbox:not(checked) + label:before {
	content: '';
	position: absolute;
	top: -4px;
	left: 0;
	width: 50px;
	height: 26px;
	border-radius: 13px;
	background: #CDD1DA;
	box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
.checkbox:not(checked) + label:after {
	content: '';
	position: absolute;
	top: -2px;
	left: 2px;
	width: 22px;
	height: 22px;
	border-radius: 10px;
	background: #FFF;
	box-shadow: 0 2px 5px rgba(0,0,0,.3);
	transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}
/* Меняем фон чекбокса, когда он включен. */
.checkbox:checked + label:before {
	background: #9FD468;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
.checkbox:checked + label:after {
	left: 26px;
}
/* Показываем получение фокуса. */
.checkbox:focus + label:before {
	box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}


Фокус заключается в использовании псевдоселекторов :checked и :not. При этом сам чекбокс или радиокнопка делаются невидимыми, а их эмуляция осуществляется с помощью псевдоселекторов :before и :after для тега
<label>
, который, как мы знаем, переключает состояния элемента формы, если он привязан к нему через атрибут for.

Update
В Dle 10.5 код немного отличается. Искать в /engine/modules/bbcode.php нужно эту строку:
if ( isset($allow_subscribe) AND $allow_subscribe ) $code .= "<br /><input type=\"checkbox\" name=\"allow_subscribe\" id=\"allow_subscribe\" value=\"1\" /><label for=\"allow_subscribe\">&nbsp;" . $lang['c_subscribe'] . "</label><br />";

Удалять это (2 раза):
<br /><input type=\"checkbox\" name=\"allow_subscribe\" id=\"allow_subscribe\" value=\"1\" /><label for=\"allow_subscribe\">&nbsp;" . $lang['c_subscribe'] . "</label><br />


Добавить комментарий

2 Комментария

  1. gik
    а можно инструкцию для dle 12.1 поподробней что в addcomments.tpl вписывать можно разжевать для особо одарённых))
  2. Jerry Пользователь offline автор
    Цитата: gik
    а можно инструкцию для dle 12.1 поподробней что в addcomments.tpl вписывать можно разжевать для особо одарённых))


    В 12ой линейке не ковырялся ещё, понятия не имею, что там изменилось. Но вставлять надо "<input type="checkbox" name="allow_subscribe" id="allow_subscribe" value="1" /><label for="allow_subscribe">Подписаться на комментарии</label>"

Добавление комментария

Я бы хотел услышать Ваши мысли. Не стесняйтесь оставить свой комментарий и присоединиться к беседе!

Чей это блог?
Введите код: * Кликните на изображение чтобы обновить код, если он неразборчив