Главная›JavaScript

jQuery-плагин для стилизации input[type=»checkbox»]

35 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина.

* * *

Чекбоксы

Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления через CSS элемента формы, называемого чекбоксом (либо флажком, либо галочкой), т.е. тега <input type="checkbox" />.

Демонстрация работы плагина

Примеры можно посмотреть на отдельной странице.

Достоинства

  • При отключенном JavaScript отображается стандартный чекбокс, т.е. его работоспособность не теряется.
  • Работает и для динамически добавляемых/изменяемых чекбоксов.
  • Маленький размер скрипта (чуть больше 1 килобайта).
  • Легко поддается оформлению через CSS.
  • Умеет «ловить» нажатие клавиши Tab.
  • Поддерживает атрибут «disabled».
  • Кроссбраузерность.

Недостатки

  • Не обнаружено.

Скачать

Плагин недоступен, т.к. он уже не актуален.

jQuery-плагин «Checkbox Styler»

Версия: 1.1.2 | Загрузок: 2397 | Размер: 6 Кб | Последнее обновление: 07.10.2012

Обновления

23.08.2012
Все-таки удалось решить задачу с получением фокуса при клике на <label>. Теперь все работает полностью так, как и задумывалось. Кроме того, я переделал скрипт в плагин и добавил минимизированный вариант.
24.08.2012
Плагин теперь работает и с динамически добавляемыми/изменяемыми чекбоксами.
22.09.2012
Поменял метод prop() на attr(), чтобы добавлялся атрибут checked.
07.10.2012
Исправлено поведение скрипта при использовании метода onchange у тега <input type="checkbox" />.

Подключение плагина

  1. Если jQuery на сайте еще не подключен, то перед тегом </head> добавьте такую строку:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

  2. Сразу после jQuery подключите плагин:

    <script src="ПУТЬ_К_ФАЙЛУ/jquery.checkbox.min.js"></script>

  3. Теперь задействуйте плагин:

    <script>
(function($) {
$(function() {

	$('input.styled').checkbox();

})
})(jQuery)
</script>

    Этот код поместите перед тегом </head> после вышеуказанных файлов.

    Соответственно, нужно добавить класс .styled (при желании можно поменять) тем чекбоксам, которые необходимо стилизовать:

    <input type="checkbox" class="styled" />

  4. При динамическом изменении у чекбоксов атрибутов checked и disabled необходимо запустить триггер refresh, например:

    (function($) {
$(function() {

	$('button').click(function() {
		$('input.styled:first').prop('disabled', true).trigger('refresh');
	})

})
})(jQuery)

HTML-код после выполнения плагина

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

<input type="checkbox" class="styled" style="position: absolute; left: -9999px" />
<span class="checkbox" style="display: inline-block"></span>

CSS-классы, используемые для оформления чекбокса

.checkbox чекбокс по умолчанию
.checkbox.checked выбранный чекбокс
.checkbox.disabled неактивный (недоступный для выбора) чекбокс
.checkbox.focused фокус на чекбоксе, когда нажата клавиша Tab

Смотрите также

jQuery Form Styler - плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)

2614 комментариев

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; ...

jQuery-плагин для стилизации input[type="radio"]

38 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью ...

jQuery-плагин для стилизации select'ов

105 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ...

Цифровые часы на чистом CSS и jQuery

41 комментарий

Глядя на днях на циферки на счетчике ли.ру, в моей голове неожиданно зародилась весьма дурная идея — мне захотелось создать цифровые часы, которые бы в точности повторяли те самые циферки ...

Комментарии (35)

  1. art
    20 августа 2012 г. в 15:18

    для динамически добавляемых чекбоксов можно было бы перезапускать скрипт. вам следовало бы проверить, как это будет работать, особенно для уже обработанных чекбоксов

    например, в niceforms (если правильно название помню), была возможность такой перерисовки

    1. Dimox
      20 августа 2012 г. в 15:28 / ответ на коммент art

      В будущем как-нибудь попробую с этим разобраться.

      1. kotchuprik
        22 августа 2012 г. в 21:14 / ответ на коммент Dimox

        насчет перерисовки, обычно внутри плагина делают биндят свой триггер для удобства и делают функцию для дополнительной отрисовки, в конце концов можно селектором пройтись по всем чекбоксам и сделать проверку на то что они уже отрисованы как нужно, а те кто не отрисован отрисовать. с терминологией фигово объяснил, но плагин понравился) размести на гитхаб и на хабрахабр статью забацать) сразу будет много форков и советов)

  2. Тимур
    20 августа 2012 г. в 15:29

    Баг. В Вашем же примере в самом input не меняется значение checked.

    1. Dimox
      20 августа 2012 г. в 15:31 / ответ на коммент Тимур

      Я перед публикацией проверял на php-скрипте — значения передаются, так что все работает.

      1. Тимур
        20 августа 2012 г. в 15:33 / ответ на коммент Dimox

        Откройте свой пример http://dimox.name/examples/styling-input-checkboxes-using-jquery-css/
        Поставьте галочку. Заходим в код и видим, что у input по прежнему нет значения checked.

        1. Dimox
          20 августа 2012 г. в 15:44 / ответ на коммент Тимур

          Если вставить в хтмл-код просто <input type="checkbox" /> (без скрипта), отметить его и посмотреть код, то там этого атрибута тоже не будет.

  3. makregistr
    20 августа 2012 г. в 18:48

    Скрипт немного сыроват, его нужно оформить в виду плагина, чтобы можно было выбирать элементы для манипуляций и вызывать функцию при любых событиях, сделать проверку на уже обработанный инпут, убрать эти бесконечные .next() и .prev(), ведь можно вынести в переменную создания спана-имитации и работать с ним, когда вешаете событие клик все эти $(this) тоже не красиво.

    1. Dimox
      20 августа 2012 г. в 19:39 / ответ на коммент makregistr

      Я недостаточно опытен для подобных вещей.

  4. Александр
    20 августа 2012 г. в 21:58

    Спасибо огромное за скрипт

  5. Mikanoshi
    20 августа 2012 г. в 22:38

    В виде плагина
    При клике мышкой выделения нет (кроме случая, когда input внутри label), при переходе через Tab есть.

    1. Dimox
      23 августа 2012 г. в 15:53 / ответ на коммент Mikanoshi

      Нашел способ сделать так, чтобы выделения не было в любых случаях при клике на label. Спасибо за подсказки по сокращению кода! И, все-таки, я решил сделать скрипт в виде плагина. Обновлю статью.

      1. Mikanoshi
        24 августа 2012 г. в 11:49 / ответ на коммент Dimox

        Иногда проскакивает стиль slyled, а не styled в статье)

        1. Dimox
          24 августа 2012 г. в 12:01 / ответ на коммент Mikanoshi

          Точно, а я и не заметил =) Спасибо!

  6. ПафНутиЙ
    24 августа 2012 г. в 09:53

    Дима, Спасибо!
    Ты как всегда радуешь элегантными решениями.
    Теперь есть повод немного приукрасить сайт)

    1. Dimox
      24 августа 2012 г. в 10:19 / ответ на коммент ПафНутиЙ

      Пожалуйста, Паша!

  7. ПафНутиЙ
    24 августа 2012 г. в 13:15

    Сделал реализацию без картинок:

    var span = $('<span class="checkbox" style="display:inline-block"></span>');
меняем на:
var span = $('<span class="checkbox" style="display:inline-block">&#x2713;</span>');
    .checkbox {
	width: 16px;
	font: normal 14px/16px Tahoma, Arial, Helvetica, sans-serif;
	height: 16px;
	border: solid 1px #ccc;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 0;
	margin-top: 3px;
	color: #fff;
	background: #fff;
	text-align: center;
	}
	.checkbox.checked {			
		color: #333;
		}

    пример
    Ещё раз спасибо, что делаешь вещи, легко поддающиеся кастомизации.

    1. Dimox
      24 августа 2012 г. в 13:22 / ответ на коммент ПафНутиЙ

      Супер!

  8. Игорь
    16 сентября 2012 г. в 10:10

    Для поиграться пойдет, для реальной работы на сайте нет.
    Подключаем ваш плагин, прописываем стили:

    Не работает, при нажатии на ссылку или checkbox внутри label. Снимаем плагин и все работает :).

    1. Dimox
      16 сентября 2012 г. в 13:56 / ответ на коммент Игорь

      У меня работает, как положено. Что я делаю не так?

  9. Игорь
    16 сентября 2012 г. в 15:06

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

    <a href="/test" rel="nofollow">Тест</a>

    Нажмите на ссылку тест, перейдет по ней?
    Если это работает, то вы волшебник.

    1. Игорь
      16 сентября 2012 г. в 15:07 / ответ на коммент Игорь
      <label><input type="checkbox" class="styled" /><a href="/s">5454</a></label>
  10. Игорь
    16 сентября 2012 г. в 15:18

    Или, конкретно пропишите в index.html в form:

    <label><input type="checkbox" class="styled" onclick="window.location='test'"><a href="test">Имя</a></label>

    При нажитии на чекбокс или ссылку, перехода по ссылке нет. Убираем class=»styled», остается системный чекбокс, по ссылке переходит.

    1. Dimox
      16 сентября 2012 г. в 16:36 / ответ на коммент Игорь

      Вообще-то логично, что не будет перехода по ссылке, т.к. фактически на чекбоксе клика не происходит. Да и эту задачу по-другому можно решить.

  11. Роман
    11 октября 2012 г. в 10:14

    Дмитрий здравствуйте, есть маленькие недочёты когда checkbox ловит фокус в разных браузерах ведёт себя по разному, вот код исправил для нормальной реализации в браузерах:

    .keydown(function(e) {
				// чтобы переключался чекбокс, который находится в теге label
				if((input.parent('label').length || input) && (e.which == 13 || e.which == 32)) span.click();
				if(e.which != 9) return false;
			})
    1. Dimox
      11 октября 2012 г. в 11:09 / ответ на коммент Роман

      А в чем заключается проблема с моим кодом, можно поподробнее? Я проверял в разных браузерах — у меня все в порядке.

      1. Роман
        11 октября 2012 г. в 15:08 / ответ на коммент Dimox

        Вообщем проблемма в IE когда Tab-ом переключаешься по флажкам то доходя до последнего который обёрнут в label он его отмечает очередным нажатием на Tab а не переходит фокус дальше, и ещё отмечать пробелом и enter-ом невозможно было флажки которые не обёрнуты в label и обычные без него. И наблюдался двойной клик, чем и было исправлено подстановкой return false на Tab

        1. Dimox
          11 октября 2012 г. в 19:36 / ответ на коммент Роман

          Ясно, теперь увидел. Спасибо за помощь! В ближайшее время обновлю.

        2. Dimox
          12 октября 2012 г. в 12:34 / ответ на коммент Роман

          Сейчас еще потестировал и выяснил, что Enter’ом чекбокс помечается только в браузере Opera. А в остальных браузерах происходит отправка формы. Поэтому и в плагине не стоит делать переключение по Enter, т.е. менять ничего не надо.

  12. Костя
    11 октября 2012 г. в 11:05

    я кстати хотел все спросить, а может стоитт на github размещать плагины? тогда много кто при желании может код дорабатывать и отсылать тебе пулл реквест?

    1. Dimox
      11 октября 2012 г. в 11:14 / ответ на коммент Костя

      С последним плагином так и хотел поступить, но это оказалось для меня сложно. Я разобрался, как там разместить файлы, однако мне нужно было также, чтобы живые примеры можно было смотреть прямо с гитхаба, но так и не понял, как это делается. Поэтому забил на гитхаб.

      1. Костя
        11 октября 2012 г. в 11:15 / ответ на коммент Dimox

        Побалуйся в сторону вики, да и в конце концов демку можно тут размещать, просто в README.MD ссылку прописать на твой блог.

        1. Dimox
          11 октября 2012 г. в 11:20 / ответ на коммент Костя

          Хотелось бы, чтобы все файлы (и скрипт, и примеры) находились в одном месте, иначе при малейшей правке приходится перезаливать файлы в нескольких местах.

      2. ПафНутиЙ
        11 октября 2012 г. в 11:21 / ответ на коммент Dimox

        Ну как бы гитхаб предназначен для кодинга. Кому нужно подправить — проще клонировать репозиторий и ковырять его на локалке, там же и демку смотреть.
        Ты просто положи туда содержимое архива из этого поста, а дальше видно будет )

  13. Dimox
    13 октября 2012 г. в 10:24

    Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина.

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2025 Dimox.name. Все права защищены. Перепечатка запрещена.