Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

ion-checkradio

2.0.0 • Public • Published 3 years ago

Ion.CheckRadio 2.0.0

English description | Описание на русском

jQuery plugin for styling checkboxes and radio-buttons. With skin support.

Description

Ion.CheckRadio — nice and easy jQuery-plugin for checkbox and radio-buttons customization.
With skin support
Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
Ion.CheckRadio supports touch-devices (iPhone, iPad, etc.).
Ion.CheckRadio freely distributed under terms of MIT licence.

Dependencies

jQuery 1.9+

Using script

Import this libraries:

jQuery
ion.checkRadio.min.js

And CSS:

normalize.min.css - desirable if you have not yet connected one
ion.checkRadio.css
ion.checkRadio.skinName.css

Don't forget about skin image:

icr-skinName-skin.png - skin sprite
Or use included PSD file and draw your own skin

Recommended HTML

Radio-buttons:
 
<label class="icr-label">
    <span class="icr-item type_radio"></span>
    <span class="icr-hidden"><input class="icr-input" type="radio" name="!group_name!" value="!radio_value_1!" /></span>
    <span class="icr-text">!radio_text_1!</span>
</label>
<label class="icr-label">
    <span class="icr-item type_radio"></span>
    <span class="icr-hidden"><input class="icr-input" type="radio" name="!group_name!" value="!radio_value_2!" /></span>
    <span class="icr-text">!radio_text_2!</span>
</label>
 
Checkboxes:
<label class="icr-label">
    <span class="icr-item type_checkbox"></span>
    <span class="icr-hidden"><input class="icr-input" type="radio" name="!group_name!" value="!checkbox_value_1!" /></span>
    <span class="icr-text">!checkbox_text_1!</span>
</label>
<label class="icr-label">
    <span class="icr-item type_checkbox"></span>
    <span class="icr-hidden"><input class="icr-input" type="radio" name="!group_name!" value="!checkbox_value_2!" /></span>
    <span class="icr-text">!checkbox_text_1!</span>
</label>

Regular HTML

Create checkboxes and/or radio-buttons:
 
<input type="radio" name="reading" value="0" id="reading_0" /> <label for="reading_0">Very much</label>
<input type="radio" name="reading" value="1" id="reading_1" /> <label for="reading_1">Sometimes</label>
<input type="radio" name="reading" value="2" id="reading_2" /> <label for="reading_2">Better watch movie</label>
<input type="radio" name="reading" value="3" id="reading_3" /> <label for="reading_3">Hate it</label>
 
or
 
<label><input type="radio" name="movies" value="0" /> Love them</label>
<label><input type="radio" name="movies" value="1" /> Like them</label>
<label><input type="radio" name="movies" value="2" /> Indifferent</label>
<label><input type="radio" name="movies" value="3" /> Hate them</label>
 
or drop some checkboxes:
 
<label><input type="checkbox" name="think" value="0" /> Self</label>
<label><input type="checkbox" name="think" value="1" /> Money</label>
<label><input type="checkbox" name="think" value="2" /> Stuff</label>
<label><input type="checkbox" name="think" value="3" /> Health</label>
<label><input type="checkbox" name="think" value="4" /> Work</label>
<label><input type="checkbox" name="think" value="5" checked /> Rest</label>
<label><input type="checkbox" name="think" value="6" disabled checked /> Sex</label>

Initialize slider

// all on the page:
$("input[type='radio'], input[type='checkbox']").ionCheckRadio();
 
// or specific only:
$(".my_inputs").ionCheckRadio();

Success!

Update history

Support plugin development

Keywords

install

npm i ion-checkradio

weekly downloads

version

2.0.0

license

MIT

homepage

ionden.com

repository

github

last publish

3 years ago

collaborators

Test with RunKit

Report a vulnerability