jQWidgets jqxNavBar getSelectedIndex() Method - Zentica

jQWidgets jqxNavBar getSelectedIndex() Method - Zentica

<!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;">

        Zentica

    </h1>

  

    <h3>

        jQWidgets jqxNavBar getSelectedIndex() Method

    </h3>

  

    <div id="navBar">

        <ul>

            <li>Zentica</li>

            <li>Data Structure</li>

            <li>Algorithm</li>

            <li>Web Technology</li>

            <li>Programming</li>

        </ul>

    </div>

  

    <center>

        <input type="button" id="jqxBtn" 

            value="Get Selected Index" 

            style="padding: 5px 15px; margin-top: 210px;">

    </center>

  

    <script type="text/javascript">

        $(document).ready(function() {

            $("#navBar").jqxNavBar({

                width: 500,

                height: 200,

                selectedItem: 0,

                minimized: true,

                orientation: 'vertical'

            });

  

            $("#jqxBtn").on('click', function() {

                var index = $("#navBar")

                    .jqxNavBar('getSelectedIndex');

  

                alert('Selected Index: ' + index);

            });

        });

    </script>

</body>

  

</html>

You may also be interested in