ejTile

The Web Tiles are simple, opaque rectangles or squares and they are arrayed on the start screen in a grid-like pattern. Tapping or selecting a Tile, launches the app or does some other action that is represented by the Tile. Tiles are arranged in a group separated by columns that looks like a start screen of a device and it can be either static or live.

Syntax

  • javascript
  • $(element).ejTile()

    Example

  • html
  • <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "people.png" }); 
    </script>

    Requires

    • module:jQuery

    • module:ej.core

    • module:ej.unobtrusive

    • module:ej.data

    • module:ej.touch

    • module:ej.tile

    Members

    badge Object

    Section for badge specific functionalities and it represents the notification for tile items.

    badge.enabled boolean

    Specifies whether to enable badge or not.

    Default Value

    • false

    Example

  • html
  • // Set enabled on initialization. 
    // To set enabled API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", badge: { enabled: true } }); 
    </script>
  • html
  • <script>
    //Get or set the enabled, after initialization:
    // Get the enabled API value.
     $("#tile").ejTile("option", "badge.enabled");                  
    // Set the enabled API
    $("#tile").ejTile("option", "badge.enabled", true);  
    </script>

    badge.maxValue number

    Specifies maximum value for tile badge.

    Default Value

    • 100

    Example

  • html
  • // Set maxValue on initialization. 
    // To set maxValue API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", badge: { enabled: true, value:5, maxValue:3 } }); 
    </script>
  • html
  • <script>
    //Get or set the maxValue, after initialization:
    // Get the maxValue API value.
     $("#tile").ejTile("option", "badge.maxValue");                 
    // Set the maxValue API
    $("#tile").ejTile("option", "badge.maxValue", 3);           
    </script>

    badge.minValue number

    Specifies minimum value for tile badge.

    Default Value

    • 1

    Example

  • html
  • // Set minValue on initialization. 
    // To set minValue API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", badge: { enabled: true, value:3, minValue:5 }}); 
    </script>
  • html
  • <script>
    //Get or set the minValue, after initialization:
    // Get the minValue API value.
     $("#tile").ejTile("option", "badge.minValue");                 
    // Set the minValue API
    $("#tile").ejTile("option", "badge.minValue", 5);           
    </script>

    badge.text string

    Specifies text instead of number for tile badge.

    Default Value

    • null

    Example

  • html
  • // Set text on initialization. 
    // To set text API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({imageUrl: "themes/sample/tile/people.png", badge: { enabled: true, text:"ten" } }); 
    </script>
  • html
  • <script>
    //Get or set the badge text, after initialization:
    // Get the badge text API value.
     $("#tile").ejTile("option", "badge.text");                     
    // Set the badge text API
    $("#tile").ejTile("option", "badge.text", "ten"); 
    </script>

    badge.value number

    Sets value for tile badge.

    Default Value

    • 1

    Example

  • html
  • // Set value on initialization. 
    // To set value API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", badge: { enabled: true, value:5 }}); 
    </script>
  • html
  • <script>
    //Get or set the value, after initialization:
    // Get the value API value.
     $("#tile").ejTile("option", "badge.value");                    
    // Set the value API
    $("#tile").ejTile("option", "badge.value", 5); 
    </script>

    badge.position enum

    Sets position for tile badge.

    Name Description
    topright To set the topright position of tile badge
    bottomright To set the bottomright of tile badge

    Default Value

    • “bottomright”

    Example

  • html
  • // Set position on initialization. 
    // To set position API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", badge: { enabled: true, position:"bottomright" }}); 
    </script>
  • html
  • <script>
    //Get or set the position, after initialization:
    // Get the position API value.
     $("#tile").ejTile("option", "badge.position");                    
    // Set the position API
    $("#tile").ejTile("option", "badge.position","bottomright"); </script>

    caption Object

    Section for caption specific functionalities and it represents the notification for tile items.

    caption.enabled boolean

    Specifies whether the tile text to be shown or hidden.

    Default Value

    • true

    Example

  • html
  • // Set enabled on initialization. 
    // To set enabled API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", caption: { enabled: true},tileSize:'medium'}); 
    </script>
  • html
  • <script>
    //Get or set the enabled, after initialization:
    // Get the enabled API value.
     $("#tile").ejTile("option", "caption.enabled");                       
    // Set the enabled API
    $("#tile").ejTile("option", "caption.enabled", false);</script>

    caption.text string

    Changes the text of a tile.

    Default Value

    • “Text”

    Example

  • html
  • // Set text on initialization. 
    // To set text API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", caption:{text:"Settings"},tileSize:'medium'}); 
    </script>
  • html
  • <script>
    //Get or set the text, after initialization:
    // Get the text API value.
     $("#tile").ejTile("option", "caption.text");                   
    // Set the text API
    $("#tile").ejTile("option", "caption.text", "Settings");</script>

    caption.alignment enum

    It is used to align the text of a tile.

    Name Description
    Normal To set the normal alignment of text in tile control
    Left To set the left alignment of text in tile control
    Right To set the right alignment of text in tile control
    Center To set the center alignment of text in tile control

    Default Value

    • “normal”

    Example

  • html
  • // Set alignment on initialization. 
    // To set alignment API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", caption:{alignment:"left"},tileSize:'medium' }); 
    </script>
  • html
  • <script>
    //Get or set the alignment, after initialization:
    // Get the alignment API value.
     $("#tile").ejTile("option", "caption.alignment");                  
    // Set the alignment API
    $("#tile").ejTile("option", "caption.alignment", "left");</script>

    caption.position enum

    It is used to specify the caption position like Inner top, inner bottom and outer.

    Name Description
    Innertop To set the inner top position of the tile text
    Innerbottom To set the inner bottom position of the tile text
    Outer To set the outer position of the tile text

    Default Value

    • “Innerbottom”

    Example

  • html
  • // Set position on initialization. 
    // To set position API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", caption:{position:"innerbottom"},tileSize:'medium' }); 
    </script>
  • html
  • <script>
    //Get or set the position, after initialization:
    // Get the position API value.
     $("#tile").ejTile("option", "caption.position");                  
    // Set the position API
    $("#tile").ejTile("option", "caption.position", "innerbottom");</script>

    caption.icon string

    sets the icon instead of text.

    Default Value

    • null

    Example

  • html
  • // Set icon on initialization. 
    // To set icon API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", caption:{icon:'e-icon-images'},tileSize:'medium'}); 
    </script>
  • html
  • <script>
    //Get or set the icon, after initialization:
    // Get the icon API value.
     $("#tile").ejTile("option", "caption.icon");                      
    // Set the liveTile imageUrl API
    $("#tile").ejTile("option", "caption.icon",);</script>

    cssClass string

    Sets the root class for Tile theme. This cssClass API helps to use custom skinning option for Tile control. By defining the root class using this API, we need to include this root class in CSS.

    Default Value

    • ””

    Example

  • html
  • // Set cssClass on initialization. 
    // To set cssClass API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", cssClass:"custom-class"}); 
    </script>
  • html
  • <script>
    //Get or set the cssClass, after initialization:
    // Get the cssClass API value.
     $("#tile").ejTile("option", "cssClass");                       
    // Set the cssClass API
    $("#tile").ejTile("option", "cssClass", "custom-class");</script>

    enablePersistence boolean

    Saves current model value to browser cookies for state maintains. While refreshing the page retains the model value applies from browser cookies.

    Default Value

    • false

    Example

  • html
  • // Set enablePersistence on initialization. 
    // To set enablePersistence API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", enablePersistence:true}); 
    </script>
  • html
  • <script>
    //Get or set the enablePersistence, after initialization:
    // Get the enablePersistence API value.
     $("#tile").ejTile("option", "enablePersistence");                      
    // Set the enablePersistence API
    $("#tile").ejTile("option", "enablePersistence", true);</script>

    height string number

    Customize the tile size height.

    Default Value

    • null

    Example

  • html
  • // Set height on initialization. 
    // To set height API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", width:300, height:300 }); 
    </script>
  • html
  • <script>
    //Get or set the height, after initialization:
    // Get the height API value.
     $("#tile").ejTile("option", "height");                 
    // Set the width API
    $("#tile").ejTile("option", "height", 300);</script>

    imageClass string

    Specifies Tile imageClass, using this property we can give images for each tile through CSS classes.

    Default Value

    • null

    Example

  • html
  • // Set imageClass on initialization. 
    // To set imageClass API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageClass: "sample"}); 
    </script>
    <style>
    .sample
    {
    background-image:url("themes/sample/tile/people.png");
    }
    </style>
  • html
  • <script>
    //Get or set the imageClass, after initialization:
    // Get the imageClass API value.
     $("#tile").ejTile("option", "imageClass");                     
    // Set the imageClass API
    $("#tile").ejTile("option", "imageClass", "sample"); </script>

    imagePosition enum

    Specifies the position of tile image.

    Name Description
    Center To set the center position of tile image
    TopCenter To set the top center position of tile image
    BottomCenter To set the bottom center position of tile image
    RightCenter To set the right center position of tile image
    LeftCenter To set the left center position of tile image
    TopLeft To set the topleft position of tile image
    TopRight To set the topright position of tile image
    BottomRight To set the bottomright position of tile image
    BottomLeft To set the bottomleft position of tile image
    Fill To set the fill position of tile image

    Default Value

    • “center”

    Example

  • html
  • // Set imagePosition on initialization. 
    // To set imagePosition API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", imagePosition: "rightcenter"}); 
    </script>
  • html
  • <script>
    //Get or set the imagePosition, after initialization:
    // Get the imagePosition API value.
     $("#tile").ejTile("option", "imagePosition");                  
    // Set the imagePosition API
    $("#tile").ejTile("option", "imagePosition", "rightcenter");</script>

    imageTemplateId string

    Specifies the tile image in outside of template content.

    Default Value

    • null

    Example

  • html
  • // Set imageTemplateId on initialization. 
    // To set imageTemplateId API value 
    <div id="tile" ></div>
    <div id="sample" style="background-image: url('themes/sample/tile/people.png');height:100%;width:100%;">
    </div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageTemplateId: "sample" }); 
    </script>
  • html
  • <script>
    //Get or set the imageTemplateId, after initialization:
    // Get the imageTemplateId API value.
     $("#tile").ejTile("option", "imageTemplateId");                        
    // Set the imageTemplateId API
    $("#tile").ejTile("option", "imageTemplateId", "sample");</script>

    imageUrl string

    Specifies the URL of tile image.

    Default Value

    • null

    Example

  • html
  • // Set imageUrl on initialization. 
    // To set imageUrl API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png"}); 
    </script>
  • html
  • <script>
    //Get or set the imageUrl, after initialization:
    // Get the imageUrl API value.
     $("#tile").ejTile("option", "imageUrl");                       
    // Set the imageUrl API
    $("#tile").ejTile("option", "imageUrl", "themes/sample/tile/people.png"); </script>

    locale string

    Set the localization culture for Tile Widget.

    Default Value:

    “en-US”

    Example

  • javascript
  • $("#dialog").ejTile({locale: "es-ES"});

    liveTile Object

    Section for liveTile specific functionalities.

    liveTile.enabled boolean

    Specifies whether to enable liveTile or not.

    Default Value

    • false

    Example

  • html
  • // Set liveTile enabled on initialization. 
    // To set liveTile enabled API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ renderMode:"windows", liveTile: { enabled: true, imageUrl:['themes/sample/tile/people.png','themes/sample/tile/sports.png'] } }); 
    </script>
  • html
  • <script>
    //Get or set the liveTile enabled, after initialization:
    // Get the liveTile enabled API value.
     $("#tile").ejTile("option", "liveTile.enabled");                       
    // Set the liveTile enabled API
    $("#tile").ejTile("option", "liveTile.enabled", true); </script>

    liveTile.imageClass array

    Specifies liveTile images in CSS classes.

    Default Value

    • null

    Example

  • html
  • // Set liveTile imageClass on initialization. 
    // To set liveTile imageClass API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ renderMode:"windows", liveTile: { enabled: true, imageClass: ['img1','img2','img3'] } }); 
    </script>
    <style>
    .img1
    {
    background-image:url("themes/sample/tile/people.png");
    }
    .img2
    {
    background-image:url("themes/sample/tile/sports.png");
    }
    .img3
    {
    background-image:url("themes/sample/tile/people_1.png");
    }
    </style>
  • html
  • <script> 
    //Get or set the liveTile imageClass, after initialization:
    // Get the liveTile imageClass API value.
     $("#tile").ejTile("option", "liveTile.imageClass");                    
    // Set the liveTile imageClass API
    $("#tile").ejTile("option", "liveTile.imageClass", ['img1','img2','img3']);</script>

    liveTile.imageTemplateId array

    Specifies liveTile images in templates.

    Default Value

    • null

    Example

  • html
  • // Set liveTile imageTemplateId on initialization. 
    // To set liveTile imageTemplateId API value 
    <div id="tile" ></div>
    <div id="img1" style="background-image: url('themes/sample/tile/people.png');height:100%;width:100%;">
    </div>
    <div id="img2" style="background-image: url('themes/sample/tile/sports.png');height:100%;width:100%;">
    </div>
    <div id="img3" style="background-image: url('themes/sample/tile/settings.png');height:100%;width:100%;">
    </div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ renderMode:"windows", liveTile: { enabled: true, imageTemplateId: ['img1','img2','img3'] } }); 
    </script>
  • html
  • <script>
    //Get or set the liveTile imageTemplateId, after initialization:
    // Get the liveTile imageTemplateId API value.
     $("#tile").ejTile("option", "liveTile.imageTemplateId");                       
    // Set the liveTile imageTemplateId API
    $("#tile").ejTile("option", "liveTile.imageTemplateId", ['img1','img2','img3']); </script>

    liveTile.imageUrl array

    Specifies liveTile images in CSS classes.

    Default Value

    • null

    Example

  • html
  • // Set liveTile imageUrl on initialization. 
    // To set liveTile imageUrl API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ renderMode: "windows", liveTile: { enabled: true, imageUrl: ['themes/sample/tile/people.png','themes/sample/tile/sports.png','themes/sample/tile/settings.png'] } }); 
    </script>
  • html
  • <script>
    //Get or set the liveTile imageUrl, after initialization:
    // Get the liveTile imageUrl API value.
     $("#tile").ejTile("option", "liveTile.imageUrl");                      
    // Set the liveTile imageUrl API
    $("#tile").ejTile("option", "liveTile.imageUrl", ['themes/sample/tile/people.png','themes/sample/tile/sports.png','themes/sample/tile/settings.png']);</script>

    liveTile.type enum

    Specifies liveTile type for Tile. See orientation

    Name Description
    Flip To set flip type of liveTile for tile control
    Slide To set slide type of liveTile for tile control
    Carousel To set carousel type of liveTile for tile control

    Default Value

    • “flip”

    Example

  • html
  • // Set liveTile type on initialization. 
    // To set liveTile type API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ renderMode: "windows", liveTile: { enabled: true, imageUrl: ['themes/sample/tile/people.png','themes/sample/tile/sports.png','themes/sample/tile/settings.png'], type:"carousel" } }); 
    </script>
  • html
  • <script> 
    //Get or set the liveTile type, after initialization:
    // Get the liveTile type API value.
     $("#tile").ejTile("option", "liveTile.type");                  
    // Set the liveTile type API
    $("#tile").ejTile("option", "liveTile.type", "carousel");</script>

    liveTile.updateInterval number

    Specifies time interval between two successive liveTile animation

    Default Value

    • 2000

    Example

  • html
  • // Set liveTile updateInterval on initialization. 
    // To set liveTile updateInterval API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({renderMode: "windows", liveTile: { enabled: true, imageUrl: ['themes/sample/tile/people.png','themes/sample/tile/sports.png','themes/sample/tile/settings.png'], updateInterval:1000 } }); 
    </script>
  • html
  • <script>
    //Get or set the liveTile updateInterval, after initialization:
    // Get the liveTile updateInterval API value.
     $("#tile").ejTile("option", "liveTile.updateInterval");                        
    // Set the liveTile updateInterval API
    $("#tile").ejTile("option", "liveTile.updateInterval", 1000);</script>

    liveTile.text array

    Sets the text to each living tile

    Default Value

    • Null

    Example

  • html
  • // Set liveTile text on initialization. 
    // To set liveTile text API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({renderMode: "windows", liveTile: { enabled: true, imageUrl: ['themes/sample/tile/people.png','themes/sample/tile/sports.png','themes/sample/tile/settings.png'], text:["text1","text2","text3"] } }); 
    </script>

    tileSize enum

    Specifies the size of a tile. See tileSize

    Name Description
    Medium To set the medium size for tile control
    Small To set the small size for tile control
    Large To set the large size for tile control
    Wide To set the wide size for tile control

    Default Value

    • “small”

    Example

  • html
  • // Set tileSize on initialization. 
    // To set tileSize API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", tileSize:"medium" }); 
    </script>
  • html
  • <script> 
    //Get or set the tileSize, after initialization:
    // Get the tileSize API value.
     $("#tile").ejTile("option", "tileSize");                       
    // Set the tileSize API
    $("#tile").ejTile("option", "tileSize", "medium");</script>

    width string number

    Customize the tile size width.

    Default Value

    • null

    Example

  • html
  • // Set width on initialization. 
    // To set width API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", width:300,height:300 }); 
    </script>
  • html
  • <script> 
    //Get or set the width, after initialization:
    // Get the width API value.
     $("#tile").ejTile("option", "width");                  
    // Set the width API
    $("#tile").ejTile("option", "width", 300);</script>

    showRoundedCorner boolean

    Sets the rounded corner to tile.

    Default Value

    • false

    Example

  • html
  • // Set showRoundedCorner on initialization. 
    // To set showRoundedCorner API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png",showRoundedCorner:true}); 
    </script>
  • html
  • <script>
    //Get or set the showRoundedCorner, after initialization:
    // Get the showRoundedCorner API value.
     $("#tile").ejTile("option", "showRoundedCorner");                       
    // Set the showRoundedCorner API
    $("#tile").ejTile("option", "showRoundedCorner", false);</script>

    allowSelection boolean

    Sets allowSelection to tile.

    Default Value

    • false

    Example

  • html
  • // Set allowSelection on initialization. 
    // To set allowSelection API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png",allowSelection:true}); 
    </script>
  • html
  • <script>
    //Get or set the allowSelection, after initialization:
    // Get the allowSelection API value.
     $("#tile").ejTile("option", "allowSelection");                       
    // Set the allowSelection API
    $("#tile").ejTile("option", "allowSelection", false);</script>

    backgroundColor string

    Sets the background color to tile.

    Default Value

    • null

    Example

  • html
  • // Set backgroundColor on initialization. 
    // To set backgroundColor API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png",backgroundColor:"#ffffff"}); 
    </script>
  • html
  • <script>
    //Get or set the backgroundColor, after initialization:
    // Get the backgroundColor API value.
     $("#tile").ejTile("option", "backgroundColor");                       
    // Set the backgroundColor API
    $("#tile").ejTile("option", "backgroundColor","#ffffff");</script>

    Methods

    updateTemplate(id, index)

    Update the image template of tile item to another one.

    Name Type Description
    id string UpdateTemplate by using id
    index number index of the tile

    Example

  • html
  • <div id="tile" >
    </div> 
    <div id="sample1" style="background-image: url('themes/sample/tile/people.png');height:100%;width:100%;">
    </div>
    <div id="sample2" style="background-image: url('themes/sample/tile/sports.png');height:100%;width:100%;">
    </div>
    <script> 
    $(function () {
    $("#tile").ejTile({ imageTemplateId: "sample1" }); 
    var value = $("#tile").data("ejTile");
    value.updateTemplate("sample2",0);
    });
    </script>

    Events

    mouseDown

    Event triggers when the mouseDown happens in the tile

    Name Type Description
    argument Object Event parameters from tile
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model boolean returns the tile model
    type boolean returns the name of the event
    text string returns the current tile text
    index number returns the index of current tile item

    Example

  • html
  • // Define mouseDown event on initialization. 
    // To set mouseDown event API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "people.png", 
    mouseDown: function (args) { 
    //handle the event 
    }
    }); 
    </script>

    mouseUp

    Event triggers when the mouseUp happens in the tile

    Name Type Description
    argument Object Event parameters from tile
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model boolean returns the tile model
    type boolean returns the name of the event
    text boolean returns the current tile text
    index number returns the index of current tile item

    Example

  • html
  • // Define mouseUp event on initialization. 
    // To set mouseUp event API value 
    <div id="tile" ></div>
    <script> 
    // Create Tile control 
    $("#tile").ejTile({ imageUrl: "people.png", 
    mouseUp: function (args) { 
    //handle the event 
    }
    }); 
    </script>