jQWidgets jqxNavigationBar initContent Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxNavigationBar is used for representing a jQuery widget that has header and content sections. On clicking over the header, the content will be expanded or collapsed accordingly.
The initContent property is used as a callback function that is called when an item’s content needs to be initialized. Here the index argument shows which item is initialized.
Syntax:
Set the initContent property:
$("Selector").jqxNavigationBar({ initContent: function (index) { $("#jqxButton").jqxButton({ $('#jqxbutton_for_initContent') .on('click', function () { $('#jqx_Navigation_Bar') .jqxNavigationBar('disable'); }); }); } });
Return the initContent property:
var initContent = $('Selector').jqxNavigationBar('initContent');
Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxnavigationbar.js”></script>
Example: The below example illustrates the jQWidgets jqxNavigationBar initContent property used to disable the navigation bar.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "jqwidgets/styles/jqx.base.css" type = "text/css" /> < script type = "text/javascript" src = "scripts/jquery.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxcore.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxexpander.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxnavigationbar.js" > </ script > </ head > < body > < center > < h1 style = "color: green;" > w3wiki </ h1 > < h3 > jQWidgets jqxNavigationBar initContent Property </ h3 > < div id = "jqx_Navigation_Bar" style = "margin: 25px;" align = "left" > < div >First Header</ div > < div > < h8 >Content for the first header</ h8 > < ul > < li >GFG</ li > < li >CSE</ li > </ ul > </ div > < div > Second Header</ div > < div > < input type = "button" style = "margin: 29px;" id = "jqxbutton_for_initContent" value = "Disable" /> </ div > </ div > < script type = "text/javascript" > $(document).ready(function () { $("#jqx_Navigation_Bar"). jqxNavigationBar({ width: 250, height: 132, initContent: function (index) { if (index === 0) { $('#jqxbutton_for_initContent'). on('click', function () { $('#jqx_Navigation_Bar'). jqxNavigationBar( 'disable'); }); } } }); $("#jqxbutton_for_initContent"). jqxButton({ width: 100, }); }); </ script > </ center > </ body > </ html > |
Output:
Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxnavigationbar/jquery-navigationbar-api.htm?search=
Contact Us