Open In App

jQuery UI Selectable instance() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    <script src=
    </script>
    <script src=
    </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:

jQuery UI Selectable instance() Method

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



Last Updated : 10 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads