ejmTile

5 Jun 202324 minutes to read

The Essential JavaScript Mobile Tile widget is a simple, opaque display of colored rectangles or squares that are arranged on the start screen in a grid-like pattern and it can be either static or live.

Custom Design for HTML Tile control.

$(element).ejmTile()

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png">
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({ imageUrl: "themes/sample/tile/people.png" });
    </script>

Requires

• module:jQuery

• module:ej.mobile.application

• module:ej.core

• module:ej.unobtrusive

• module:ej.mobile.core

• module:ej.data

• module:ej.touch

• module:ej.tilebase

Members

allowSelection Boolean

Specifies to allow the selection checkmark for Tile.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-backgroundcolor="blue" data-ej-allowselection="true">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            allowSelection: true,
            backgroundColor: "blue"
        });
    </script>

backgroundColor String

Changes the background color of Tile.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-backgroundcolor="red">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            backgroundColor: "red"
        });
    </script>

badge Object

Section for badge specific functionalities.

badge.enabled Boolean

Specifies whether to enable badge or not.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-backgroundcolor="blue" data-ej-badge-enabled="true">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            badge: { enabled: true },
            backgroundColor: "blue"
        });
    </script>

badge.maxValue Number

Specifies maximum value for tile badge.

Default Value:

• 100

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-backgroundcolor="blue" data-ej-badge-enabled="true" data-ej-badge-value="5" data-ej-badge-maxvalue="3">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            badge: { enabled: true, value: 5, maxValue: 3 },
            backgroundColor: "blue"
        });
    </script>

badge.minValue Number

Specifies minimum value for tile badge.

Default Value:

• 1

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-badge-enabled="true" data-ej-badge-value="3" data-ej-badge-minvalue="5" data-ej-backgroundcolor="red">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            badge: { enabled: true, value: 3, minValue: 5 },
            backgroundColor: "red"
        });
    </script>

badge.position Enum

Sets the tile badge position.

Default Value:

• “bottomright”

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-badge-position="topright" data-ej-badge-enabled="true" data-ej-badge-value="5" data-ej-backgroundcolor="blue">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            badge: { enabled: true, value: 5, position: "topright" },
            backgroundColor: "red"
        });
    </script>

badge.text String

Specifies text instead of number for tile badge.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-badge-enabled="true" data-ej-badge-text="ten" data-ej-backgroundcolor="red">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            badge: { enabled: true, text: "ten" },
            backgroundColor: "red"
        });
    </script>

badge.value Number

Sets value for tile badge.

Default Value:

• 1

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-badge-enabled="true" data-ej-badge-value="5" data-ej-backgroundcolor="blue">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            badge: { enabled: true, value: 5 },
            backgroundColor: "blue"
        });
    </script>

caption Object

Section for live tile specific functionalities.

caption.alignment String

Specifies the caption alignment. See CaptionAlignment

Default Value:

• “normal”

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-caption-alignment="left" data-ej-imageurl="themes/sample/tile/people.png" data-ej-backgroundcolor="blue" data-ej-tilesize="medium">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            backgroundColor: "blue",
            tileSize: "medium",
            caption: {
                alignment: "left"
            }
        });
    </script>

caption.enabled Boolean

Specifies whether to enable caption or not.

Default Value:

• true

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-caption-enabled="false" data-ej-imageurl="themes/sample/tile/people.png" data-ej-backgroundcolor="blue" data-ej-tilesize="medium">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            backgroundColor: "blue",
            tileSize: "medium",
            caption: {
                enabled: false
            }
        });
    </script>

caption.icon String

Specifies the caption icon.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-caption-icon="settings" data-ej-imageurl="themes/sample/tile/people.png" data-ej-backgroundcolor="blue" data-ej-tilesize="medium">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            backgroundColor: "blue",
            tileSize: "medium",
            caption: {
                icon: "settings"
            }
        });
    </script>

caption.position Enum

Specifies the caption position. See CaptionPosition

Default Value:

• “innerbottom”

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-caption-position="outer" data-ej-imageurl="themes/sample/tile/people.png" data-ej-backgroundcolor="blue" data-ej-tilesize="medium">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            backgroundColor: "blue",
            tileSize: "medium",
            caption: {
                position: "outer"
            }
        });
    </script>

caption.text String

Specifies whether to enable caption or not.

Default Value:

• “text”

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-caption-text="People" data-ej-imageurl="themes/sample/tile/people.png" data-ej-backgroundcolor="blue" data-ej-tilesize="medium">
    </div>

HTML

<!-- Obtrusive way of rendering -->
  <div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            backgroundColor: "blue",
            tileSize: "medium",
            caption: {
                text: "People"
            }
        });
    </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

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-cssclass="customclass">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            cssClass: "customclass",
        });
    </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

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-enablepersistence="true">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            enablePersistence: true
        });
    </script>

height Number

Customize the tile size height.

Default Value:

• “null”

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-height=300 data-ej-width=300 data-ej-backgroundcolor="blue">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({ imageUrl: "themes/sample/tile/people.png", width: 300, height: 300, backgroundColor: "blue" });
    </script>

imageClass String

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

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageclass="sample">
    </div>
    <style>
        .sample {
            background-image: url("themes/sample/tile/people.png");
        }
    </style>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({ imageClass: "sample" });
    </script>
    <style>
        .sample {
            background-image: url("themes/sample/tile/people.png");
        }
    </style>

imagePath String

Specifies the file path of tile image.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imagepath="themes/sample/tile" data-ej-imageurl="people.png">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imagePath: "themes/sample/tile",
            imageUrl: "people.png"
        });
    </script>

imagePosition Enum

Specifies the position of tile image.

Default Value:

• “center”

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-imageposition="right" data-ej-backgroundcolor="red">
    </div>

HTML

<!-- Obtrusive way of rendering -->
  <div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            imagePosition: "right",
            backgroundColor: "red"
        });
    </script>

imageTemplateId String

Specifies the tile image in outside template content.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imagetemplateid="sample">
    </div>
    <div id="sample" style="background-image: url('themes/sample/tile/ios7/people.png');height:100%;width:100%;">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <div id="sample" style="background-image: url('themes/sample/tile/ios7/people.png');height:100%;width:100%;">
    </div>
    <script>
        // Create Tile control
        $(function () {
            $("#tile").ejmTile({ imageTemplateId: "sample" });
        });
    </script>

imageUrl String

Specifies the file name of tile image.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({ imageUrl: "themes/sample/tile/people.png" });
    </script>

liveTile Object

Section for live tile specific functionalities.

liveTile.enabled Boolean

Specifies whether to enable live tile or not.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-rendermode="windows" data-ej-imagepath="themes/sample/tile" data-ej-livetile-imageurl="['people.png','sports.png']" data-ej-livetile-enabled="true" data-ej-backgroundcolor="blue">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            renderMode: "windows",
            liveTile: {
                enabled: true,
                imageUrl: ['people.png', 'sports.png']
            },
            imagePath: "themes/sample/tile",
            backgroundColor: "blue"
        });
    </script>

liveTile.imageClass String

Specifies the live tile images in CSS classes.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-rendermode="windows" data-ej-livetile-imageclass="['img1','img2']" data-ej-livetile-enabled="true" data-ej-backgroundcolor="blue">
    </div>
    <style>
        .img1 {
            background-image: url("themes/sample/tile/windows/people.png");
        }

        .img2 {
            background-image: url("themes/sample/tile/windows/sports.png");
        }
    </style>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            renderMode: "windows",
            liveTile: {
                enabled: true,
                imageClass: ['img1', 'img2']
            },
            backgroundColor: "blue"
        });
    </script>
    <style>
        .img1 {
            background-image: url("themes/sample/tile/windows/people.png");
        }

        .img2 {
            background-image: url("themes/sample/tile/windows/sports.png");
        }
    </style>

liveTile.imageTemplateId String

Specifies live Tile images in templates.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
  <div id="tile" data-role="ejmtile" data-ej-rendermode="windows" data-ej-livetile-imagetemplateid="['img1','img2','img3']" data-ej-livetile-enabled="true" data-ej-backgroundcolor="blue">
    </div>
    <div id="img1" style="background-image: url('themes/sample/tile/windows/people.png');height:100%;width:100%;">
    </div>
    <div id="img2" style="background-image: url('themes/sample/tile/windows/sports.png');height:100%;width:100%;">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <div id="img1" style="background-image: url('themes/sample/tile/windows/people.png');height:100%;width:100%;">
    </div>
    <div id="img2" style="background-image: url('themes/sample/tile/windows/sports.png');height:100%;width:100%;">
    </div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            renderMode: "windows",
            liveTile: {
                enabled: true,
                imageTemplateId: ['img1', 'img2']
            },
            backgroundColor: "blue"
        });
    </script>

liveTile.imageUrl String

Specifies the live tile image URL.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-rendermode="windows" data-ej-imagepath="themes/sample/tile" data-ej-livetile-imageurl="['people.png','sports.png']" data-ej-livetile-enabled="true" data-ej-backgroundcolor="blue">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            renderMode: "windows",
            liveTile: {
                enabled: true,
                imageUrl: ['people.png', 'sports.png']
            },
            imagePath: "themes/sample/tile",
            backgroundColor: "blue"
        });
    </script>

liveTile.text String

Specifies whether the live tile text.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-livetile-text=['People','Sports'] data-ej-rendermode="windows" data-ej-imagepath="themes/sample/tile" data-ej-livetile-imageurl="['people.png','sports.png']" data-ej-livetile-enabled="true" data-ej-backgroundcolor="red" data-ej-tilesize="medium">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            renderMode: "windows",
            liveTile: {
                enabled: true,
                imageUrl: ['people.png', 'sports.png'],
                text: ['People', 'Sports']
            },
            imagePath: "themes/sample/tile",
            backgroundColor: "red",
            tileSize: "medium"
        });
    </script>

liveTile.type Enum

Specifies the live tile type. See liveTile.type

Default Value:

• “flip”

Example

HTML

<!-- Unobtrusive way of rendering -->
   <div id="tile" data-role="ejmtile" data-ej-rendermode="windows" data-ej-livetile-type="carousel" data-ej-imagepath="themes/sample/tile" data-ej-livetile-imageurl="['people.png','sports.png']" data-ej-livetile-enabled="true" data-ej-backgroundcolor="blue">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            renderMode: "windows",
            liveTile: {
                enabled: true,
                imageUrl: ['people.png', 'sports.png'],
                type: "carousel"
            },
            imagePath: "themes/sample/tile",
            backgroundColor: "blue"
        });
    </script>

liveTile.updateInterval Int

Specifies time interval between two successive live tile animation.

Default Value:

• 2000

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-rendermode="windows" data-ej-livetile-updateinterval="500" data-ej-imagepath="themes/sample/tile" data-ej-livetile-imageurl="['people.png','sports.png']" data-ej-livetile-enabled="true" data-ej-backgroundcolor="blue">
    </div>

HTML

<!-- Obtrusive way of rendering -->
  <div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            renderMode: "windows",
            liveTile: {
                enabled: true,
                imageUrl: ['people.png', 'sports.png'],
                updateInterval: 500
            },
            imagePath: "themes/sample/tile",
            backgroundColor: "blue"
        });
    </script>

renderMode Enum

Changes the rendering mode of Tile. SeeRenderMode

Default Value:

• auto

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-rendermode="android">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            renderMode: "android"
        });
    </script>

showRoundedCorner Boolean

Specifies to show the rounded corner for tile.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-backgroundcolor="blue" data-ej-showroundedcorner="true">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            showRoundedCorner: true,
            backgroundColor: "blue"
        });
    </script>

tileSize Enum

Specifies the size of a tile. i.e small, medium, large or wide.

Default Value:

• “small”

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-tilesize="large" data-ej-backgroundcolor="blue">
    </div>

HTML

<!-- Obtrusive way of rendering -->
   <div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            tileSize: "large",
            backgroundColor: "blue"
        });
    </script>

width Number

Customize the tile size width.

Default Value:

• “null”

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-height=300 data-ej-width=300 data-ej-backgroundcolor="blue">
    </div>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            width: 300,
            height: 300,
            backgroundColor: "blue"
        });
    </script>

Methods

updateTemplate()

Update the image template to another one.

Example

HTML

<div id="tile" data-role="ejmtile" data-ej-imagetemplateid="sample1">
    </div>
    <div id="sample1" style="background-image: url('themes/sample/tile/ios7/people.png');height:100%;width:100%;">
    </div>
    <div id="sample2" style="background-image: url('themes/sample/tile/ios7/sports.png');height:100%;width:100%;">
    </div>
    <script>
        $(function () {
            var value = $("#tile").data("ejmTile");
            value.updateTemplate("sample2");
        });
    </script>

Events

touchEnd

Event triggers when the touchend happens in the tile

Name	Type	Description
argument	Object	Event parameters from tile Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. model boolean Returns the tile model type boolean Returns the name of the event text boolean Returns the current tile text

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-touchend="touchend">
    </div>
    <script>
        // touchEnd event for tile
        function touchend(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            touchEnd: function (args) {
                //handle the event
            }
        });
    </script>

touchStart

Event triggers when the touchstart happens in the tile

Name	Type	Description
argument	Object	Event parameters from tile Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. model boolean Returns the tile model type boolean Returns the name of the event text boolean Returns the current tile text

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="tile" data-role="ejmtile" data-ej-imageurl="themes/sample/tile/people.png" data-ej-touchstart="touchstart">
    </div>
    <script>
        // touchStart event for tile
        function touchstart(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<div id="tile"></div>
    <script>
        // Create Tile control
        $("#tile").ejmTile({
            imageUrl: "themes/sample/tile/people.png",
            touchStart: function (args) {
                //handle the event
            }
        });
    </script>