Welcome

These plugins are aimed for professionals with extensive JavaScript knowledge. Each plugin follows a simplistic and a modular approach. All plugins have demos, tests and documentation regarding their options, methods, events and callbacks.

The plugins are compatible with Firefox, Chrome, Safari and IE7+. We also support iOS, Android and Windows Phone to insure correct responsive behaviour with full accessible support according to the WCAG 2.0 standards. Each plugin requires at least class.js 1.0+ and jQuery 1.7+.

The latest stable versions are available on github - https://github.com/finalangel/classjs-plugins

Requirements

For additional information on how to run documentation or the examples locally, consult the docs/README.rst or the demo page’s FAQ section: http://finalangel.github.io/classjs-plugins/

Plugins

Cl.Accordion

This is a list of all relevant options, methods, events and callbacks.

Options

Options are set on initializing the accordion:

new Cl.Accordion({
    // your options
    'index': 0,
    'event': 'mouseenter'
});
Option Default Description
index null shows selected element[index] starting form zero.
expanded false initial visibility of all items inside the selector.
event ‘click’ the jquery element of which the accordion will listen to.
easing ‘swing’ the jquery easing method for all animations.
duration 300 the jquery duration speed for all animations.
grouping true enables all elements to be grouped together, only one will be visible at any given time.
forceClose false if enabled, allows open element to be closed again.
disableAnchors true disables descending anchors from triggering. For example if the trigger is an li wrapping an anchor.
autoHeight false sets the height for each element on initialization.
cls object the available css class getters and setters.
lang object the available language configurations.

Option cls setters and getters:

Option Default Description
expanded ‘expanded’ will be added on the trigger when expanded
collapsed ‘collapsed’ will be added on the trigger when collapsed
trigger ‘.trigger’ the element which triggers toggle
container ‘.container’ the container to be expanded and collapsed
text ‘.text’ will be used to switch language text

Option lang strings:

Option Default
expanded ‘Expanded ‘
collapsed ‘Collapsed ‘

Methods

Methods can be called using an instance of the class:

var accordion = new Cl.Accordion();
    // trigger the method
    accordion.toggle();

All Methods have appropriate events and callbacks.

accordion.toggle(index)
Description:

toggles a specified accordion entry.
Arguments:
  • index (number) – required the index of the element to be toggled.
Returns:

toggle callback.
accordion.show([index])
Description:

opens an accordion entry.
Arguments:
  • index (number) – optional index of the element to be shown, if empty shows all.
Returns:

open callback.
accordion.hide([index])
Description:

hides an accordion entry.
Arguments:
  • index (number) – optional index of the element to be shown, if empty hides all.
Returns:

close callback.

Callbacks

Callbacks are always triggered after the method is excecuted. You can interact with callbacks as follows:

var accordion = new Cl.Accordion();
// register callback
accordion.callbacks.toggle = function () {
    console.log('item has toggled');
};

Available keywords:

toggle
is called when triggering method ``toggle``.
open
is called when triggering method ``open``.
close
is called when triggering method ``close``.

Cl.Autocomplete

This is a list of all relevant options, methods, events and callbacks.

Options

Options are set on initializing autocomplete:

new Cl.Autocomplete({
    // your options
    'minLength': 1,
    'fx': 'toggle'
});
Option Default Description
url false sd
minLength 3 sd
easing ‘swing’ the jquery easing method for all animations.
duration 300 the jquery duration speed for all animations.
delay 300 the jquery duration speed for all animations.
fx ‘slide’ the jquery duration speed for all animations.
cls object the available css class getters and setters.
lang object the available language strings.

Option cls setters and getters:

Methods

Methods can be called using an instance of the class:

var mobilemenu = new Cl.Mobilemenu();
    // trigger the method
    mobilemenu.toggle();

All Methods have appropriate events and callbacks.

mobilemenu.toggle(index)
Description:

toggles a specified mobilemenu entry.
Arguments:
  • index (number) – required the index of the element to be toggled.
Returns:

toggle callback.
mobilemenu.show([index])
Description:

opens an mobilemenu entry.
Arguments:
  • index (number) – optional index of the element to be shown, if empty shows all.
Returns:

open callback.
mobilemenu.hide([index])
Description:

hides an mobilemenu entry.
Arguments:
  • index (number) – optional index of the element to be shown, if empty hides all.
Returns:

close callback.

Callbacks

Callbacks are always triggered after the method is excecuted. You can interact with callbacks as follows:

var mobilemenu = new Cl.Mobilemenu();
// register callback
mobilemenu.callbacks.toggle = function () {
    console.log('item has toggled');
};

Available keywords:

toggle
is called when triggering method ``toggle``.
open
is called when triggering method ``open``.
close
is called when triggering method ``close``.

Cl.Debug

This is a list of all relevant options, methods, events and callbacks.

Options

Options are set on initializing debug:

new Cl.Debug({
    // your options
    'close': true
});
Option Default Description
closed false defines if the button is visible or not.
collapsed true defines if the menu is expanded or collapsed.

Methods

append #show to url for enabling the button when closed.

Callbacks

There are no callbacks so far.

Cl.Lightbox

This is a list of all relevant options, methods, events and callbacks.

Options

Options are set on initializing the lightbox:

new Cl.Lightbox({
    'group': false,
    'responsive': false
});
Option Default Description
prefix ‘cl’ the prefix is attached to all internal events and css classes for example cl-lightbox or cl-lightbox.
group true allows grouping of matching elements and enables status and navigation.
cycle true requires group allows previous and next methods to cycle through matching elements.
modal true enables the dimmer functionality.
modalClickable true requires modal allows the dimmer to be closed onclick.
modalClosable true requires modalClickable disables all close events, lightbox can be only closed using the API.
forceLoad false if enabled, insures that iframes are fully loaded before display.
easing ‘swing’ jquery easing effect for all animations.
duration 300 duration until the lightbox is fully expanded.
speed 300 speed for all regular animations.
fixed true sets the lightbox always inside the viewport of the user even when scrolling.
responsive true enables responsive behaviour of the lightbox.
ajax false ajax loads the provided url and tries to inject the html into the lightbox. It does not create an iframe in order to maintain the css style.
controls true requires group enables controllable elements when a collection is active.
cls ‘’ adds an additional class to the top level element.
opacity 0.8 ``requires modal``transparent level for dimmer.
styles Object adds jquery style css object to gallery content element.
dimensions Object available dimensions are initialWidth, initialHeight, offset, width and height.
keys true enables control for the lightbox using the keyboard.
keyCodes Object requires keys enables key control for close, next and previous.
lang Object the available language configurations.

Option lang strings:

Option Default
close ‘Close lightbox’
errorMessage ‘<p><strong>The requested element...</p>’
next ‘Next’
previous ‘Previous’
status ‘Slide {current} of {total}.’

Methods

Methods can be called using an instance of the class:

var lightbox = new Cl.Lightbox();
    // trigger the instanace
    lightbox.open();

All Methods have appropriate events and callbacks.

instance.open(url)
Description:

opens the lightbox with the provided url or jQuery element.
Arguments:
  • type (jquery) – either url or jQuery element.
Returns:

open callback
instance.close()
Description:closes the lightbox.
Returns:close callback
instance.resize(width, height)
Description:

resizes the lightbox to the specified dimensions.
Arguments:
  • width (number) – the width the lightbox should be resized to.
  • height (number) – the height the lightbox should be resized to.
Returns:

resize callback
instance.destroy()
Description:removes the lightbox from the dom.
Returns:destroy callback
instance.next()
Description:movies to the next element.
Returns:next callback
instance.previous()
Description:movies to the previous element.
Returns:previous callback
instance.getElement()
Returns:the current visible element
instance.getCollection()
Returns:all current elements in the collection

Callbacks

Callbacks are always triggered after the method is excecuted. You can interact with callbacks as follows:

var lightbox = new Cl.Lightbox();
// register callback
lightbox.callbacks.close = function () {
    console.log('lightbox is closing');
};

Available keywords:

open
is called when triggering method ``open``.
close
is called when triggering method ``close``.
resize
is called when triggering method ``resize``.
destroy
is called when triggering method ``destroy``.
next
is called when triggering method ``next``.
previous
is called when triggering method ``previous``.

Private keywords:

load
is called when triggering private method ``load``.
complete
is called when triggering private method ``complete``.
unload
is called when triggering private method ``unload``.

Cl.Mobilemenu

This is a list of all relevant options, methods, events and callbacks.

Options

Options are set on initializing the mobilemenu:

new Cl.Mobilemenu({
    // your options
    'duration': 0,
    'ratio': 80 / 100
});
Option Default Description
easing ‘swing’ the jquery easing method for all animations.
duration 300 the jquery duration speed for all animations.
bound 539 the bound used when the mobilemenu should show up.
ratio 70 / 100 the ratio used for how much the menu is taking from the viewport.
fixedRatio null same as ratio just in pixel instead of multiplicator.
offset object offsets to left or top of the menu.
cls object the available css class getters and setters.
overlay ‘’ the generated overlay.

Option cls setters and getters:

Option Default Description
menu ‘.mainnav’ will be added on the trigger when expanded
inner ‘> ul’ will be added on the trigger when collapsed
knob ‘.mainnav-knob’ the element which triggers toggle

Methods

Methods can be called using an instance of the class:

var mobilemenu = new Cl.Mobilemenu();
    // trigger the method
    mobilemenu.toggle();

All Methods have appropriate events and callbacks.

mobilemenu.toggle(index)
Description:

toggles a specified mobilemenu entry.
Arguments:
  • index (number) – required the index of the element to be toggled.
Returns:

toggle callback.
mobilemenu.show([index])
Description:

opens an mobilemenu entry.
Arguments:
  • index (number) – optional index of the element to be shown, if empty shows all.
Returns:

open callback.
mobilemenu.hide([index])
Description:

hides an mobilemenu entry.
Arguments:
  • index (number) – optional index of the element to be shown, if empty hides all.
Returns:

close callback.

Callbacks

Callbacks are always triggered after the method is excecuted. You can interact with callbacks as follows:

var mobilemenu = new Cl.Mobilemenu();
// register callback
mobilemenu.callbacks.toggle = function () {
    console.log('item has toggled');
};

Available keywords:

toggle
is called when triggering method ``toggle``.
show
is called when triggering method ``show``.
hide
is called when triggering method ``hide``.

Cl.Uniform

This is a list of all relevant options, methods, events and callbacks.

Options

Options are set on initializing the carousel:

new Cl.Uniform();
Option Default Description
offset -9999 the offset of the input related to the surrounding container.
cls object the available css class strings.
lang object the available language configurations.
tpl object the html template which will be used to replace the forms.

Option cls strings:

Option Default Description
prefix ‘uniform’ will be added before all following classes.
radio ‘radio’ will be used as the wrapper for radio elements.
checkbox ‘checkbox’ will be used as the wrapper for checkbox elements.
file ‘file’ will be used as the wrapper for file elements.
select ‘select’ will be used as the wrapper for select elements.
disabled ‘disabled’ will be added whenever the attribute disabled="disabled" is defined.
focus ‘focus’ will be added whenever focus is triggered on the element.
ready ‘ready’ will be added when the uniform is ready on this particular field.
checked ‘checked’ will be added when checkbox/radio is checked/selected

Option lang strings:

Option Default
fileBtn ‘Upload’
fileStatus ‘Please select a file...’

Option tpl strings:

Option Default
radio dom element (string)
checkbox dom element (string)
file dom element (string)
select dom element (string)

Methods

Methods can be called using an instance of the class:

var uniform = new Cl.Uniform();
    // trigger the instanace
    uniform.update();

All Methods have appropriate events and callbacks.

uniform.update()
Description:checks all form elements and updates their states accordingly.
Returns:update callback.
uniform.destroy()
Description:removes uniform from form elements.
Returns:destroy callback.

Callbacks

Callbacks are always triggered after the method is excecuted. You can interact with callbacks as follows:

var uniform = new Cl.Uniform();
// register callback
uniform.callbacks.update = function (scope) {
    console.log('uniform is excecuting update');
};

Available keywords:

update
is called when triggering method ``update``.
destroy
is called when triggering method ``destroy``.