jQWidgets jqxNavBar columns 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 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 columns property is used to set or return the layout of the widget’s elements. It accepts array type value and it contains the column width of the widget. The width value is always set in terms of percentage and the total value should be 100%. It accepts array type value and its default value is empty [].
Syntax:
Set the columns property.
$('selector').jqxNavBar({ columns: Array });Return the columns property.
var columns = $('selector').jqxNavBar('columns');
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 columns 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 columns 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({ height: 40, width: 700, columns: ['20%', '24%', '16%', '23%', '17%'], selectedItem: 0 }); }); </script></body> </html> |
Output:
Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxnavbar/jquery-navbar-api.htm
Please Login to comment...