A jquery plugin that do amazing things.
- Main files
- Quick start
- Requirements
- Usage
- Examples
- Options
- Methods
- Events
- No conflict
- Browser support
- Contributing
- Development
- Changelog
- Copyright and license
dist/
├── jquery-asCheck.js
├── jquery-asCheck.es.js
├── jquery-asCheck.min.js
└── css/
├── asCheck.css
└── asCheck.min.css
Several quick start options are available:
- Development - unminified
- Production - minified
bower install jquery-asCheck --savenpm install jquery-asCheck --saveyarn add jquery-asCheckIf you want build from source:
git clone git@github.com:amazingSurge/jquery-asCheck.git
cd jquery-asCheck
npm install
npm install -g gulp-cli babel-cli
gulp buildDone!
jquery-asCheck requires the latest version of jQuery.
<link rel="stylesheet" href="/path/to/asCheck.css">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery-asCheck.js"></script><input class="example" type="radio" name="radio" id="radio-example" value="male" /><label for="radio-example">Example</label>All you need to do is call the plugin on the element:
jQuery(function($) {
$('.example').asCheck();
});There are some example usages that you can look at to get started. They can be found in the examples folder.
jquery-asCheck can accept an options object to alter the way it behaves. You can see the default options by call $.asCheck.setDefaults(). The structure of an options object is as follows:
{
namespace: 'asCheck',
skin: null,
disabled: false
}
Methods are called on asCheck instances through the asCheck method itself. You can also save the instances to variable for further use.
// call directly
$().asCheck('destroy');
// or
var api = $().data('asCheck');
api.destroy();Enable the check functions.
$().asCheck('enable');Disable the check functions.
$().asCheck('disable');Destroy the check instance.
$().asCheck('destroy');jquery-asCheck provides custom events for the plugin’s unique actions.
$('.the-element').on('asCheck::ready', function (e) {
// on instance ready
});| Event | Description |
|---|---|
| init | Fires when the instance is setup for the first time. |
| ready | Fires when the instance is ready for API use. |
| enable | Fired when the enable instance method has been called. |
| disable | Fired when the disable instance method has been called. |
| destroy | Fires when an instance is destroyed. |
If you have to use other plugin with the same namespace, just call the $.asCheck.noConflict method to revert to it.
<script src="other-plugin.js"></script>
<script src="jquery-asCheck.js"></script>
<script>
$.asCheck.noConflict();
// Code that uses other plugin's "$().asCheck" can follow here.
</script>Tested on all major browsers.
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Latest ✓ | Latest ✓ | Latest ✓ | Latest ✓ | 9-11 ✓ | Latest ✓ |
As a jQuery plugin, you also need to see the jQuery Browser Support.
Anyone and everyone is welcome to contribute. Please take a moment to
review the guidelines for contributing. Make sure you're using the latest version of jquery-asCheck before submitting an issue. There are several ways to help out:
- Bug reports
- Feature requests
- Pull requests
- Write test cases for open bug issues
- Contribute to the documentation
jquery-asCheck is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run:
npm install -g gulp
npm install -g babel-cli
npm installThen you can generate new distributable files from the sources, using:
gulp build
More gulp tasks can be found here.
To see the list of recent changes, see Releases section.
Copyright (C) 2016 amazingSurge.
Licensed under the LGPL license.
#jquery-asCheck
The powerful jQuery plugin that provide a easy used and customized checkbox. Project page and demos
Download: jquery-asCheck-master.zip
- callbacks to handle changes
- Lightweight size — 1 kb gzipped
- Saves changes to textarea, works carefully with any selectors
Import this libraries:
- jQuery
- jquery-asCheck.min.js
And CSS:
- jquery-asCheck.css - desirable if you have not yet connected one
Create base html element:
<ul>
<li>
<input class="radio" type="radio" name="radiobox" id="male-1" value="male" />
<label for="male-1" >Male</label>
</li>
<li>
<input class="radio" type="radio" name="radiobox" id="male-2" value="female" />
<label for="male-2" >Female</label>
</li>
<li>
<input class="radio" type="radio" name="radiobox" id="male-3" value="male" disabled="disabled" />
<label for="male-3" >checked disable</label>
</li>
<li>
<input class="radio" type="radio" name="radiobox" id="male-4" value="male" disabled="disabled" />
<label for="male-4" >checked disable</label>
</li>
</ul>Initialize check:
$('.radio').check({skin: 'skin-1'});Or initialize check with custom settings:
$(".radio").check({
namespace: 'check',
skin: null,
state: 'enabled',
checked: 'checked',
type: 'checkbox', // checkbox , radio
onChange: function() {}
});{
//Optional property, set a namspace for css class, for example, we
//have <code>.check_active</code> class for active effect, if
//namespace set to 'as-check', then it will be <code>.as-check_active
namespace: 'check',
//Optional property, set transition effect, it works after you load specified skin file
skin: null,
//Optional property, set input's disabled state
state: enable,
//Optional property, set input's checked property,if the value is 'checked',this input will be checked
checked: 'checked',
//Optional property, set input's type
type: 'checkbox',
//callback after input's state is changed
Onchange: function(）{}
}jquery check has different methods , we can use it as below :
// set input's state
$(".radio").check("set");
// remove disabled state
$(".radio").check("enable");
// change input's state to disabled
$(".radio").check("disable");change: trigger when input's checked property changeddisabled: trigger when input set to disabledenabled: trigger when input set to enabled
how to use event:
$(document).on('change', function(event,instance) {
// instance means current check instance
// some stuff
});