Number v 1.0

Converts an input field into a rich featured numbers-only field

If you define decimals = 2:

• type '123' => converts it to '123.00'
• type '123.456' => converts it to '123.47'
• type '123,000' => converts it to '123.00'

• Hold down the shift key to multiple steps by 10

Options read more about inline data attributes

Methods

Usage

$(selector).wl_Number([options]);

Markup

<input type="number" class="integer"> //for integers
<input type="number" class="decimal"> //for decimals

Example

Date v 1.0

Converts an input field into a rich featured date field. Uses the jQuery datepicker

• use mousewheel to scroll thru dates
• hold down shift to scroll thru month

Options read more about inline data attributes

Check out the jQuery datepicker options for the other options

Methods

Check out the jQuery datepicker methods

Usage

$(selector).wl_Date([options]);

Markup

<input type="text" class="date">
<div class="date"></div> //for inline datefield

Example

Time v 1.1

Converts an input field into a rich featured time field.

You can type a valid time (e.g. 10:30) or following:

• type '1' => converts it to 01:00
• type '12' => converts it to 12:00
• type '123' => converts it to 12:30
• type '1234' => converts it to 12:34

If you use 12h timeformat 23:00 gets converted to 11:00pm

• use mousewheel to scroll thru minutes
• Hold down the shift key to scroll thru hours

Options read more about inline data attributes

Methods

Usage

$(selector).wl_Time([options]);

Markup

<input type="text" class="time">

Example

Multiselect v 1.3

Converts an multi select dropdown field into a Combo box

Options read more about inline data attributes

[{
  name:'Item Name',
  value:'item_value'
},{
  name:'Item Name 2',
  value:'item_value_2'
}]			

['item_value','item_value_2']

Methods

Usage

$(selector).wl_Multiselect([options]);

Calling Methods

Add Elements

$(selector).wl_Multiselect('add','Entry'); // value is equal name
$(selector).wl_Multiselect('add',['First Entry','Second Entry']); // value is equal name
$(selector).wl_Multiselect('add',{'first': 'First Entry','second': 'Second Entry'});

Select/Unselect Elements

$(selector).wl_Multiselect('[un]select','Entry');
$(selector).wl_Multiselect('[un]select',['First Entry','Second Entry']);

Remove Elements

$(selector).wl_Multiselect('remove','Entry');
$(selector).wl_Multiselect('remove',['First Entry','Second Entry']);

Markup

<select multiple>
	<option value="artichoke">Artichoke</option>
	<option value="beans" selected>Beans</option>
	<option value="broccoli">Broccoli</option>
	...
</select>

Example

Autocomplete v 1.0

Converts an input field into an autocomplete field using jQuery autocomplete

Options read more about inline data attributes

Methods

Usage

$(selector).wl_Autocomplete([options]);

Markup

<input type="text" class="autocomplete">
<input type="text" class="autocomplete" data-source="[abc,def,ghi,jkl,mno,pqr,stu,vwx,yz]">
<input type="text" class="autocomplete" data-source="myAutocompleteFunction">

Example

Valid v 1.0

Converts an input field ready for valid inputs

Options read more about inline data attributes

Methods

Usage

$(selector).wl_Valid([options]);
$(selector).wl_Mail([options]); //shorthand for emails
$(selector).wl_URL([options]); //shorthand for urls

Markup

<input type="text" data-regex="[regex]">
<input type="email"> //for emails
<input type="url"> //for urls;

Example

Password v 1.0

Converts an input field into a rich featured password field with strengthmeter and confirmation.

Options read more about inline data attributes

Methods

Usage

$(selector).wl_Password([options]);

Markup

<input type="password">

Example

Color v 1.0

Converts an input field into a colorpicker using jQuery miniColors

• use mousewheel to scroll thru brightness
• hold down shift to scroll thru saturation
• hold down shift+alt to scroll thru hue

Options read more about inline data attributes

Methods

Usage

$(selector).wl_Color([options]);

Markup

<input type="text" class="color">

Example