Home

This is the Plus UI Wiki home page.

Plus UI methods

• plusFormSelect
• plusInputCheckbox
• plusInputRadio
• plusInputPlaceholder
• plusInputFile
• plusResponsiveImages

General method properties

Most Plus UI methods accept the following properties.

namespace

This property changes the objects CSS namespace. For example an object may have the following HTML classes by default:

.foo {}
.foo__button {}
.foo__arrow {}

By changing the namespace option to 'bar', the class names will be changed to:

.bar {}
.bar__button {}
.bar__arrow {}

elAttrNames

People can get pretty emotional about their HTML class names. This gives the user the ability to customize them if desired. An example elAttrNames property could look like this:

elAttrNames: {
  'fauxElClass'   : '',
  'buttonClass' : '__button',
  'arrowClass'  : '__arrow'
}

Changing the value of the properties within elAttrNames will change the value of the HTML class names used. If namespace: 'baz' is used alongside the above elAttrNames example, the output would be:

.baz {}
.baz__button {}
.baz__arrow {}

and if that was changed to:

elAttrNames: {
  'fauxElClass'   : '-container',
  'buttonClass' : '__btn',
  'arrowClass'  : '__triangle'
}

The HTML classes used would be:

.baz-container {}
.baz__btn {}
.baz__triangle {}

Method API

There are various callback methods that can be used with most Plus UI jQuery methods. These callback methods should all be pretty self explanatory by their name. For example a click Plus UI method callback would be called onClick. These methods pass in 3 options: Element, Faux Element and options.

• Element ($el) referring to the jQuery object of the default form element.

• Faux Element ($fauxEl) referring to the jQuery object of the Plus UI custom form element.

• Options referring to the options object passed in when initializing the Plus UI method (First parameter passed in). An example click callback on a generic Plus UI method would look like this:

  $(el).plusGenericMethod({ onClick: function($el, $fauxEl, options){ alert('clicked on ' + $fauxEl.attr('class')); } })