Checkbox example:
$('.checkbox').styly();
<label for="like">Like?</label>
<input id="like" type="checkbox" checked="checked" class="checkbox" />
<label for="dislike">Dislike?</label>
<input id="dislike" type="checkbox" class="checkbox" />
<input id="like" type="checkbox" checked="checked" class="checkbox" />
<label for="dislike">Dislike?</label>
<input id="dislike" type="checkbox" class="checkbox" />
+ You can starts the radio with checked, disabled or both states.
Radio example:
$('.radio').styly();
<label for="agree">Agree</label>
<input id="agree" type="radio" name="agreement" class="radio"/>
<label for="disagree">Disagree</label>
<input id="disagree" type="radio" name="agreement" class="radio"/>
<input id="agree" type="radio" name="agreement" class="radio"/>
<label for="disagree">Disagree</label>
<input id="disagree" type="radio" name="agreement" class="radio"/>
+ You can starts the radio with checked, disabled or both states.
Options:
checkedClass: 'styly-checked'
.styly-checked { background: url('checked.png'); }
$('#checkbox').styly({ checkedClass: 'styly-checked' });
Class with background used when element is checked.
checkedDisabledClass: 'styly-checked-disabled'
.styly-checked-off { background: url('checked-off.png'); }
$('#checkbox').styly({ checkedDisabledClass: 'styly-checked-off' });
Class with background used when element is checked but disabled.
Explanation:
- It is a class with a background on an especific postion to present the right icon;
- The prefix 'styly-' is good to avoid conflicts.
checkedHoverClass: 'styly-checked-hover'
.styly-checked-hover { background: url('checked-hover.png'); }
$('#checkbox').styly({ checkedHoverClass : 'unchecked-off' });
Class with background used when element is checked and hovered.
Explanation:
- It is a class with a background on an especific postion to present the right icon;
- The prefix 'styly-' is good to avoid conflicts.
trigger: true
<input type="checkbox" onclick="alert('inline event!')" />
<input id="binded" type="checkbox" />
$('#binded').click(function() {
alert('binded event!');
});
<input id="binded" type="checkbox" />
$('#binded').click(function() {
alert('binded event!');
});
$('#checkbox').styly({
trigger: false
});
trigger: false
});
Enables the events triggers.
Explanation:
- If you want trigger an event inline or binded on your element let it enabled;
- The plugin must call it, because you interacts with input's label, not the real label.
- If you want trigger an event inline or binded on your element let it enabled;
- The plugin must call it, because you interacts with input's label, not the real label.
uncheckAll: false
$('.checkbox').styly({ uncheckAll : true });
Uncheck all elements with the same class before do something.
Explanation:
- You can put the same behavior of the radio on the checkbox, because you'll uncheck all before check someone;
- Unlike radio the uncheck is based on class, because the checkbox should haven't repeated name like radi..
- You can put the same behavior of the radio on the checkbox, because you'll uncheck all before check someone;
- Unlike radio the uncheck is based on class, because the checkbox should haven't repeated name like radi..
uncheckedClass: 'styly-unchecked'
.styly-unchecked { background: url('unchecked.png'); }
$('#checkbox').styly({ uncheckedClass : 'styly-unchecked' });
Class with background used when element is unchecked.
Explanation:
- It is a class with a background on an especific postion to present the right icon;
- The prefix 'styly-' is good to avoid conflicts.
uncheckedHoverClass: 'styly-unchecked-hover'
.styly-unchecked-hover { background: url('unchecked-hover.png'); }
$('#checkbox').styly({ uncheckedHoverClass: 'unchecked-hover' });
Class with background used when element is hovered.
Explanation:
- It is a class with a background on an especific postion to present the right icon;
- The prefix 'styly-' is good to avoid conflicts.
uncheckedDisabledClass: 'styly-unchecked-disabled'
.styly-unchecked-off { background: url('unchecked-off.png'); }
$('#checkbox').styly({ uncheckedDisabledClass: 'unchecked-off' });
Class with background used when element is unchecked and disabled.
Explanation:
- It is a class with a background on an especific postion to present the right icon;
- The prefix 'styly-' is good to avoid conflicts.
Changing the settings globally:
$.fn.catchy.defaults.trigger = false;
$.fn.catchy.defaults.checkedClass = 'big-check';
- You can change any option mention the scope $.fn.styly.defaults. + option_name;$.fn.catchy.defaults.checkedClass = 'big-check';
- This setup must be called before you bind the Styly, of course.
Public functions:
$('#checkbox').styly('check', true, true);
Checks or unchecks an element. The third parameter is optionally to trigger an binded event.
$('.radio').styly('enable', true);
Enables or disables an element.
Explanation:
- It is a class with a background on an especific postion to present the right icon;
- The prefix 'styly-' is good to avoid conflicts.