ejmTile

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>