ejmNavigationBar

The Essential JavaScript Mobile NavigationBar widget is a navigation element positioned at the top or bottom of the page, which consists of header, footer and toolbars. Header and footer consists of left and right buttons for page navigation, and toolbar consists of set of icons to support page actions.

Custom Design for HTML NavigationBar control.

$(element).ejmNavigationBar()

Example

Navigation bar as header

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header">        
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="header">
        </div>
    
        <script>
            $("#header").ejmNavigationBar({ title: "Navigation Header" });
        </script>

    Navigation bar as footer

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="footer" data-role="ejmnavigationbar" data-ej-position="bottom" data-ej-title="Navigation Footer">
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="footer">
        </div>
    
        <script>
            $("#footer").ejmNavigationBar({ position: "bottom", title: "Navigation Footer" });
        </script>

    NOTE

    To get NavigationBar with left button or right buttons, render buttons inside the NavigationBar element as follows.

  • html
  • <div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header with buttons">
            <a data-ej-cssclass="e-m-navbar-left" data-role="ejmbutton" data-ej-style="header" data-ej-showborder="false" data-ej-contenttype="image" data-ej-imageclass="e-m-icon-backward" data-ej-text="Back"></a>
            <a data-ej-cssclass="e-m-navbar-right" data-role="ejmbutton" data-ej-style="header" data-ej-showborder="false" data-ej-contenttype="image" data-ej-imageclass="e-m-icon-next" data-ej-text="Next"></a>
        </div>

    Navigation bar as toolbar

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
    
        <script>
            $("#toolbar").ejmNavigationBar({ mode: "toolbar" });
        </script>

    Requires

    • module:jQuery

    • module:ej.core

    • module:ej.unobtrusive

    • module:ej.mobile.core

    • module:ej.data

    • module:ej.touch

    Members

    android

    Section for android mode specific functionalities.

    NOTE

    Android specific properties works only in android mode. To achieve android specific properties, rendeMode property should be set as “android”.

    android.position enum

    Specifies the position of NavigationBar in android rendering mode. i.e. top or bottom. See NavBarPosition

    Default Value

    • “auto”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header" data-ej-rendermode="android" data-ej-android-position="bottom">        
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="header">
        </div>
    
        <script>
            $("#header").ejmNavigationBar({ title: "Navigation Header", renderMode: "android", android: { position: "bottom" } });
        </script>

    badge

    Section for badge specific properties.

    badge.maxValue number

    Specifies maximum badge value which a navigation toolbar item can accept. If badge value is set a value greater than this maxValue, then the max value will be appeared with a plus sign.

    Default Value

    • 99

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar" data-ej-badge-maxvalue="82">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
    
        <script>
            $("#toolbar").ejmNavigationBar({ mode: "toolbar", badge: { maxValue: 82 } });
        </script>

    cssClass string

    Sets the root class for NavigationBar theme. This cssClass API helps to use custom skinning option for NavigationBar control. By defining the root class using this API, we need to include this root class in CSS.

    Default Value

    • ””

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header" data-ej-cssclass="customclass">        
        </div>
    
        <style>
            .customclass .e-m-navbar-text {
                color: red !important;
            }
        </style>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="header">
        </div>
    
        <script>
            $("#header").ejmNavigationBar({ title: "Navigation Header", cssClass: "customclass" });
        </script>
    
        <style>
            .customclass .e-m-navbar-text {
                color: red !important;
            }
        </style>

    enablePersistence boolean

    Specifies to maintain the current model value to browser cookies for state maintenance. While refresh the page, the model value will get apply to the control from browser cookies.

    Default Value

    • false

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header" data-ej-enablepersistence="true">        
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="header">
        </div>
    
        <script>
            $("#header").ejmNavigationBar({ title: "Navigation Header", enablePersistence: true });
        </script>

    enableRippleEffect boolean

    Specifies whether to enable ripple effect on toolbar item click or not.

    Default Value

    • ej.isAndroid() ? true : false

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar" data-ej-enablerippleeffect="true">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
    
        <script>
            $("#toolbar").ejmNavigationBar({ mode: "toolbar", enableRippleEffect: true });
        </script>

    flat

    Section for flat mode specific functionalities.

    NOTE

    Flat specific properties works only in flat mode. To achieve flat specific properties, renderMode property should be set as “flat”.

    flat.position enum

    Specifies the position of NavigationBar in flat rendering mode. i.e. top or bottom. See NavBarPosition

    Default Value

    • “auto”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header" data-ej-rendermode="flat" data-ej-flat-position="bottom">        
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="header">
        </div>
    
        <script>
            $("#header").ejmNavigationBar({ title: "Navigation Header", renderMode: "flat", flat: { position: "bottom" } });
        </script>

    iconAlignment enum

    It is used to align icons in a specific manner. In split alignment, icons will take 100% of page width and badge of icons will be appeared on right side of icons. In grouped alignment, icons will take some specific with and will render middle of the page, and the badge of icons will be appeared on top right of icons. See NavBarIconAlignment

    NOTE

    This is a toolbar specific property. It works only when the mode property set as “toolbar” and icons of toolbar defined in sample.

    Default Value

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar" data-ej-iconalignment="grouped">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
    
        <script>
            $("#toolbar").ejmNavigationBar({ mode: "toolbar", iconAlignment: "grouped"  });
        </script>

    ios7

    Section for ios7 mode specific functionalities.

    NOTE

    Ios7 specific properties works only in ios7 mode. To achieve ios7 specific properties, rendeMode property should be set as “ios7”.

    ios7.position enum

    Specifies the position of NavigationBar in ios7 rendering mode. i.e. top or bottom. See NavBarPosition

    Default Value

    • “auto”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header" data-ej-rendermode="ios7" data-ej-ios7-position="bottom">        
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="header">
        </div>
    
        <script>
            $("#header").ejmNavigationBar({ title: "Navigation Header", renderMode: "ios7", ios7: { position: "bottom" } });
        </script>

    isRelative boolean

    Specifies whether the NavigationBar render with relative position or not. By default the NavigationBar renders with absolute positioning (on the top of the page or bottom of the page if position “bottom”).

    Default Value

    • false

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <p>Header will render after this element</p>
        </div>
        <div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header" data-ej-isrelative="true">        
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <p>Header will render after this element</p>
        </div>
        <div id="header">
        </div>
    
        <script>
            $("#header").ejmNavigationBar({ isRelative: true, title: "Navigation Header" });
        </script>

    items jsonarray

    Specifies the toolbar items in NavigationBar. Toolbar icons can be rendered using datasource instead of HTML ul li tags.

    NOTE

    This property is a toolbar specific. Toolbar items can be given as array of objects. To achieve this, mode property must be set as “toolbar”

    Default Value

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <script>
            window.data = [{ iconName: 'plus' }, { iconName: 'cut' }, { iconName: 'copy', badgeValue: 2 }, { iconName: 'save' }, { iconName: 'search', badgeValue: 333 }];
        </script>
    
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar" data-ej-items="window.data">
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="toolbar">
        </div>
    
        <script>
            $("#toolbar").ejmNavigationBar({ mode: "toolbar", items: [{ iconName: "plus" }, { iconName: "cut" }, { iconName: "copy", badgeValue: 2 }, { iconName: "save" }, { iconName: "search", badgeValue: 333 }] });
        </script>

    locale string

    Specifies the localization to adopt the required language.

    Default Value

    • “en-US”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="header" data-role="ejmnavigationbar" data-ej-locale="zh-CN">        
        </div>
    
        <script>
            ej.mobile.NavigationBar.Locale['zh-CN'] = {
                title: "標題導航"
            };
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="header">
        </div>
    
        <script>
            $(function () {
                $("#header").ejmNavigationBar({ locale: "zh-CN" });
            });
            ej.mobile.NavigationBar.Locale['zh-CN'] = {
                title: "標題導航"
            };
        </script>

    mode enum

    Specifies the mode of NavigationBar. If the value of this property is “toolbar”, then the NavigationBar will act as toolbar otherwise header. (Or footer if position is bottom). See NavBarMode

    Default Value

    • “header”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
    
        <script>
            $("#toolbar").ejmNavigationBar({ mode: "toolbar" });
        </script>

    position enum

    Specifies the position of NavigationBar. i.e. top or bottom. See NavBarPosition

    Default Value

    • “auto”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="footer" data-role="ejmnavigationbar" data-ej-position="bottom" data-ej-title="Navigation Footer">
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="footer">
        </div>
    
        <script>
            $("#footer").ejmNavigationBar({ position: "bottom", title: "Navigation Footer" });
        </script>

    renderMode enum

    Specifies the rendering mode of the control. See RenderMode

    Default Value

    • “auto”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="header" data-role="ejmnavigationbar" data-ej-rendermode="android" data-ej-title="Navigation Header">        
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="header">
        </div>
    
        <script>
            $("#header").ejmNavigationBar({ renderMode: "android", title: "Navigation Header" });
        </script>

    templateId string

    Specifies ID of the element contains template contents.

    Default Value

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="header" data-role="ejmnavigationbar" data-ej-templateid="headertemplate">        
        </div>
    
        <script id="headertemplate" type="text/ng-template">
            <div>
                <p>Template Header</p>
            </div>
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="header">
        </div>
    
        <script>
            $(function () {
                $("#header").ejmNavigationBar({ templateID: "headertemplate" });
            });
        </script>
    
        <script id="headertemplate" type="text/ng-template">
            <div>
                <p>Template Header</p>
            </div>
        </script>

    titleAlignment enum

    Specifies the title alignment of the NavigationBar. See NavBarTitleAlignment

    Default Value

    • “left”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header" data-ej-titlealignment="center">        
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="header">
        </div>
    
        <script>
            $("#header").ejmNavigationBar({ title: "Navigation Header", titleAlignment: "center" });
        </script>

    title string

    Specifies the title of the NavigationBar. If this value is not set the header will render without title span.

    NOTE

    For toolbar mode bottom positioned NavigationBar, the title will not be shown.

    Default Value

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header">        
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="header">
        </div>
    
        <script>
            $("#header").ejmNavigationBar({ title: "Navigation Header" });
        </script>

    windows

    Section for windows mode specific functionalities.

    NOTE

    Windows specific properties works only in windows mode. To achieve windows specific properties, rendeMode property should be set as “windows”.

    windows.position enum

    Specifies the position of NavigationBar in windows rendering mode. i.e. top or bottom. See NavBarPosition

    Default Value

    • “auto”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header" data-ej-rendermode="windows" data-ej-windows-position="bottom">        
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="header">
        </div>
    
        <script>
            $("#header").ejmNavigationBar({ title: "Navigation Header", renderMode: "windows", windows: { position: "bottom" } });
        </script>

    Methods

    addItem()

    To add an item to the toolbar. This method accepts two arguments. First one is a string which denotes the item to be added. Second one is index of the new item and it is optional.

    Example

  • html
  • <input data-role="ejmbutton" type="button" data-ej-text="Add a new item" data-ej-touchend="add" />
    
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
            </ul>
        </div>
    
        <script>
            function add() {
                $("#toolbar").ejmNavigationBar("addItem", "<li data-ej-iconname='search' data-ej-badgevalue='333'></li>", 2);
            }
        </script>

    disableItem()

    To disable an item in the toolbar which mentioned by index parameter.

    Example

  • html
  • <input data-role="ejmbutton" type="button" data-ej-text="Disable Item" data-ej-touchend="disable" />
    
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
    
        <script>
            function disable() {
                $("#toolbar").ejmNavigationBar("disableItem", 2);
            }
        </script>

    enableItem()

    To enable an item in the toolbar which mentioned by index parameter.

    NOTE

    To achieve this, the item should be disabled using disableItem method.

    Example

  • html
  • <input data-role="ejmbutton" type="button" data-ej-text="Disable Item" data-ej-touchend="disable" />
        <input data-role="ejmbutton" type="button" data-ej-text="Enable Item" data-ej-touchend="enable" />
    
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
    
        <script>
            function disable() {
                $("#toolbar").ejmNavigationBar("disableItem", 2);
            }
            function enable() {
                $("#toolbar").ejmNavigationBar("enableItem", 2);
            }
        </script>

    getTitle()

    To get title of the NavigationBar.

    Example

  • html
  • <div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header" data-ej-isrelative="true">
        </div>
        <input data-role="ejmbutton" type="button" data-ej-text="Get Title" data-ej-touchend="get" />
    
        <script>
            function get() {
                alert("Title is " + $("#header").ejmNavigationBar("getTitle"));
            }
        </script>

    hide()

    To hide the NavigationBar.

    Example

  • html
  • <input data-role="ejmbutton" type="button" data-ej-text="Hide Toolbar" data-ej-touchend="hide" />
    
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
            </ul>
        </div>
    
        <script>
            function hide() {
                $("#toolbar").ejmNavigationBar("hide");
            }
        </script>

    hideItem()

    To hide an item in the toolbar which mentioned by index parameter.

    Example

  • html
  • <input data-role="ejmbutton" type="button" data-ej-text="Hide Item" data-ej-touchend="hide" />
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
    
        <script>
            function hide() {
                $("#toolbar").ejmNavigationBar("hideItem", 2);
            }
        </script>

    removeItem()

    To remove an item in the toolbar which mentioned by index parameter.

    Example

  • html
  • <input data-role="ejmbutton" type="button" data-ej-text="Remove Item" data-ej-touchend="remove" />
    
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
    
        <script>
            function remove() {
                $("#toolbar").ejmNavigationBar("removeItem", 2);
            }
        </script>

    show()

    To show the hidden NavigationBar by hide() method.

    Example

  • html
  • <input data-role="ejmbutton" type="button" data-ej-text="Hide Toolbar" data-ej-touchend="hide" />
        <input data-role="ejmbutton" type="button" data-ej-text="Show Toolbar" data-ej-touchend="show" />
    
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
            </ul>
        </div>
    
        <script>
            function hide() {
                $("#toolbar").ejmNavigationBar("hide");
            }
            function show() {
                $("#toolbar").ejmNavigationBar("show");
            }
        </script>

    showItem()

    To show an item in the toolbar which mentioned by index parameter.

    NOTE

    To achieve this, the item must be hidden using hideItem method.

    Example

  • html
  • <input data-role="ejmbutton" type="button" data-ej-text="Hide Item" data-ej-touchend="hide" />
        <input data-role="ejmbutton" type="button" data-ej-text="Show Item" data-ej-touchend="show" />
    
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
    
        <script>
            function hide() {
                $("#toolbar").ejmNavigationBar("hideItem", 2);
            }
            function show() {
                $("#toolbar").ejmNavigationBar("showItem", 2);
            }
        </script>

    Events

    ellipsisTouchEnd

    Event triggers when touch end happens on the ellipsis icon.

    NOTE

    Ellipsis icon will be shown automatically while the toolbar items excess the maximum length. The maximum length of icons for top positioned toolbar is 3 and for bottom positioned toolbar is 5.

    Name Type Description
    argument Object Event parameters from NavigationBar.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model object Returns the model value of the control.
    element object Returns the ellipsis element object on which the touch end event happens.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar" data-ej-ellipsistouchend="end">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
                <li data-ej-iconname="more"></li>
            </ul>
        </div>
    
        <script>
            function end(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
                <li data-ej-iconname="more"></li>
            </ul>
        </div>
    
        <script>
            $("#toolbar").ejmNavigationBar({
                mode: "toolbar",
                ellipsisTouchEnd: function (args) {
                    //handle the event
                }
            });
        </script>

    ellipsisTouchStart

    Event triggers when touch start happens on the ellipsis icon.

    NOTE

    Ellipsis icon will be shown automatically while the toolbar items excess the maximum length. The maximum length of icons for top positioned toolbar is 3 and for bottom positioned toolbar is 5.

    Name Type Description
    argument Object Event parameters from NavigationBar.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model object Returns the model value of the control.
    element object Returns the ellipsis element object on which the touch start event happens.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar" data-ej-ellipsistouchstart="start">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
                <li data-ej-iconname="more"></li>
            </ul>
        </div>
    
        <script>
            function start(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
                <li data-ej-iconname="more"></li>
            </ul>
        </div>
    
        <script>
            $("#toolbar").ejmNavigationBar({
                mode: "toolbar",
                ellipsisTouchStart: function (args) {
                    //handle the event
                }
            });
        </script>

    touchEnd

    Event triggers when touch end happens on the toolbar items.

    Name Type Description
    argument Object Event parameters from NavigationBar.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model object Returns the model value of the control.
    element object Returns the element object on which the touch end event happens.
    iconname string Returns the name of the item on which the touch end event happens.
    index Number Returns the index of the item on which the touch end event happens.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar" data-ej-touchstart="end">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
    
        <script>
            function end(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
    
        <script>
            $("#toolbar").ejmNavigationBar({
                mode: "toolbar",
                touchEnd: function (args) {
                    //handle the event
                }
            });
        </script>

    touchStart

    Event triggers when touch start happens on the toolbar items.

    Name Type Description
    argument Object Event parameters from NavigationBar.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model object Returns the model value of the control.
    element object Returns the element object on which the touch start event happens.
    iconname string Returns the name of the item on which the touch start event happens.
    index Number Returns the index of the item on which the touch start event happens.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="toolbar" data-role="ejmnavigationbar" data-ej-mode="toolbar" data-ej-touchstart="start">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
    
        <script>
            function start(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="toolbar">
            <ul>
                <li data-ej-iconname="plus"></li>
                <li data-ej-iconname="cut"></li>
                <li data-ej-iconname="copy" data-ej-badgevalue="2"></li>
                <li data-ej-iconname="save"></li>
                <li data-ej-iconname="search" data-ej-badgevalue="333"></li>
            </ul>
        </div>
    
        <script>
            $("#toolbar").ejmNavigationBar({
                mode: "toolbar",
                touchStart: function (args) {
                    //handle the event
                }
            });
        </script>