ejmNavigationBar
5 Jun 202324 minutes to read
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
<!-- Unobtrusive way of rendering -->
<div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header">
</div><!-- Obtrusive way of rendering -->
<div id="header">
</div>
<script>
$("#header").ejmNavigationBar({ title: "Navigation Header" });
</script>Navigation bar as footer
<!-- Unobtrusive way of rendering -->
<div id="footer" data-role="ejmnavigationbar" data-ej-position="bottom" data-ej-title="Navigation Footer">
</div><!-- 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.
<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
<!-- 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><!-- 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
<!-- 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><!-- 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
<!-- 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><!-- 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
<!-- 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><!-- 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
<!-- Unobtrusive way of rendering -->
<div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header" data-ej-enablepersistence="true">
</div><!-- 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
<!-- 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><!-- 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
<!-- 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><!-- 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
<!-- 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><!-- 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
<!-- 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><!-- 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
<!-- 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><!-- 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
<!-- 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><!-- 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
<!-- 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><!-- 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
<!-- 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><!-- 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
<!-- Unobtrusive way of rendering -->
<div id="footer" data-role="ejmnavigationbar" data-ej-position="bottom" data-ej-title="Navigation Footer">
</div><!-- 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
<!-- Unobtrusive way of rendering -->
<div id="header" data-role="ejmnavigationbar" data-ej-rendermode="android" data-ej-title="Navigation Header">
</div><!-- 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
<!-- 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><!-- 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
<!-- Unobtrusive way of rendering -->
<div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header" data-ej-titlealignment="center">
</div><!-- 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
<!-- Unobtrusive way of rendering -->
<div id="header" data-role="ejmnavigationbar" data-ej-title="Navigation Header">
</div><!-- 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
<!-- 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><!-- 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
<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
<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
<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
<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
<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
<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
<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
<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
<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.
|
Example
<!-- 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><!-- 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.
|
Example
<!-- 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><!-- 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.
|
Example
<!-- 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><!-- 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.
|
Example
<!-- 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><!-- 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>