A full-featured radiobox jquery plugin
- Supports more configurable options.
- Supports more methods
- Supports more events
- Supports fast internationalization
- Cross-browser support
- Clone the repository: git clone https://github.com/gregzhang616/gemini-radiobox.git.
- Install with Npm: npm install gemini-radiobox.
- Install with Bower: bower install gemini-radiobox.
Css file
<link rel="stylesheet" href="/css/gemini.radiobox.min.css">
Javascript file
<script src="/assets/js/jquery.min.js"></script>
<script src="/js/gemini.radiobox.min.js"></script>
You may set checkbox options with $().radiobox(options), the options type is Object.
Name | Type | Default value | Optional value | Description |
---|---|---|---|---|
type | String | 'radiobox' | radiobox/radiobutton | the type of radio |
name | String | '' | -- | native attribute for radio |
radiolist | String/Array | '' | -- | rendered data for radio, type is String or Array, such as 'Agree' or ['JD', 'Alibaba'] or [{label: 'JD', value: 1}, {label: 'Alibaba', value: 2}] |
disabled | Boolean/Array | null | -- | disabled data for radio, such as true/false or ['JD'] or [1] |
defaultValue | Boolean/Array | null | -- | default value for radiobox or radiobutton. |
size | String | 'small' | small/medium/large | The size for radiobox or radiobutton. |
Common usage
$().radiobox(methodName, argument1, argument2, ..., argumentN);
Set the current value with a new value, parameter value type is Boolean or Array .
$().radiobox('setValue', true);
$().radiobox('setValue', ['JD', 'Alibaba']);
$().radiobox('setValue', [1, 2]);
Get the current checked value.
$().radiobox('getValue');
reset the radiobox checked status.
$().radiobox('reset');
disable or enable the radiobox or radiobutton.
// disable the single radiobox
$().radiobox('disable', true);
// enable the single radiobox
$().radiobox('disable', false);
// disable the radiobox/radiobutton group item
$().radiobox('disable', ['JD', ...]); or $().checkbox('disable', [1, ...]);
// disable the all the radiobox/radiobutton item
$().radiobox('disable');
// enable the all the radiobox/radiobutton item
$().radiobox('disable', []);
Destroy the radiobox and remove the instance from target element.
$().radiobox('destroy');
Common usage
$().on(eventName, function (e, arguments) {
// todo
});
This event fires when checked value is changed.
- event ( Type: Object )
- newValue ( Type: Boolean/Array )
$().on('change.radiobox', function (event) {
console.log('newValue: ' + event.newValue);
});
This event fires when radiobox/radiobutton item is clicked.
$().on('click.radiobox', function (event) {
// todo
});
Common usage
$().datepicker({
CallbackName: function () {
// todo
}
});
A shortcut of the "change.radiobox" event, this callback called when checked value is changed.
$().radiobox({
onChange: function (event) {
console.log('newValue: ' + event.newValue);
}
});
A shortcut of the "click.radiobox" event, this callback called when radiobox/radiobutton item is clicked.
$().radiobox({
onClick: function (event) {
console.log('newValue: ' + event.newValue);
}
});
Please download the project, and then enter into this directory.(download gulp-sass plugin need to connect vpn)
- npm install
- gulp
- Access "http://localhost:8888/examples/index.html" in browser
- Chrome Most versions
- Firefox Most versions
- Safari Most versions
- Opera Most versions
- Edge Most versions
- Internet Explorer 8+
Greg Zhang from Asiainfo ([email protected]).