plusInputRadio - JamyGolden/plus-ui GitHub Wiki

Turns the native browser radio button into a styleable element. Sass compiles the images into a sprite and uses those image dimensions for the radio button dimensions. This means that you could upload the radio button images that have unique dimensions, compile the Sass and the CSS would automatically be adjusted to the new dimensions.

Typical usage

HTML

<input type="radio" />

JS

$('input[type="radio"]').plusInputRadio();

Default options:

These are the default options and the typical usage applies these by default. Any object, property or method that is changed here will overwrite the default version.

$(el).plusInputRadio({
  nameSpace: 'plusui-form-radio', // Sets the name space for the HTML attributes
  elAttrNames: {
    'fauxElClass'   : '',
    'disabledClass' : '--disabled',
    'checkedClass'  : '--checked',
    'mousedownClass': '--mousedown'
  },
  onInit: function($el, $fauxEl, options){},
  onChange: function($el, $fauxEl, options){},
  onMousedown: function($el, $fauxEl, options){}
})

The custom radio element reflects the states of the native radio on itself. If a native radio is checked or disabled, the custom radio reflects those states by applying the following jQuery data: $(el).data('plusui-checked') $(el).data('plusui-disabled')

These custom checked elements can be selected by doing the following.

$(elements).filter(function(){
  return $(this).data('plusui-checked') === 'checked';
});

Options explanation

namespace, elAttrNames and the callback functions are explained in more detail on the wiki home page.