Chico UI - Doc

v1.0.0

ch.Countdown

Description

Countdown counts the maximum of characters that user can enter in a form control. Countdown could limit the possibility to continue inserting charset.

How-to

// Create a new Countdown.
var countdown = new ch.Countdown($el, [options]);
// Create a new Countdown with jQuery or Zepto.
var countdown = $(selector).countdown();
// Create a new Countdown with custom options.
var countdown = $(selector).countdown({
    'max': 250,
    'plural': 'Left: # characters.',
    'singular': 'Left: # character.'
});
// Create a new Countdown using the shorthand way (max as parameter).
$(selector).countdown(500);

Parameters

  • $el - jQuerySelector | ZeptoSelector : A jQuery or Zepto Selector to create an instance of ch.Countdown.
  • options - Object : Options to customize an instance.
    • max - Number : Number of the maximum amount of characters user can input in form control. Default: 500.
    • plural - String : Message of remaining amount of characters, when it's different to 1. The variable that represents the number to be replaced, should be a hash. Default: "# characters left.".
    • singular - String : Message of remaining amount of characters, when it's only 1. The variable that represents the number to be replaced, should be a hash. Default: "# character left.".

Extends

Properties

.$trigger jQuerySelector | ZeptoSelector

The countdown trigger.

// Gets the countdown trigger.
countdown.$trigger;

.uid Number

A unique id to identify the instance of a widget.

.Widget#name String

The name of a widget.

// You can reach the instance associated.
var widget = $(selector).data(name);

Methods

.constructor()



    

Returns a reference to the constructor function.

.destroy()



    

Destroys a Countdown instance.

// Destroying an instance of Countdown.
countdown.destroy();

.emit(event, var_args)



    

Execute each item in the listener collection in order with the specified data.

  • event - String : The name of the event you want to emit.
  • var_args - Object : Data to pass to the listeners.
// Will emit the 'ready' event with 'param1' and 'param2' as arguments.
widget.emit('ready', 'param1', 'param2');

.getListeners(event) → {Array}



    

Returns all listeners from the collection for a specified event.

  • event - String : The event name.
// Returns listeners from 'ready' event.
widget.getListeners('ready');

.off(event, listener) → {Object}



    

Removes a listener from the collection for a specified event.

  • event - String : Event name.
  • listener - Function : Listener function.
// Will remove event listener to 'ready' event.
widget.off('ready', listener);

.on(event, listener, once)



    

Adds a listener to the collection for a specified event.

  • event - String : The event name to subscribe.
  • listener - Function : Listener function.
  • once - Boolean : Indicate if a listener function will be called only one time.
// Will add an event listener to 'ready' event.
widget.on('ready', listener);

.once(event, listener) → {Object}



    

Adds a listener to the collection for a specified event to will execute only once.

  • event - String : Event name.
  • listener - Function : Listener function.
// Will add an event handler to 'contentLoad' event once.
widget.once('contentLoad', listener);

.constructor()



    

Returns a reference to the constructor function.

.destroy()



    

Destroys an instance of Widget and remove its data from asociated element.

// Destroying an instance of Widget.
widget.destroy();

.disable() → {instance}



    

Disables an instance of Widget.

// Disabling an instance of Widget.
widget.disable();

.enable() → {instance}



    

Enables an instance of Widget.

// Enabling an instance of Widget.
widget.enable();

.require() → {instance}



    

Adds functionality or abilities from other classes.

// You can require some abilitiest to use in your widget.
// For example you should require the collpasible abitliy.
var widget = new Widget(element, options);
widget.require('Collapsible');

Events

'destroy'



    

Emits when a widget is destroyed.

// Subscribe to "destroy" event.
widget.on('destroy', function () {
 // Some code here!
});

'disable'



    

Emits when a widget is disable.

// Subscribe to "disable" event.
widget.on('disable', function () {
 // Some code here!
});

'enable'



    

Emits when a widget is enable.

// Subscribe to "enable" event.
widget.on('enable', function () {
 // Some code here!
});

'exceed'



    

Event emitted when the lenght of characters is exceeded.

// Subscribe to "exceed" event.
countdown.on('exceed', function () {
 // Some code here!
});

'ready'



    

Event emitted when the widget is ready to use.

// Subscribe to "ready" event.
countdown.on('ready', function () {
    // Some code here!
});