jQWidgets jqxNavBar selection Property

Last Updated : 26 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 jqxNavBar represents a jQuery navigation bar widget built from <ul> and <li> tags. This widget is used for creating simple or responsive horizontal/vertical navigation menu layouts.

The selection property is used to set or return whether the items can be selected or not. It accepts Boolean type value and its default value is true.

Syntax:

Set the selection property.

$('selector').jqxNavBar({ selection: Boolean });

Return the selection property.

var selection = $('selector').jqxNavBar('selection');

Linked Files: Download jQWidgets from the given link https://www.jqwidgets.com/download/. 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-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxnavbar.js”></script>

The below example illustrates the jQWidgets jqxNavBar selection property.

Example:

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-1.11.1.min.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqxcore.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqx-all.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqxnavbar.js"></script> 
  
    <style> 
        h1, 
        h3 { 
            text-align: center; 
        } 
          
        #navBar { 
            width: 100%; 
            margin: 0 auto; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        jQWidgets jqxNavBar selection Property 
    </h3> 
  
    <div id="navBar"> 
        <ul> 
            <li>GeeksforGeeks</li> 
            <li>Data Structure</li> 
            <li>Algorithm</li> 
            <li>Web Technology</li> 
            <li>Programming</li> 
        </ul> 
    </div> 
  
    <script type="text/javascript"> 
        $(document).ready(function() { 
            $("#navBar").jqxNavBar({  
                width: 700, 
                height: 40, 
                selection: false, 
            }); 
        }); 
    </script> 
</body> 
  
</html>