Skip to content

All topics  /  jQuery

JQuery UI Selectable Example

jQuery ·

Hi Guys,

In this blog, I would like to share with you jquery ui selectable.jquery ui provides selectable() method to select DOM element individually or in a group.this method elements can be selected by dragging a box (sometimes called a lasso) with the mouse over the elements.

The selectable method declares that an HTML element contains selectable option. The options parameter is an object that specifies the behavior of the elements involved when selecting.

Example :


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Selectable Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        #selectable{
            margin:40px auto !important;
        }
        #feedback {font-size: 1.4em;}
        #selectable .ui-selecting {background: #008B8B;}
        #selectable .ui-selected {background: #008B8B; color: white;}
        #selectable {list-style-type: none; margin: 0; padding: 0; width: 15%;text-align: center;}
        #selectable li {margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px;}
    </style>
</head>
<body">
    <h2>JQuery UI Selectable Example - NiceSnippets.com</h2>
    <ol id="selectable">
        <li class="ui-widget-content">Tab 1</li>
        <li class="ui-widget-content">Tab 2</li>
        <li class="ui-widget-content">Tab 3</li>
    </ol>
    <script>
        $( function() {
            $("#selectable").selectable();
        });
    </script>
</body>
</html>

It will help you...

More on this topic