Skip to content
Related Articles

Related Articles

jQWidgets jqxButtonGroup enableHover Property

Improve Article
Save Article
Like Article
  • 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 jqxButtonGroup is used to illustrate a jQuery widget that generates a group of buttons that functions like the normal button, radio buttons, or checkboxes.

The enableHover property is used to enable or disable the highlighted state of the displayed jqxButtonGroup. It is of type Boolean and its default value is false.

Syntax:

Set the enableHover property.

$('#Selector').jqxButtonGroup({enableHover: true });

 

Return the enableHover property.

var enableHover = 
    $('#Selector').jqxButtonGroup('enableHover');

Linked Files: Download jQWidgets from the 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-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>

The below example illustrates the jqxButtonGroup enableHover property in jQWidgets.

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/jqxbuttons.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        
        <h3>jQWidgets jqxButtonGroup 
            enableHover property</h3>
        <br />
  
        <div id="jqxBG">
            <button style="padding: 6px 36px" 
                    id="l">
                ON
            </button>
            
            <button style="padding: 6px 36px"
                    id="c">
                Button
            </button>
            
            <button style="padding: 6px 36px"
                    id="r">
                OFF
            </button>
        </div>
        
        <div>
            <input type="button" id="jqxBtn" 
                   style="margin-top: 25px" 
                   value="Click here" />
        </div>
        
        <div id="log"></div>
    </center>
  
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxBtn").jqxButton({
                width: "100px",
                height: "30px",
            });
            $("#jqxBG").jqxButtonGroup({
                enableHover: true,
            });
  
            $("#jqxBtn").on("click", function () {
                var eh =
                    $("#jqxBG").jqxButtonGroup("enableHover");
                $("#log").text("Hover state enabled: " + eh);
            });
        });
    </script>
</body>
  
</html>

Output:

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxbutton/jquery-button-api.htm


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!