jQuery UI Selectable instance() Method

Last Updated : 10 Jan, 2022

jQuery UI consists of GUI widgets, visual effects, and themes implemented using the jQuery, JavaScript Library. jQuery UI is great for building UI interfaces for the webpages. It can be used to build highly interactive web applications or can be used to add widgets easily.

The JQuery UI selectable() method is used to select individually or groups of DOM elements method, you can select an element by dragging a box with the mouse over it. Holding down the CTRL key will select multiple elements at once. This method takes no argument but it returns the instance object of the selectable and undefined is returned if the element does not have an associated instance. It takes no parameter as an argument and returns selectable instances.

Syntax:

$( ".selector" ).selectable( "instance" );

Parameters: This method does not accept any arguments.

CDN Links:

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Example: In this example, when the user selects the menu from the menu option then the options are hidden for 2 seconds after that the option will show to the users. Here we use the instance method to retrieve the object of the selectable element after retrieving the object we can apply any selectable method such as the widget method to get the jquery object of the selected element then we apply some style to the selected element to observe the working of the instance method.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
    </script>

    <style>
        h1 {
            color: green;
        }

        .leave-selector {
            list-style-type: none;
        }

        .leave-selector li {
            display: inline-block;
            padding: 5px;
            border: 1px solid black;
        }

        .leave-selector .ui-selecting {
            color: black;
            background-color: yellow;
        }

        .leave-selector .ui-selected {
            color: white;
            background-color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1 class="selector">
            GeeksforGeeks
        </h1>

        <strong>
            jQuery UI Selectable instance() Method
        </strong>
        
        <div class="container">
            <ul class="leave-selector">
                <li id="select-id-1">Sun</li>
                <li id="select-id-2">Mon</li>
                <li id="select-id-3">Tue</li>
                <li id="select-id-4">Web</li>
                <li id="select-id-5">Thu</li>
                <li id="select-id-6">Fri</li>
                <li id="select-id-7">Sat</li>
            </ul>
        </div>
    </center>

    <script type="text/javascript">
        let element = $(".leave-selector").selectable();
        element.on("selectablestop", function (event, ui) {

            let selectableInstance = 
                $(".leave-selector").selectable("instance");
            
            selectableInstance.widget().css({ background: "pink" });

            setTimeout(function () {
                selectableInstance.widget().css({ 
                    background: "white" 
                });
            }, 2000);
        });
    </script>
</body>

</html>

Output:

Reference: https://api.jqueryui.com/selectable/#method-instance

jQuery UI Selectable instance() Method

debadebaduttapanda7

Improve

Article Tags :

jQuery UI Selectable instance() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?