jQWidgets jqxNavigationBar focus() Method

Last Updated : 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 focus() method is used for focusing the specified jqxNavigationBar. When the jqxNavigationBar widget is focused, then the keyboard can be used for navigation.

Below are some of the keys and their functions that are supported by jqxNavigationBar:

Enter/Spacebar: This is used for collapsing or expanding the item.
Left/Up arrow: This is used for focusing on the previous item header or on the last one if the currently focused is the first one.
Right/Down arrow: This is used to focus on the next item header or on the first one if the currently focused is the last one.
End: This focuses on the last item header.
Home: This focuses on the first item header.
Tab: This is used for focusing on the first header or the next element in the DOM.
Ctrl+Up arrow: If the focus is on an item content, focuses on its respective header.
Ctrl+Down arrow: If the focus is on an item header, focuses on its respective content.

Syntax:

$('Selector').jqxNavigationBar('focus');

Parameters: This method does not accept any parameters.

Return values: This method does not return any values.

Linked Files: Download https://www.jqwidgets.com/download/ 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> type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>

Example: The below example illustrates the jQWidgets jqxNavigationBar focus() method. In the below example, using the help of focus() method, the navigation bar has been focused. Then using the ‘down arrow’ and ‘enter’ buttons the second item has been expanded.

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 focus() Method 
        </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> 
                <h8>Content for the second header</h8> 
                <ul> 
                    <li>GeeksforGeeks</li> 
                    <li>CSE</li> 
                </ul> 
            </div> 
        </div> 
        <input type="button" style="margin: 29px;" 
           id="jqxbutton_for_focus" 
           value="Focus the above NavigationBar" /> 
             
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $("#jqx_Navigation_Bar"). 
                    jqxNavigationBar({ 
                        width: 290, 
                        height: 150, 
                    }); 
                $("#jqxbutton_for_focus"). 
                    jqxButton({ 
                        width: 250, 
                    }); 
                $('#jqxbutton_for_focus'). 
                    on('click', function () { 
                        $('#jqx_Navigation_Bar'). 
                            jqxNavigationBar( 
                                'focus'); 
                    }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>