jQuery-ICE

Initialize Callable Events

Project maintained by EyeCode

Goal

Provide a simple and robust method to listen and react to events on DOM regardless of whether it is static or dynamic

So, set your template and let jquery-ICE call methods from raised events

Prerequisite:

Install

You can dowmload it from here or install via bower with the following package:

"jquery-ice": "~2.0.0"

How To Use

1) Include jquery-ice.js in the page (or use the minified version) with there dependency (jquery and jquery-class)

2) Now play with the dom:

Example 1:

Default event - Some html tag have already default event attached to it. So only data-ice="callable" is necessary
ex: 

<a data-ice="alert" data-ice-params="Hello World!">
    Click Here
</a>

Exemple:
Click Here

Example 2:

Register event - You can register multiple events on the fly and attach a callable.
(data-ice-[any-event]="callable")

<a
 data-ice="alert" // default click event
 data-ice-mousedown="log.mouseDown"
 data-ice-mouseup="log.mouseUp"
 data-ice-params="Hello World!"
>
    Click Here
</a>

Exemple: (Take a look your javascript console)
Click Here

Syntax

<html data-ice[-event]="[callable]" [data-ice-params=""] [data-ice-callback=""]>

html
Type: String
Any html tag is able to run this (a, div, button, etc...)

data-ice[-event]="callable"
Type: String
[-event] : can be replaced with any known event such as dblclick, mousedown, keypress or any custom event (ex: raised.custom.event become data-ice-raised-custom-event) that can be triggered
callable : any reachable namespace/method, the callable will receive 3 arguments:

  • params : Params setted in data-ice-params
  • element : The element that raised the event
  • event : The raised event

data-ice-params
Type: Mixed
String, Integer, Array or Object can be contained here as param to the called method, but becareful to write well defined object if used.

data-ice-callback
Type: String
Allow callback to a method, you just have to call ice.callback(input, params) to raise the callback in method called previously. Useful to react after ajax call