ejTile
11 Jul 201824 minutes to read
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
$(element).ejTile()
Example
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
$("#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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
// 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>
<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
<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
|
Example
// 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
|
Example
// 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>