A jquery plugin that convent select into choices.

• Main files
• Quick start
• Requirements
• Usage
• Examples
• Options
• Methods
• Events
• No conflict
• Browser support
• Contributing
• Development
• Changelog
• Copyright and license

dist/
├── jquery-asChoice.js
├── jquery-asChoice.es.js
├── jquery-asChoice.min.js
└── css/
    ├── asChoice.css
    └── asChoice.min.css

Several quick start options are available:

• Development - unminified
• Production - minified

bower install jquery-asChoice --save

npm install jquery-asChoice --save

yarn add jquery-asChoice

If you want build from source:

git clone [email protected]:amazingSurge/jquery-asChoice.git
cd jquery-asChoice
npm install
npm install -g gulp-cli babel-cli
gulp build

Done!

jquery-asChoice requires the latest version of jQuery.

<link rel="stylesheet" href="/path/to/asChoice.css">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery-asChoice.js"></script>

<select class="select" multiple="multiple">
    <option value ="default" selected="selected">default</option>
    <option value ="on">on</option>
    <option value="off">off</option>
 </select>

All you need to do is call the plugin on the element:

jQuery(function($) {
  $('.example').asChoice(); 
});

There are some example usages that you can look at to get started. They can be found in the examples folder.

jquery-asChoice can accept an options object to alter the way it behaves. You can see the default options by call $.asChoice.setDefaults(). The structure of an options object is as follows:

{
  namespace: 'asChoice',
  skin: null,

  multiple: false,
  value: ['default']
}

Methods are called on asChoice instances through the asChoice method itself. You can also save the instances to variable for further use.

// call directly
$().asChoice('destroy');

// or
var api = $().data('asChoice');
api.destroy();

Set the select value if value is defined or get the value.

// set the val
$().asChoice('val', '5');

// get the val
var value = $().asChoice('val');

Set the select value

$().asChoice('set', '5');

Get the select value.

var value = $().asChoice('get');

Enable the choice functions.

$().asChoice('enable');

Disable the choice functions.

$().asChoice('disable');

Destroy the choice instance.

$().asChoice('destroy');

jquery-asChoice provides custom events for the plugin’s unique actions.

$('.the-element').on('asChoice::ready', function (e) {
  // on instance ready
});

If you have to use other plugin with the same namespace, just call the $.asChoice.noConflict method to revert to it.

<script src="other-plugin.js"></script>
<script src="jquery-asChoice.js"></script>
<script>
  $.asChoice.noConflict();
  // Code that uses other plugin's "$().asChoice" 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-asChoice 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-asChoice 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 install

Then 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.

⬆ back to top