Стилизация radio button

Видео с похожими ключевыми словами

abstraghirovatabstraktnyiabstraktsiiaekstraktkonspiektriefieratабстрагироватьабстракабстрактабстрактнаяабстрактныйабстракцияконспектрефератэкстрактdoghovorsoghlashieniiesoghlasiiesoghlasovaniieдоговорсогласиесогласованиесоглашениеfonfonefonovyi riezhimkontiekstobrazovaniiepodghotovkapodopliokapriedposylkapriedystoriiaproiskhozhdieniiezadnii planбэкграундзадний планконтекстобразованиеподготовкаподоплёкапредпосылкапредысторияпроисхождениефонфоновыйфоновый режимфоновый рисунокbuksiashchikkabinakorobkalozhamandasamshitбукскабинакоробкаложасамшитящикbizniesdielopriedpriiatiierabotazaniatiieбизнесделоделовойзанятиепредприятиеработаghalochkaklietkaprovieriatprovieritprovierkarasplatit siaschiotshakhгалочкаклеткапроверитьпроверкапроверятьрасплатитьсясчётcheckboxchiek boksflazhokфлажокчек боксvyborвыборclose upпринципиальные схемыdozvolieniieдозволениеkorriespondientsiiapieriepiskasootvietstviieкорреспонденцияперепискасоответствиеghrafotschiotposchitatschiestschitatschitat siasoschitatграфотсчетотсчётпосчитатьсосчитатьсчестьсчитатьсчитатьсяrieshieniiaрешенияdizainekstier ierkompozitsiiakonstruktsiiamodielnamierieniieobrazietsplanproiektumysieluzorvnieshnii vidzamysielвнешний виддизайнзамыселкомпозицияконструкциямодельнамерениеобразецпланпроектузорумыселdokumientдокументobuchieniieprosvieshchieniievospitaniieвоспитаниеобучениепросвещениеvyboryвыборыизбраниеexamekspriessvyrazhatvyrazitвыражатьвыразитькурьерскоэкспрессnapolniatnapolniat sianapolnitnapolnit siarasshiriat siarasshirit siazapolniatzapolniat siazapolnitzapolnit siaзаполнениезаполнитьзаполнитьсязаполнятьзаполнятьсянаполнитьнаполнитьсянаполнятьнаполнятьсярасширитьсярасширятьсяfakpalietspierstpokazattknutukazatпалецперстпоказатьткнутьуказатьфакankietablankfighuraformaformirovatformovatformuliarpridavat formuанкетабланкпридавать формуфигураформаформироватьформоватьформулярfiermafrieimkadrkarkaskostiakobramliatobstavliatostovpodstavitpodstavliatramaskielietsostavliatкадркаркаскостякобрамлятьобставлятьостовподставитьподставлятьрамаскелетсоставлятьфермафреймghorstkartykist rukipieriedavatpochierkrabochiirukastoronastrielkavruchatвручатьгорстькисть рукипередаватьпочеркрабочийрукасторонастрелкаchieloviechieskiichieloviekliudiliudskкижилюдскчеловекчеловеческийidieiamyslидеямысльchiernilatushтушьчернилаizolirovannyiизолированныйmarkmarkamarkirovatmietkaznakзнакмаркмаркамаркироватьметкашрамmarkernietvosprieshchaietsiaвоспрещаетсянетbiurokabinietkantsieliariiakontoraministierstvoofispomoshchupravlieniieuslughaviedomstvoбюроведомствокабинетканцелярияканцелярскиеконтораминистерствоофисоффиспомощьуправлениеуслугаoptionnumierovatpazhprolistyvatstranitsaнумероватьпажпролистыватьстраницаbumaghabumazhnyiбумагабумажныйavtoruchkaliebiodkaliebiodushkanapisatpieropisatruchkazaghonzakliuchatzapiratавторучказагонзаключатьзапиратьлебёдкалебёдушканаписатьперописатьручкаpolitikaполитикавопросникpodpisatpodpisat siapodpisyvat iapodpisyvat siavyvieskaвывескаподписатьподписатьсяподписыватьсяподписыватьяrastvorrieshieniieрастворрешениеesemeskamiessiedzhsoobshchieniietiekstмесседжсмссообщениетекстэсэмэскаtieksturaтекстураchiekholklieshchmghnovieniiemighnavolochkaotmiechat ghalochkoiptichkatikan ietikattiknutudarклещмгновениемигнаволочкаотмечать галочкойптичкатиканиетиканьетикатьтикнутьударчехолgholosgholosovaniiegholosovatprogholosovatvotumвотумголосголосованиеголосоватьпроголосоватьbielobielokbielyibielyi tsvietбелобелоебелокбелыебелыйбелый цветformulirovatslovoсловоформулироватьписьменныйсочинительствоdadaoieshchio kaknaoborotдаещё какнаоборот

Чекбоксы HTML.

c http-equiv=»Content-Type» content=»text/html; charset=utf-8″>lass=»inf_stat»>

Категория: Уроки HTML
Просмотров: 2874
Коментариев:
Дата: 2017-04-19
Добавил: admin

Мы продолжаем рассматривать элементы формы и сегодня мы рассмотрим еще один вид переключателей в HTML это чекбоксы. Чекбоксы это альтернатива радиокнопкам только чекбоксы позволяют выделить одновременно несколько элементов в противоположность радиокнопкам, где можно выбрать только один элемент.

Чекбоксы создаются очень просто с помощью все того же тега только атрибут type=»» будет содержать значение checkbox.

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

HTML

Первая HTML страница

Какие Вы фрукты любите больше всего?

Какие Вы фрукты любите больше всего?

Аппельсины
Бананы
Яблоки
Груши
Перец

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

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

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

HTML

Апельсины

Теперь, если посмотрите, то чекбокс с именем «Апельсины» автоматически становится активным. И рассмотрим еще один атрибут для чекбоксов, который позволяет сделать не активный чекбокс. Этот атрибут именуется disabled, что в переводе с английского означает «отключен». С помощью этого атрибута чекбокс делается не активным и не реагирует на действия пользователя.

HTML

Первая HTML страница

Какие Вы фрукты любите больще всего?

Аппельсины
Бананы
Яблоки
Груши
Перец

В примере выше, как видно первый элемент по умолчанию становится активным, так как присутствует атрибут checked, а последний чекбокс на против не активен так как «Перец» не является фруктом и нечего его выбирать. Для деактивации этого чекбокса использован атрибут disabled, что и сделало область не активной.

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

Следующий материал >>>

Просмотреть демо: Демо

Скачать исходник: Скачать

‘)
document.write(»)
}
else
document.write(message)

function crossref(number)
{
var crossobj=document.all? eval(«document.all.neonlight»+number) : document.getElementById(«neonlight»+number)
return crossobj
}

function neon()
{
//Change all letters to base color
if (n==0)
{
for (m=0;m

  • Элемент select.
  • Атрибуты для таблиц HTML.
  • Создание параграфа. Тег
  • Текстовое поле textarea html
  • Списки определения. Тег
  • Введение в HTML. С чего начать WEB-программирование
  • Ненумерованные списки. Тег
  • МЕТА теги для сайта.

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

Documentation

Check out the demo app to change the properties of the checkbox and see the changes in real time.

Animations

  • Animation : The possible animations for switching to and from the unchecked state.

    • Stroke:

    • Fill:

    • Bounce (Stroke):

    • Bounce (Fill):

    • Expand (Stroke):

    • Expand (Fill):

    • Flat (Stroke):

    • Flat (Fill):

    • Spiral:

    • Fade (Stroke):

    • Fade (Fill):

    • Dot (Stroke):

    • Dot (Fill):

  • stateChangeAnimation : The type of animation to preform when changing from the unchecked state to any other state.

  • animationDuration : The duration of the animation that occurs when the checkbox switches states. The default is 0.3 seconds.

Values

  • value : Returns either the , , or depending on the checkbox’s state.
  • checkedValue : The object to return from when the checkbox is checked.
  • uncheckedValue : The object to return from when the checkbox is unchecked.
  • mixedValue : The object to return from when the checkbox is mixed.

State

  • CheckState : The possible states the check can be in.

    • — No check is shown.
    • — A checkmark is shown.
    • — A dash is shown.
  • checkState : The current state of the checkbox.
  • setCheckState(newState: , animated: ): Change the check state with the option of animating the change.
  • toggleCheckState(animated: = false): Toggle the check state between and states.

Appearance

  • MarkType: The possible shapes of the mark.

    • — The mark is a standard checkmark.
    • — The mark is a radio style fill.
  • BoxType: The possible shapes of the box.

    • — The box is a circle.
    • — The box is square with optional rounded corners.
  • tintColor: The main color of the and states for certain animations.
  • secondaryTintColor : The color of the box in the unselected state.
  • secondaryCheckmarkTintColor : The color of the checkmark or radio for certain animations. (Mostly animations with a fill style.)
  • checkmarkLineWidth : The line width of the checkmark.
  • markType : The type of mark to display.
  • boxLineWidth : The line width of the box.
  • cornerRadius : The corner radius of the box if the box type is .
  • boxType : The shape of the checkbox.
  • hideBox : Wether or not to hide the box.

Улучшение внешнего вида CListCtrl

После первого опыта со списком видно, что галочки рядом с элементами «скучные».
Часто они не подходят к размеру шрифта и общему дизайну программы. Есть способ
обойти это ограничение. К сожалению, в MSDN он описан очень плохо. Здесь я приведу
только общие принципы реализации. Ничего сложного в этом нет, поэтому вы с легкостью
сможете модифицировать пример к статье, чтобы он рисовал такие галочки, какие
вам необходимы.

У CListCtrl есть метод SetImageList. Он позволяет
устанавливать изображения иконок, которые будут использоваться при рисовании
элементов. Список поддерживает 3 типа иконок:

  • Большие иконки
  • Маленькие иконки
  • Иконки состояния.

Последний тип с легкостью позволяет изменять изображения для иконок состояния.
Т.е. надо сделать объект типа CImageList и добавить в него
две иконки, которые бы соответствовали установленной и снятой галочке. Все!
Теперь CListCtrl будет рисовать нужные вам элементы.

Ну и напоследок еще одна вкусность, которая почему-то замалчивается в документации.
Я ее «вычислил», внимательно разглядывая структуру LVITEM.
Надеюсь, вы последовали моему совету и сделали то же самое. Можно заметить,
что для хранения состояния чекбокса используется член LVITEM ::state.
Если быть конкретным, то биты с 12 по 15. Это несколько больше, чем надо для
хранения значения true/false! Секрет прост – у каждого элемента
может быть больше двух состояний. Причем, список «знает» только об одном – нулевом.
Когда все биты равны нулю, то у элемента нет иконки состояния. Остальные значения
могут быть произвольными.

Использовать эту особенность не просто, а очень просто. Надо просто создать
необходимое количество иконок, поместить их в CImageList, а
затем вызвать CListCtrl::SetImageList, чтобы установить новый
список иконок состояния. После этого элемент управления будет циклически переключать
состояния, и показывать соответствующие иконки.

Состояния можно ставить принудительно с помощью SetItemState:
вместо булевого значения надо передавать индекс нужного состояния.

Помните, что индексы начинаются с 1.

Вы умеете обрабатывать смену состояний, и я думаю, что для вас не составит
особого труда, чтобы состояния менялись не циклически, а по определенным правилам.

Если все вышеперечисленное использовать с Виртуальными
списками – можно получить очень мощный и гибкий элемент управления. Виртуальные
списки позволяют хранить индексы состояния отдельно от элемента управления.
Это может дать ряд преимуществ, если надо управлять большим объемом данных и
менять состояния по сложным законам.

Наслаждайтесь новыми возможностями!

Если вам нравиться эта рассылка рекомендуйте ее своим друзьям.
Подписаться можно по адресу http://subscribe.ru/catalog/comp.soft.prog.devdoc

Пример

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

Создадим простейшую разметку на основе LinearLayout. Заполним форму текстовым блоком определённого цвета и присвоим ему текст «Текущий цвет». В нижней части формы расположим четыре цветных текстовых блока, а под ними четыре переключателя, с помощью которых мы будем менять цвет основного текстового блока.

Обратите внимание, что элементы RadioButton помещаются в контейнер RadioGroup. Если теперь посмотреть на форму, то увидим одно большое серое поле

А снизу расположились в ряд четыре метки, а еще ниже также в ряд расположились четыре переключателя. Причем последний серый переключатель имеет выбранный статус (android:checked=»true»).

Переходим к программной части. Добавляем слушатель для обработки щелчков на кнопках-переключателях.

Запустим приложение и посмотрим, что у нас получилось. Пощёлкаем по переключателям и убеждаемся, что всё работает.

Теги HTML

c http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»block_content scroll»>

  • Все теги
  • Валидация тегов
    • accesskey
    • charset
    • coords
    • download
    • href
    • hreflang
    • name
    • rel
    • rev
    • shape
    • tabindex
    • target
    • title
    • type
  • title

    • align
    • alt
    • archive
    • code
    • codebase
    • height
    • hspace
    • vspace
    • width
    • accesskey
    • alt
    • coords
    • href
    • hreflang
    • nohref
    • shape
    • tabindex
    • target
    • type
    • autoplay
    • controls
    • loop
    • muted
    • preload
    • src
    • href
    • target
    • color
    • face
    • size
  • dir

    • balance
    • loop
    • src
    • volume
    • alink
    • background
    • bgcolor
    • bgproperties
    • bottommargin
    • leftmargin
    • link
    • rightmargin
    • scroll
    • text
    • topmargin
    • vlink
  • clear

    • accesskey
    • autofocus
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • name
    • type
    • value
    • align
    • valign
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • cite
    • datetime
    • align
    • title
    • align
    • height
    • hidden
    • hspace
    • pluginspage
    • src
    • type
    • vspace
    • width
    • disabled
    • form
    • title
    • color
    • face
    • size
    • accept-charset
    • action
    • autocomplete
    • enctype
    • method
    • name
    • novalidate
    • target
    • bordercolor
    • frameborder
    • name
    • noresize
    • scrolling
    • src
    • border
    • bordercolor
    • cols
    • frameborder
    • framespacing
    • rows
  • align

  • align

  • align

  • align

  • align

  • align

  • profile

    • align
    • color
    • noshade
    • size
    • width
    • manifest
    • title
    • xmlns
    • align
    • allowtransparency
    • frameborder
    • height
    • hspace
    • marginheight
    • marginwidth
    • name
    • sandbox
    • scrolling
    • seamless
    • src
    • srcdoc
    • vspace
    • width
    • align
    • alt
    • border
    • height
    • hspace
    • ismap
    • longdesc
    • lowsrc
    • src
    • usemap
    • vspace
    • width
    • accept
    • accesskey
    • align
    • alt
    • autocomplete
    • autofocus
    • border
    • checked
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • list
    • max
    • maxlength
    • min
    • multiple
    • name
    • pattern
    • placeholder
    • readonly
    • required
    • size
    • src
    • step
    • tabindex
    • type
    • value
    • cite
    • datetime
    • accesskey
    • for
    • accesskey
    • align
    • title
    • type
    • value
    • charset
    • href
    • media
    • rel
    • sizes
    • type
  • name

    • behavior
    • bgcolor
    • direction
    • height
    • hspace
    • loop
    • scrollamount
    • scrolldelay
    • truespeed
    • vspace
    • width
    • label
    • type
    • charset
    • content
    • http-equiv
    • name
    • high
    • low
    • max
    • min
    • optimum
    • value
    • align
    • archive
    • classid
    • code
    • codebase
    • codetype
    • data
    • height
    • hspace
    • tabindex
    • type
    • vspace
    • width
    • reversed
    • start
    • type
    • disabled
    • label
    • disabled
    • label
    • selected
    • value
  • align

    • name
    • type
    • value
    • valuetype

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

HTML тег

Все элементы тега форм создаются с помощью тега .

Синтаксис

Первое на что стоит обратить внимание, что тег не нужен закрывающий тег. У поля есть два самых важных параметра, которые я вынес в обязательные, это name и type

  • name=»name_field» — параметр для задания имени конкретному input. Это нужно, чтобы при дальнейшей обработке данных формы можно было получить значение этого поля.
  • type=»значение» — отвечает за тип элемента, т.е. что именно будет представлять из себя поле. И здесь есть множество возможных значений:

    • text — текстовое поле. Одно из самых часто используемых значений
    • password — текстовое поле, но с той особенностью, что при вводе символы скрыты
    • radio — радиокнопки
    • checkbox — переключатели
    • submit — кнопка для отправки значений формы (управление передается на адрес указанный в адрес, указанный в action атрибута формы)
    • reset — кнопка для очистки всей формы
    • hidden — скрытое поле
    • button — кнопки для обработки каких-то действий (не путать с submit!)
    • file — для загрузки файлов на сервер
    • image — поле с изображением (используется крайне редко)
  • value=»значение» — указывается значение по умолчанию

Теперь разберем более подробно каждый элемент

Methods

These methods can be used to make changes programmatically (any selectors can be used):

// change input's state to 'checked'
$('input').iCheck('check');

// remove 'checked' state
$('input').iCheck('uncheck');

// toggle 'checked' state
$('input').iCheck('toggle');

// change input's state to 'disabled'
$('input').iCheck('disable');

// remove 'disabled' state
$('input').iCheck('enable');

// change input's state to 'indeterminate'
$('input').iCheck('indeterminate');

// remove 'indeterminate' state
$('input').iCheck('determinate');

// apply input changes, which were done outside the plugin
$('input').iCheck('update');

// remove all traces of iCheck
$('input').iCheck('destroy');

You may also specify some function, that will be executed on each method call:

$('input').iCheck('check', function(){
  alert('Well done, Sir');
});

Feel free to fork and submit pull-request or submit an issue if you find something not working.

Расположение

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

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

Группа из одного чекбокса требует аккуратного обращения при верстке формы.

Один чекбокс сразу с двумя подписями выглядит странно:

Чекбокс без названия выглядит уже недопустимо, к тому же в него сложнее целиться:

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

Такой проблемы нет, если форма верстается в одну колонку:

Чтобы решить проблему при двухколоночной компоновке, одиночный чекбокс можно заменить на группу радиокнопок:

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

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

Project Details

Todo

  • Fix the animations between the checked and mixed states when the mark is a radio. When the circle is close to being flat, the left and right edges are not rounded, as well as render some artifacts.
  • Add visual feedback for UIControl’s selected state. So that when the checkbox is touched, it animates slightly towards the new state.
  • Add support for interrupting animations mid-animation. So that if the checkbox is tapped multiple times in quick succession, it animates from the current values, instead of resetting the checkbox and restarting the animations. This might involve replacing CAAnimations with manually done animations using a CADisplayLink. Or the new UIViewPropertyAnimator.
  • tvOS support.
  • watchOS support.
  • macOS support.
  • Checkbox cells (Re-add label support)
  • Checkbox groups (single / multiple selection)

Видео с похожими ключевыми словами

dostighat soghlashieniiasoghlashat siasoghlasit siaдостигать соглашениясогласитесьсогласитьсясоглашатьсяodobrieniierazrieshieniiesoghlasiieutvierzhdieniieодобрениеразрешениесогласиеутверждениеapprovedbuksiashchikkabinakorobkalozhamandasamshitбукскабинакоробкаложасамшитящикghalochkaklietkaprovieriatprovieritprovierkarasplatit siaschiotshakhгалочкаклеткапроверитьпроверкапроверятьрасплатитьсясчётcheckboxchiek boksflazhokфлажокчек бокспереченьчеклистcheckmarkvyborвыборchoosingghrafakolonkakolonnarazdielstolbstolbietsstolbyграфаколонкаколоннаразделстолбстолбецсвязывайтеkontrolkontrol naia ghruppakontrolirovatkontroliruitieupravliatvlastвластьконтролироватьконтролируйтеконтрольконтрольная группауправлятьispravitispravliatkorriektirovatpravil nyiисправитьисправлятькорректироватьправильныйrieshieniieurieghulirovaniieрешениеурегулированиеchiertiezhпритяжкарисованиечертежvyboryвыборыизбраниеnachinkanapolnieniieplombaзавалканаполнениеначинкапломбаepitsientrfokal naia tochkafokusfokusirovatkontsientratsiia kontsentratsijakontsientrirovatkontsientrirovat siasosriedotochivatsosriedotochivat siaконцентрация kontsentrátsijaконцентрироватьконцентрироватьсясосредоточиватьсосредоточиватьсяфокальная точкафокусфокусироватьэпицентрankietablankfighuraformaformirovatformovatformuliarpridavat formuанкетабланкпридавать формуфигураформаформироватьформоватьформулярdobrodobryiiskusnyikhoroshiilovkiinaviekinavsieghdaproktolkumielyiдобродоброедобрыйискусныйловкийнавекинавсегдапроктолкумелыйхорошеехорошийrieghistrirovatsostavliat spisokspisokрегистрироватьсоставлять списоксписокdiriektormieniedzhierupravliaiushchiiдиректорменеджеруправляющийmarkmarkamarkirovatmietkaznakзнакмаркмаркамаркироватьметкашрамmarkermiessiedzhsoobshchieniieмесседжсмссообщениеkhorosholadnonormal nookokieiv poriadkieв порядкеладнонормальноо кейоокейхорошоoptionavtoruchkaliebiodkaliebiodushkanapisatpieropisatruchkazaghonzakliuchatzapiratавторучказагонзаключатьзапиратьлебёдкалебёдушканаписатьперописатьручкаizbiratiel nyi punktizbiratiel nyi uchastokoprosизбирательный пунктизбирательный участокопроссписок избирателейprofiessionalprofiessional nyiпрофессионалпрофессиональныйkachiestviennyikachiestvourovienкачественныйкачествоуровеньвопросникkrasnokrasnyiryzhaiaryzhieieryzhiiкраснаякраснокрасноекрасныекрасныйрыжаярыжеерыжийotbiratотбиратьотборноsostoianiieсостояниеформеkvadratkvadratnyiobyvatielploshchadpolieskvierughol nikквадратквадратныйобывательплощадьполескверугольникghodit siaidtikombiniezonkostiummastpodkhoditpodoitipoitiprotsiessгодитьсяидтикомбинезонкостюммастьподойтиподходитьпойтипроцессsurveyembliemasimvolсимволэмблемаekzamienispytaniieprobatiestиспытаниепробатестэкзаменchiekholklieshchmghnovieniiemighnavolochkaotmiechat ghalochkoiptichkatikan ietikattiknutudarклещмгновениемигнаволочкаотмечать галочкойптичкатиканиетиканьетикатьтикнутьударчехолgholosgholosovaniiegholosovatprogholosovatvotumвотумголосголосованиеголосоватьпроголосоватьписьменныйсочинительствоdadaoieshchio kaknaoborotдаещё какнаоборот

Getting Started

Demo

Playground

To see a working playground in action, run the workspace located at path . You may need to run the framework scheme and wait for Xcode to process the files, before the playground begins. Open the assistant editor for a live preview of the UI.

This is a great way to work on customizing the checkbox in code to suit your needs.

App

To see the checkbox working on a device, run the demo app included in . The demo app walks through all the available features. You will need to run a in order to build the demo app.

Installation

Another option is to copy the files in the «Sources» folder to your project.

Use

Storyboard

Add a custom view to the storyboard and set its class to «M13Checkbox». Customize the available parameters in the attributes inspector as needed.

Note: A shim was added to add support for setting enum properties through interface builder. Just retrieve the integer value corresponding to the enum value needed, and enter that into the property in the attributes inspector.

Options

These options are default:

{
  // 'checkbox' or 'radio' to style only checkboxes or radio buttons, both by default
  handle '',

  // base class added to customized checkboxes
  checkboxClass 'icheckbox',

  // base class added to customized radio buttons
  radioClass 'iradio',

  // class added on checked state (input.checked = true)
  checkedClass 'checked',

    // if not empty, used instead of 'checkedClass' option (input type specific)
    checkedCheckboxClass '',
    checkedRadioClass '',

  // if not empty, added as class name on unchecked state (input.checked = false)
  uncheckedClass '',

    // if not empty, used instead of 'uncheckedClass' option (input type specific)
    uncheckedCheckboxClass '',
    uncheckedRadioClass '',

  // class added on disabled state (input.disabled = true)
  disabledClass 'disabled',

    // if not empty, used instead of 'disabledClass' option (input type specific)
    disabledCheckboxClass '',
    disabledRadioClass '',

  // if not empty, added as class name on enabled state (input.disabled = false)
  enabledClass '',

    // if not empty, used instead of 'enabledClass' option (input type specific)
    enabledCheckboxClass '',
    enabledRadioClass '',

  // class added on indeterminate state (input.indeterminate = true)
  indeterminateClass 'indeterminate',

    // if not empty, used instead of 'indeterminateClass' option (input type specific)
    indeterminateCheckboxClass '',
    indeterminateRadioClass '',

  // if not empty, added as class name on determinate state (input.indeterminate = false)
  determinateClass '',

    // if not empty, used instead of 'determinateClass' option (input type specific)
    determinateCheckboxClass '',
    determinateRadioClass '',

  // class added on hover state (pointer is moved onto input)
  hoverClass 'hover',

  // class added on focus state (input has gained focus)
  focusClass 'focus',

  // class added on active state (mouse button is pressed on input)
  activeClass 'active',

  // adds hoverClass to customized input on label hover and labelHoverClass to label on input hover
  labelHover true,

    // class added to label if labelHover set to true
    labelHoverClass 'hover',

  // increase clickable area by given % (negative number to decrease)
  increaseArea '',

  // true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled
  cursor false,

  // set true to inherit original input's class name
  inheritClass false,

  // if set to true, input's id is prefixed with 'iCheck-' and attached
  inheritID false,

  // set true to activate ARIA support
  aria false,

  // add HTML code or text inside customized input
  insert ''
}

There’s no need to copy and paste all of them, you can just mention the ones you need:

$('input').iCheck({
  labelHover false,
  cursor true
});

You can choose any class names and style them as you want.

Skins

Minimal skin

  • Checkbox 1
  • Checkbox 2
  • Disabled
  • Disabled & checked
  • Radio button 1
  • Radio button 2
  • Disabled
  • Disabled & checked

Color schemes

Demo

Make sure jQuery v1.7+ (or ) is loaded before the icheck.js.

  1. Choose a color scheme, there are 10 different styles available:

    • Black — minimal.css
    • Red — red.css
    • Green — green.css
    • Blue — blue.css
    • Aero — aero.css
    • Grey — grey.css
    • Orange — orange.css
    • Yellow — yellow.css
    • Pink — pink.css
    • Purple — purple.css
  2. Copy /skins/minimal/ folder and icheck.js file to your site.
  3. Insert before in your HTML (replace your-path and color-scheme):

    Example for a Red color scheme:

  4. Add some checkboxes and radio buttons to your HTML:

  5. Add JavaScript to your HTML to launch iCheck plugin:

    For different from black color schemes use this code (example for Red):

  6. Done.
Usage

Square skin

  • Checkbox 1
  • Checkbox 2
  • Disabled
  • Disabled & checked
  • Radio button 1
  • Radio button 2
  • Disabled
  • Disabled & checked

Color schemes

Demo

Make sure jQuery v1.7+ (or ) is loaded before the icheck.js.

  1. Choose a color scheme, there are 10 different styles available:

    • Black — square.css
    • Red — red.css
    • Green — green.css
    • Blue — blue.css
    • Aero — aero.css
    • Grey — grey.css
    • Orange — orange.css
    • Yellow — yellow.css
    • Pink — pink.css
    • Purple — purple.css
  2. Copy /skins/square/ folder and icheck.js file to your site.
  3. Insert before in your HTML (replace your-path and color-scheme):

    Example for a Red color scheme:

  4. Add some checkboxes and radio buttons to your HTML:

  5. Add JavaScript to your HTML to launch iCheck plugin:

    For different from black color schemes use this code (example for Red):

  6. Done.
Usage

Flat skin

  • Checkbox 1
  • Checkbox 2
  • Disabled
  • Disabled & checked
  • Radio button 1
  • Radio button 2
  • Disabled
  • Disabled & checked

Color schemes

  • Normal

  • Checked

  • Disabled

  • Disabled & checked

Demo

Make sure jQuery v1.7+ (or ) is loaded before the icheck.js.

  1. Choose a color scheme, there are 10 different styles available:

    • Black — flat.css
    • Red — red.css
    • Green — green.css
    • Blue — blue.css
    • Aero — aero.css
    • Grey — grey.css
    • Orange — orange.css
    • Yellow — yellow.css
    • Pink — pink.css
    • Purple — purple.css
  2. Copy /skins/flat/ folder and icheck.js file to your site.
  3. Insert before in your HTML (replace your-path and color-scheme):

    Example for a Red color scheme:

  4. Add some checkboxes and radio buttons to your HTML:

  5. Add JavaScript to your HTML to launch iCheck plugin:

    For different from black color schemes use this code (example for Red):

  6. Done.
Usage

Line skin

  • Checkbox 1
  • Checkbox 2
  • Disabled
  • Disabled & checked
  • Radio button 1
  • Radio button 2
  • Disabled
  • Disabled & checked

Color schemes

Demo

Make sure jQuery v1.7+ (or ) is loaded before the icheck.js.

  1. Choose a color scheme, there are 10 different styles available:

    • Black — line.css
    • Red — red.css
    • Green — green.css
    • Blue — blue.css
    • Aero — aero.css
    • Grey — grey.css
    • Orange — orange.css
    • Yellow — yellow.css
    • Pink — pink.css
    • Purple — purple.css
  2. Copy /skins/line/ folder and icheck.js file to your site.
  3. Insert before in your HTML (replace your-path and color-scheme):

    Example for a Red color scheme:

  4. Add some checkboxes, radio buttons and labels to your HTML:

    Checkbox 1
    
    Checkbox 2
    
    Radio button 1
    
    Radio button 2
    
  5. Add JavaScript to your HTML to launch iCheck plugin:

    For different from black color schemes use this code (example for Red):

  6. Done.

Comparison

iCheck is created to avoid routine of reinventing the wheel when working with checkboxes and radio buttons. It provides an expected identical result for the huge number of browsers, devices and their versions. Callbacks and methods can be used to easily handle and make changes at customized inputs.

  • inputs are keyboard inaccessible, since or used to hide them
  • poor browser support
  • multiple bugs on mobile devices
  • tricky, harder to maintain CSS code
  • JavaScript is still needed to fix specific issues

While CSS3 method is quite limited solution, iCheck is made to be an everyday replacement covering most of the tasks.

Callbacks

iCheck provides plenty callbacks, which may be used to handle changes.

Callback name When used
ifClicked user clicked on a customized input or an assigned label
ifChanged input’s «checked», «disabled» or «indeterminate» state is changed
ifChecked input’s state is changed to «checked»
ifUnchecked «checked» state is removed
ifToggled input’s «checked» state is changed
ifDisabled input’s state is changed to «disabled»
ifEnabled «disabled» state is removed
ifIndeterminate input’s state is changed to «indeterminate»
ifDeterminate «indeterminate» state is removed
ifCreated input is just customized
ifDestroyed customization is just removed

Use method to bind them to inputs:

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

callback should be binded before plugin init.

Ссылка на основную публикацию