jQWidgets jqxNavigationBar initContent Property - GeeksforGeeks

29 Oct, 2021
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;">            GeeksforGeeks        </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=
jQuery-jQWidgets
jQWidgets-jqxNavigationBar
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
Difference Between JavaScript and jQuery
How to get the value in an input text box using jQuery ?
QR Code Generator using HTML, CSS and jQuery
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?