ejmTab

5 Jun 202324 minutes to read

The Essential JavaScript Mobile Tab widget is an interface where lists of tab contents switched between them while selection occurred on a tab item. Tabs are loaded through AJAX content.

Custom Design for HTML Tab control.

$(element).ejmTab()

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container" });
        });
    </script>

Requires

module:jQuery
module:ej.core
module:ej.unobtrusive
module:ej.mobile.core
module:ej.data
module:ej.touch

Members

ajaxSettings

Specifies for AJAX functionalities while loading contents through AJAX requests.

NOTE

Set proper paths for [href] property to show contents properly

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enableajax="true" data-ej-ajaxsettings-type="GET" data-ej-ajaxsettings-cache="false" data-ej-ajaxsettings-async="true" data-ej-ajaxsettings-datatype="html" data-ej-ajaxsettings-contenttype="html">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text3.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text3.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ 
                contentId: "tabdefault-container",
                enableAjax: true,
                ajaxSettings: {
                    type: 'GET',
                    cache: false,
                    async: true,
                    dataType: "html",
                    contentType: "html",
                    url: "",
                    data: {}
                }
            });
        });
    </script>

Text1.html:

HTML

<div id="default1">
        Movies content here
    </div>

Text2.html:

HTML

<div id="default2">
        Music content here
    </div>

Text3.html:

HTML

<div id="default2">
        Favourites content here
    </div>

ajaxSettings.async `boolean`

It specifies, whether to enable or disable asynchronous request.

Default Value

true

ajaxSettings.cache `boolean`

It specifies the page will be cached in the web browser.

Default Value

false

ajaxSettings.contentType `string`

It specifies the type of data is send in the query string.

Default Value

“html”

ajaxSettings.data `object`

It specifies the data as an object, will be passed in the query string.

Default Value

{}

ajaxSettings.dataType `string`

It specifies the type of data that you’re expecting back from the response.

Default Value

“html”

ajaxSettings.type `string`

It specifies the HTTP request type.

Default Value

“get”

ajaxSettings.url `string`

Specifies the URL to which the request is sent.

Default Value

””

allowSwiping `boolean`

Specifies whether to enable swiping feature or not. This helps you to change tab by swiping the contents.

Default value

true

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-allowswiping="false">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", allowSwiping: false });
        });
    </script>

badge

Section for badge specific functionalities.

badge.maxValue `number`

Specifies the maximum value allowed for a badge.

Default value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-badge-maxvalue="88">
        <li data-ej-href="#default1" data-ej-badge-value='90' data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-badge-value='73' data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-href="#default1" data-ej-badge-value='90' data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-badge-value='73' data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", badge: { maxValue: 88 } });
        });
    </script>

contentId `string`

Specifies the id of the tab content container. Selected tab item’s contents will be visible inside this element.

Default value

false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container" });
        });
    </script>

cssClass `string`

Sets the root class for Tab theme. This cssClass API helps to use custom skinning option for Tab 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 -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-cssclass="customclass">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <style>
        .customclass .e-m-tab-item {
            color: red !important;
        }
    </style>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", cssClass: "customclass" });
        });
    </script>

    <style>
        .customclass .e-m-tab-item {
            color: red !important;
        }
    </style>

enableAjax `boolean`

Specifies whether AJAX content will be used to load the tab contents.

Default value

false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enableajax="true">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text3.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text3.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enableAjax: true });
        });
    </script>

Text1.html:

HTML

<div id="default1">
        Movies content here
    </div>

Text2.html:

HTML

<div id="default2">
        Music content here
    </div>

Text3.html:

HTML

<div id="default2">
        Favourites content here
    </div>

enableCache `boolean`

Specifies whether to enable Caching or not. If you are not enabling cache, each tab item change loads the contents after AJAX request. Otherwise tab contents loaded form browser cache.

NOTE

Enable cache behavior works only for AJAX contents. This property is a dependent property of [enableAjax]. So [enabeAjax] must to be set as true.

Default value

false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enableajax="true" data-ej-enablecache="true">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text3.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text3.html"></li>    
    </ul>

    <div id="tabdefault-container">
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enableAjax: true, enableCache: true });
        });
    </script>

Text1.html:

HTML

<div id="default1">
        Movies content here
    </div>

Text2.html:

HTML

<div id="default2">
        Music content here
    </div>

Text3.html:

HTML

<div id="default2">
        Favourites content here
    </div>

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 -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enablepersistence="true" >
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enablePersistence: true });
        });
    </script>

enableRippleEffect `boolean`

Specifies whether to enable or disable ripple effect.

Default value

false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enablerippleeffect="true" >
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enableRippleEffect: true });
        });
    </script>

items `jsonarry`

Specifies the tab items as an array of JSONobjects.

Default value

[]

Example

HTML

<!-- Unobtrusive way of rendering -->
    <script>
        window.items = [{ href: '#default1', text: 'Movies', icon: 'film' }, { href: '#default2', text: 'Music', icon: 'musicicon'  }, { href: '#default3', text: 'Favourites', icon: 'favourite' }]
    </script>

    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-items="window.items"></ul>
    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        </ul>
        <div id="tabdefault-container">
        </div>

        <div id="default1">
            Movies content here
        </div>
        <div id="default2">
            Music content here
        </div>
        <div id="default3">
            Favourites content here
        </div>

        <script>
            $(function () {
                $("#tab").ejmTab({ contentId: "tabdefault-container", items: [{ href: '#default1', text: 'Movies', icon: 'film' }, { href: '#default2', text: 'Music', icon: 'musicicon'  }, { href: '#default3', text: 'Favourites', icon: 'favourite' }] });
            });
        </script>

itemStyle `enum`

Specifies how the tab items will be visible in the screen. See TabItemStyle

Default value

“bothblock”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-itemstyle="image">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", itemStyle: "image" });
        });
    </script>

position `enum`

Specifies the position of tab bar. i.e. top or bottom.

Default value

“bottom”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-position="top">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", position: "top" });
        });
    </script>

prefetchAjaxContent `boolean`

Specifies whether need to pre fetch the AJAX content or not. If this set as true, all tab contents will be loaded initially. No further AJAX request will be initiated.

Default value

false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enableajax="true" data-ej-prefetchajaxcontent="true">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text3.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text3.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enableAjax: true, prefetchAjaxContent: true });
        });
    </script>

Text1.html:

HTML

<div id="default1">
        Movies content here
    </div>

Text2.html:

HTML

<div id="default2">
        Music content here
    </div>

Text3.html:

HTML

<div id="default2">
        Favourites content here
    </div>

renderMode `enum`

Changes the rendering mode. See RenderMode

Default value

auto

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-rendermode="android">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", renderMode: "android"  });
        });
    </script>

selectedItemIndex `number`

Specifies which item will be selected initially.

Default value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-selecteditemindex="1">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", selectedItemIndex: 1 });
        });
    </script>

showAjaxPopup `boolean`

Specifies whether show waiting popup in AJAX content loading or not.

Default value

true

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enableajax="true" data-ej-showajaxpopup="true">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text3.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text3.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enableAjax: true, showAjaxPopup: true });
        });
    </script>

Text1.html:

HTML

<div id="default1">
        Movies content here
    </div>

Text2.html:

HTML

<div id="default2">
        Music content here
    </div>

Text3.html:

HTML

<div id="default2">
        Favourites content here
    </div>

Methods

addItem()

To add a tab item

Example

HTML

<ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
        <input data-role="ejmbutton" type="button" data-ej-text="Add item at index 2" data-ej-touchend="add" />
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>
    <div id="default4">
        Playlist content here
    </div>

    <script>
        function add() {
            $("#tab").ejmTab("addItem", "<li data-ej-text='Playlist' data-ej-icon='playmusic' data-ej-href='#default4'></li>", 2);
        }
    </script>

disableContent()

To disable any tab item content by its index

Example

HTML

<ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
        <input data-role="ejmbutton" type="button" data-ej-text="Disable content of item at index 2" data-ej-touchend="disable" />
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        function disable() {
            $("#tab").ejmTab("disableContent", 2);
        }
    </script>

disableItem()

To disable any tab item by its index

Example

HTML

<ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
        <input data-role="ejmbutton" type="button" data-ej-text="Disable item at index 2" data-ej-touchend="disable" />
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        function disable() {
            $("#tab").ejmTab("disableItem", 2);
        }
    </script>

enableContent()

To enable any tab item content which is already disabled by disableContent()

Example

HTML

<ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
        <input data-role="ejmbutton" type="button" data-ej-text="Disable content of item at index 2" data-ej-touchend="disable" />
        <input data-role="ejmbutton" type="button" data-ej-text="Enable content of item at index 2" data-ej-touchend="enable" />
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        function disable() {
            $("#tab").ejmTab("disableContent", 2);
        }
        function enable() {
            $("#tab").ejmTab("enableContent", 2);
        }
    </script>

enableItem()

To enable the tab item which is already disabled by disableItem()

Example

HTML

<ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
        <input data-role="ejmbutton" type="button" data-ej-text="Disable item at index 2" data-ej-touchend="disable" />
        <input data-role="ejmbutton" type="button" data-ej-text="Enable item at index 2" data-ej-touchend="enable" />
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        function disable() {
            $("#tab").ejmTab("disableItem", 2);
        }
        function enable() {
            $("#tab").ejmTab("enableItem", 2);
        }
    </script>

getActiveItem()

Get the current active item as html element

Example

HTML

<ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
        <input data-role="ejmbutton" type="button" data-ej-text="Get active item" data-ej-touchend="get" />
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        function get() {
            var item = $("#tab").ejmTab("getActiveItem");
            alert("Active item's id is: " + item[0].id);
        }
    </script>

getActiveItemText()

Get the current active item’s text

Example

HTML

<ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
        <input data-role="ejmbutton" type="button" data-ej-text="Get active item text" data-ej-touchend="get" />
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        function get() {
            var itemtext = $("#tab").ejmTab("getActiveItemText");
            alert("Active item's text is: " + itemtext);
        }
    </script>

getItemsCount()

To return the tab item count

Example

HTML

<ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
        <input data-role="ejmbutton" type="button" data-ej-text="Get items count" data-ej-touchend="get" />
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        function get() {
            var itemtext = $("#tab").ejmTab("getItemsCount");
            alert("Total items exists: " + itemtext);            
        }
    </script>

hideBadge()

To hide a badge

Example

HTML

<ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-badge-value='90' data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-badge-value='73' data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
        <input data-role="ejmbutton" type="button" data-ej-text="Hide badge of item at index 1" data-ej-touchend="hide" />
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        function hide() {
            $("#tab").ejmTab("hideBadge", 1);
        }
    </script>

removeItem()

To remove a tab item by its index

Example

HTML

<ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
        <input data-role="ejmbutton" type="button" data-ej-text="Remove item at index 2" data-ej-touchend="remove" />
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        function remove() {
            $("#tab").ejmTab("removeItem", 2);
        }
    </script>

setActiveItem()

To make the tab item to be active

Example

HTML

<ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
        <input data-role="ejmbutton" type="button" data-ej-text="Set item at index 2 as active" data-ej-touchend="set" />
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        function set() {
            $("#tab").ejmTab("setActiveItem", 2);
        }
    </script>

setBadgeValue()

To update or set badge value for an item

Example

HTML

<ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-badge-value='90' data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-badge-value='73' data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
        <input data-role="ejmbutton" type="button" data-ej-text="Update badgevalue to 32 for item at index 1" data-ej-touchend="set" />
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        function set() {
            $("#tab").ejmTab("setBadgeValue", 1, 32);
        }
    </script>

setContent()

to set the content for any tab item

Example

HTML

<ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
        <input data-role="ejmbutton" type="button" data-ej-text="Set content for item at index 2" data-ej-touchend="set" />
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        function set() {
            var item = $("#tab").ejmTab("setContent", "#default3");
        }
    </script>

showBadge()

To show the tab item’s badge.

Example

HTML

<ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container">
        <li data-ej-href="#default1" data-ej-badge-value='90' data-ej-icon="film" data-ej-text='Movies'>
        </li>
        <li data-ej-href="#default2" data-ej-badge-value='73' data-ej-icon="musicicon" data-ej-text='Music'>
        </li>
        <li data-ej-href="#default3" data-ej-icon="favourite" data-ej-text='Favourites'>
        </li>
    </ul>

    <div id="tabdefault-container">
        <input data-role="ejmbutton" type="button" data-ej-text="Hide badge of item at index 1" data-ej-touchend="hide" />
        <input data-role="ejmbutton" type="button" data-ej-text="Show badge of item at index 1" data-ej-touchend="show" />
    </div>

    <div id="default1">
        Movies content here
    </div>
    <div id="default2">
        Music content here
    </div>
    <div id="default3">
        Favourites content here
    </div>

    <script>
        function hide() {
            $("#tab").ejmTab("hideBadge", 1);
        }
        function show() {
            $("#tab").ejmTab("showBadge", 1);
        }
    </script>

Events

ajaxBeforeLoad

Event triggers before the AJAX contents load.

Name

Type

Description

argument

Object

Event parameters from tab

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
model	string	Returns the tab model
type	string	Returns the name of the event
index	int	Returns the current selected item index
text	string	Returns the selected tab item’s text
url	string	Returns the active item URL
item	object	Returns the current active item

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enableajax="true" data-ej-ajaxbeforeload="load">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

<script>
    function load(args) {
        //handle the event
    }
</script>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enableAjax: true, ajaxBeforeLoad: "load" });
        });
        function load(args) {
            //handle the event
        }
    </script>

ajaxComplete

Triggers when the AJAX requests complete. The request may get failed or succeed.

Name

Type

Description

argument

Object

Event parameters from tab

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
model	string	Returns the tab model
type	string	Returns the name of the event
index	int	Returns the current selected item index
text	string	Returns the selected tab item’s text
url	string	Returns the active item URL
item	object	Returns the current active item

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enableajax="true" data-ej-ajaxcomplete="complete">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

<script>
    function complete(args) {
        //handle the event
    }
</script>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enableAjax: true, ajaxComplete: "complete" });
        });
        function complete(args) {
            //handle the event
        }
    </script>

ajaxError

Event triggers when the AJAX request failed.

Name

Type

Description

argument

Object

Event parameters from tab

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
model	string	Returns the tab model
type	string	Returns the name of the event
index	int	Returns the current selected item index
text	string	Returns the tab item’s text
url	string	Returns the active item URL
item	object	Returns the current active item
textStatus	string	Returns the status of the AJAX loading.(like error)
errorThrown	string	return the type of error when loading the AJAX

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enableajax="true" data-ej-ajaxerror="error">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

<script>
    function error(args) {
        //handle the event
    }
</script>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enableAjax: true, ajaxError: "error" });
        });
        function error(args) {
            //handle the event
        }
    </script>

ajaxSuccess

Event triggers after the AJAX content loaded successfully.

Name

Type

Description

argument

Object

Event parameters from tab

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
model	string	Returns the tab model
type	string	Returns the name of the event
index	int	Returns the current selected item index
text	string	Returns the selected tab item’s text
url	string	Returns the active item URL
item	object	Returns the current active item

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enableajax="true" data-ej-ajaxsuccess="success">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

<script>
    function success(args) {
        //handle the event
    }
</script>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enableAjax: true, ajaxSuccess: "success" });
        });
        function success(args) {
            //handle the event
        }
    </script>

load

Event triggers when the load happens in the Tab

Name	Type	Description
argument.cancel	boolean	Returns the cancel option value
argument.model	object	Returns the Tab model
argument.type	string	Returns the name of the event

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enableajax="true" data-ej-load="load">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

<script>
    function load(args) {
        //handle the event
    }
</script>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enableAjax: true, load: "load" });
        });
        function load(args) {
            //handle the event
        }
    </script>

loadComplete

Event triggers when the loadComplete happens in the Tab

Name	Type	Description
argument.cancel	boolean	Returns the cancel option value
argument.model	object	Returns the Tab model
argument.type	string	Returns the name of the event

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enableajax="true" data-ej-loadcomplete="loadcomplete">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

<script>
    function loadcomplete(args) {
        //handle the event
    }
</script>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enableAjax: true, loadComplete: "loadcomplete" });
        });
        function loadcomplete(args) {
            //handle the event
        }
    </script>

select

Event triggers when a tab item selected

Name	Type	Description
argument.cancel	boolean	Returns the cancel option value
argument.model	object	Returns the Tab model
argument.type	string	Returns the name of the event
argument.item	object	Returns the selected Tab element
argument.index	int	Returns the current selected item index
argument.text	string	Returns the selected tab item’s text
argument.id	string	Returns the name of the id

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enableajax="true" data-ej-select="select">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

<script>
    function select(args) {
        //handle the event
    }
</script>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enableAjax: true, select: "select" });
        });
        function select(args) {
            //handle the event
        }
    </script>

touchEnd

Event triggers when the touchEnd happens in the Tab

Name	Type	Description
argument.cancel	boolean	If the event should be canceled; otherwise, false.
argument.model	object	Returns the Tab model
argument.type	string	Returns the name of the event
argument.item	object	Returns the selected Tab element
argument.index	int	Returns the current selected item index
argument.text	string	Returns the selected tab item’s text
argument.id	string	Returns the name of the id

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enableajax="true" data-ej-touchend="touchend">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

<script>
    function touchend(args) {
        //handle the event
    }
</script>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enableAjax: true, touchEnd: "touchend" });
        });
        function touchend(args) {
            //handle the event
        }
    </script>

touchStart

Event triggers when the touchStart happens in the Tab

Name	Type	Description
argument.cancel	boolean	If the event should be canceled; otherwise, false.
argument.model	object	Returns the Tab model
argument.type	string	Returns the name of the event
argument.item	object	Returns the selected Tab element
argument.index	int	Returns the current selected item index
argument.text	string	Returns the selected tab item’s text
argument.id	string	Returns the name of the id

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="tab" data-role="ejmtab" data-ej-contentid="tabdefault-container" data-ej-enableajax="true" data-ej-touchstart="touchstart">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

<script>
    function touchstart(args) {
        //handle the event
    }
</script>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="tab">
        <li data-ej-text="Movies" data-ej-icon="film" data-ej-href="text1.html"></li>
        <li data-ej-text="Music" data-ej-icon="musicicon" data-ej-href="text2.html"></li>
        <li data-ej-text="Favourites" data-ej-icon="favourite" data-ej-href="text4.html"></li>
    </ul>

    <div id="tabdefault-container">
    </div>

    <script>
        $(function () {
            $("#tab").ejmTab({ contentId: "tabdefault-container", enableAjax: true, touchStart: "touchstart" });
        });
        function touchstart(args) {
            //handle the event
        }
    </script>

ejmTab

Example

Requires

Members

ajaxSettings

Example

ajaxSettings.async boolean

Default Value

ajaxSettings.cache boolean

Default Value

ajaxSettings.contentType string

Default Value

ajaxSettings.data object

Default Value

ajaxSettings.dataType string

Default Value

ajaxSettings.type string

Default Value

ajaxSettings.url string

Default Value

allowSwiping boolean

Default value

Example

badge

badge.maxValue number

Default value

Example

contentId string

Default value

Example

cssClass string

Default value

Example

enableAjax boolean

Default value

Example

enableCache boolean

Default value

Example

enablePersistence boolean

Default value

Example

enableRippleEffect boolean

Default value

Example

items jsonarry

Default value

Example

itemStyle enum

Default value

Example

position enum

Default value

Example

prefetchAjaxContent boolean

Default value

Example

renderMode enum

Default value

Example

selectedItemIndex number

Default value

Example

showAjaxPopup boolean

Default value

Example

Methods

addItem()

Example

disableContent()

Example

disableItem()

Example

enableContent()

Example

enableItem()

Example

getActiveItem()

Example

getActiveItemText()

ajaxSettings.async `boolean`

ajaxSettings.cache `boolean`

ajaxSettings.contentType `string`

ajaxSettings.data `object`

ajaxSettings.dataType `string`

ajaxSettings.type `string`

ajaxSettings.url `string`

allowSwiping `boolean`

badge.maxValue `number`

contentId `string`

cssClass `string`

enableAjax `boolean`

enableCache `boolean`

enablePersistence `boolean`

enableRippleEffect `boolean`

items `jsonarry`

itemStyle `enum`

position `enum`

prefetchAjaxContent `boolean`

renderMode `enum`

selectedItemIndex `number`

showAjaxPopup `boolean`