Dialog Start tour

eContactForm

You can use this plugin for your contact forms, the plugin has a powerfull validation engine which has a lot of validation types (included a regex validation type so that you can use your own custom made validation type). You can choose between sending the form with AJAX or not.

Basic

A powerfull AJAX contact form with valdiation.

How to use

How to use HTML elements.

Markup
<form id="formid" method="post" action="pathtofile.php">
       <input type="text" name="" data-validation-type="present" data-validation-label="There is nothing here!" data-validation-minimum="5" data-validation-maximum="100" />
       <input type="text" name="" data-validation-type="match" data-validation-match="test" data-validation-label="The value isn't correct!" />
       <input type="text" name="" data-validation-type="regex" data-validation-regex="/^[A-Za-z ]+$/" data-validation-label="Letters are only allowed!" />
       ...
       ...
       ...
       <input type="submit" value="Submit" class="button-text" />
    </form>

Usage Data Atributes (dataset)

Data atrributes are used by some of our custom plugins to set/get data.

HTML5 data attributes Element Example Desctription Since
data-validation-type input present | url | email | numbers | date | letters | regex | password | match | ip These are the validation types: present: checks if the field has any data(min en max can be set separately), url: checks for a valid url, email: checks for a valid email, date: checks for a valid date(00-00-0000), letters: allows only letters, regex: can be used if you want to check for a custom pattern, password: checks if both password are the same, match: can be used to validate a custom word or string or such, this is the same as the regex validation type, ip: checks for a valid ip adddress(255.255.255.255). 1.0
data-validation-label input This is used for the error indication text, if the field isn't valid you can set you own custom text, if u dont use this custom label it will use a default line, which you can set in the plugin options. 1.0
data-validation-minimum input This is the minimum value that has to be present. This is used in combination with the present, letters, numbers and password validation type(s). Default is 0. 1.0
data-validation-maximum input This is the maximum value that can be present. This is used in combination with the present, letters, numbers and password validation type(s). 1.0
data-validation-match input This can be used to validate a field with a fixed value. This is used in combination with the match validation type. 1.0
data-validation-regex input This can be used to validate a field with custom regex pattern. This is used in combination with the regex validation type. 1.0

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('div#formid').eContactForm({
    labelError: 'This field is required!',
    labelSuccess: 'Your message has been send successfully!',
    labelFail: 'The form has not been send, please try it again!',
    keydown: true,
    useAjax: true 
	before: function(){ },
	after: function(){ }                              
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
labelError string This field is required! Default valdidation message. 1.0
labelSuccess string Your message has been send successfully! Default send message. 1.0
labelFail string The form has not been send, please try it again! Default fail to send message. 1.0
keydown boolean true This will hide the error label of a field that has to be re-validated. 1.0
useAjax boolean true Use AJAX to send your form. 1.0
before function function(){} Callback function that runs at start. 1.0
after function function(){} Callback function that runs at the end. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

eCheckbox/eRadio

This theme has a custom plugin that allows you to style each chechbox/radio button to match our theme(s), the checkbox plugin also has the mass toggle option, so that you can quickly select or de-select a large number of checkboxes. The plugins are pretty simple and they just have a couple of options.

Basic

Checkbox buttons styling with mass toggle option.

How to use

How to use HTML elements.

Markup
<form class="sectionclassgoeshere">
    <input type="checkbox" name=""/>
    <input type="checkbox" name=""/>
    <input type="checkbox" name=""/>
    ...
    ...
    ...
    <input type="checkbox" name="" class="triggerclassgoeshere"/>
</form>

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('input[type="checkbox"]').eCheckbox({
    sectionClass: 'e-checkbox-section',
    triggerClass: 'e-checkbox-trigger',	
    toggleCallback: function(){}                                  
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
sectionClass string e-checkbox-section The class used for the mass toggle section(all checkboxes in this wrapper/section can be toggled). 1.0
triggerClass string e-checkbox-trigger This is the class for the mass toggle checkbox(master) switch. 1.0
toggleCallback function function(){} Callback function that runs if the mass select/un-select is used. 1.0

Basic

Radio buttons styling.

How to use

How to use HTML elements.

Markup
<form>
    <input type="radio" name="demo"/>
    <input type="radio" name="demo"/>
    <input type="radio" name="demo"/>
    ...
    ...
    ...
</form>

Usage plugin

How to use our custom made jQuery plugins.

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

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Default Default Desctription Since
This plugin has no options.

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

OsKeyboard

Basic on screen keyboard plugin.

Basic

On screen keyboard plugin.

How to use

How to use HTML elements.

Markup
<input type="text" id="eoskeyboard-id" />

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('#eoskeyboard-id').eOsKeyboard({
    title:'OS Keyboard',
    trigger: 'focus',
    draggable: true,
    posY: 20,
    posX: 0,
    zIndex: 1000
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
title string OS Keyboard The title of the OS keyboard. 1.0
trigger string icon | focus How the OS keyboard is triggerd, by an icon or when you click on a input(focus). 1.0
draggable boolean true Allow the Oskeyboard to be draggable. 1.0
posX number(integer) 20 The position of the OS keyboard(vertical). 1.0
posY number(integer) 0 The position of the OS keyboard(horizontal). 1.0
zIndex number(integer) 1000 The z-index of the keyboard. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

eTextarealimiter

This plugin uses the HTML5 attribute called 'maxlength' to get the max length value of a textarea. Not all browsers do support HTML5 so this plugin is usefull for browsers that dont support HTML5.

Basic

Textarea maxlimiter plugin.

How to use

How to use HTML elements.

Markup
<textarea id="textarea-limiter-id" maxlength="250" ></textarea>

Usage plugin

How to use our custom made jQuery plugins.

Markup
$("#textarea-limiter-id").eTextareaLimiter({
	maximum: 250,			
	savety: true,	
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
maximum number(integer) 10000 The maximum of characters that are allowed in the textarea. 1.0
savety boolean true Disable the submit button if the textarea exceeds the limit(backup savety when somebody copy past a large piece of text thats larger then the limit). 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

eClone

This is a simple plugin that clones a element. Best used for input fields(forms). As you can see in the example the plugin will always clone the last found element.

Basic

Simple cloning plugin.

How to use

How to use HTML elements.

Markup
<div class="clone-range">
    <div> 
    	<input type="text" name=""/>
    </div>
    <div> 
    	<input type="text" name=""/>
    </div>
    <div> 
    	<input type="text" name=""/>
    </div>                                         
    <div class="not-clone"> 
    	<a href="javascript:void(0);" class="clone-trigger">Add new row</a>
    </div>                                                                                                 
</div>

Usage plugin

How to use our custom made jQuery plugins.

Markup
$("div.clone-range").eClone({
      target: 'div',
      trigger: '.clone-trigger',
      excludeClass: 'not-clone',
      effect: 'slide',
      speed: 200,
      before: function(){ },
      after: function(){ }
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
target string div The element/part that should be cloned, notice that it will always clone the last found element in the cloning range. 1.0
trigger string .clone-trigger The class or id of the button which triggers the cloning progress. 1.0
excludeClass string .not-clone The class or id of the part in the cloning range that not should be cloned. 1.0
effect string slide The effect of the cloning, you can choose between 'slide' and 'fade'. 1.0
speed number(integer) 200 The speed of the effect. 1.0
before function function(){} Callback function that runs at start. 1.0
after function function(){} Callback function that runs at the end. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

eInputExpand

Hook your text inputs to a popup textarea to maximize your workflow.

Basic

From input to textarea.

How to use

How to use HTML elements.

Markup
<input type="text" id="inputexpand" name="" />

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('input#inputexpand').eInputExpand({
    width: 320,
    height: 220,
    labelSubmit: 'Insert',
    labelCancel: 'Cancel',
    opacity: 0.5,
    escKey: true,
    before: function(){ },
    after: function(){ }
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
width number(integer) 320 The width of the popup box. 1.0
height number(integer) 220 The height of the popup box. 1.0
labelSubmit string insert The label of the submit/insert button. 1.0
labelCancel string insert The label of the cancel button. 1.0
opacity number(float) 0.5 The opacity of the overlay. 1.0
opacity boolean true Allow users to cancel with the ESC key. 1.0
before function function(){} Callback function that runs at start. 1.0
after function function(){} Callback function that runs at the end. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

eSelect

Style your select elements(basic and multiple) the easy way.

Basic

Simple select styling.

How to use

How to use HTML elements.

Markup
<select>
    <option value="">-- select option --</option>
    <option value="a">Option 1</option>
    <option value="b">Option 2</option>
    <option value="c">Option 3</option>
    <option value="d">Option 4</option>
    <option value="e">Option 5</option>
</select>

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('select').eSelect({
    exclude: '',
    speed: 200,
    onSelect: function(){ }	
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
exclude string You can exclude select elements by using the id or class of this element. Example: '#idname, .classname'. 1.0
speed number(integer) 200 The speed of the effect. 1.0
onSelect function function(){} Callback function that runs after you have selected a value. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

eFile

Native file input styling made easy.

Basic

Simple file input styling.

How to use

How to use HTML elements.

Markup
<input type="file" name=""/>

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('input[type="file"]').eFile({
    label: 'upload',
    exclude: '',
    onUpload: function(){ }	
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
label string 200 The speed of the effect. 1.0
exclude string You can exclude select elements by using the id or class of this element. Example: '#idname, .classname'. 1.0
onUpload function function(){} Callback function that runs after a file gets selected. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

eChainedInput

You can chain input fields to each other by using this plugin, the inputs grouped by using the attribute 'data-chained-group', and are triggerd by the 'maxlength' attribute.

Basic

An easy way to chain input to each other.

How to use

How to use HTML elements.

Markup
<input type="text" name="" data-chained-group="field1" maxlength="6"/>
<input type="text" name="" data-chained-group="field1" maxlength="16"/>
<input type="text" name="" data-chained-group="field1" maxlength="2"/>

Usage Data Atributes (dataset)

Data atrributes are used by some of our custom plugins to set/get data.

HTML5 data attributes Element Example Desctription Since
data-chained-group input This data attribut connects the input to each other. All the input which you want to group should have an unique name. 1.0

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('form').eChainedInput({
    callback: function(){ }	
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
callback function function(){} Callback function that runs after the last input has reached it's maxlength. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

eShowPassword

Lightweight jQuery plugin that allows users to transform the password into a readable password.

Basic

An easy way to see what you are typing.

How to use

How to use HTML elements.

Markup
<input type="password" name="" id="password" />
...
...                                           
<a href="javascript:void(0);" id="show-password">Show password </a>
                                            

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('#password').eShowPassword({
    trigger: '#show-password',
    exclude: '',
    onSwitch: function(){ }		
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
trigger string The trigger that toggles the inputs. 1.0
exclude string You can exclude select elements by using the id or class of this element. Example: '#idname, .classname'. 1.0
onSwitch function function(){} Callback function that runs with evert click of the trigger. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

Third-party plugins

Third-party plugins are not documented here because they have there own documentation.

Datepicker

jQuery UI datepicker plugin.

This is a third party plugin, for options and how to use please visit this site.

jQuery uploader

jQuery upload plugin.

This is a third party plugin, for options and how to use please visit this site.

jQuery UI spinner

jQuery UI spinner input.

This is a third party plugin, for options and how to use please visit this site.

jQuery UI autocomplete

jQuery UI autocomplete plugin.

This is a third party plugin, for options and how to use please visit this site.

Autogrow textarea

jQuery autogrow textarea plugin.

This is a third party plugin, for options and how to use please visit this site.

Resizable textarea

jQuery Resizable textarea plugin.

This is a third party plugin, for options and how to use please visit this site.

UI Sliders

jQuery UI sliders.

This is a third party plugin, for options and how to use please visit this site.

Select to UI slider

Slider that uses select fields.

This is a third party plugin, for options and how to use please visit this site.

Masked input

Masked input plugin for inputs.

This is a third party plugin, for options and how to use please visit this site.