ejmTab

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

    • 100

    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

    • 0

    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>