What is the use of jQuery Selectable autoRefresh option?

user_15197127 0
Viewed 43

I was exploring the part when I wanted to know how to use the Selectable widget autoRefresh option. Can anyone explain with an example?

jquery-ui jquery
1 Answers

jQueryUI provides selectable() method to select DOM elements individually or in a group. With this method, elements can be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by clicking or dragging while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.

Syntax

$(selector, context).selectable (options);

You can provide one or more options at a time using a Javascript object. If there are more than one option to be provided, then you will separate them using a comma as follows −

$(selector, context).selectable({option1: value1, option2: value2..... });

Option - autoRefresh This option is set to true, the position and size of each selectable item are computed at the beginning of a select operation. By default its value is true. If you have many items, you may want to set this to false and call the refresh() method manually. Syntax

$( ".selector" ).selectable({ autoRefresh: false });


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI selectable-1</title>
    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
          rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <style>
        #selectable-1 .ui-selecting {
            background: #707070;
        }

        #selectable-1 .ui-selected {
            background: #EEEEEE;
            color: #000000;
        }

        #selectable-1 {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 20%;
        }

            #selectable-1 li {
                margin: 3px;
                padding: 0.4em;
                font-size: 16px;
                height: 18px;
            }

        .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
        }
    </style>
    <script>
        $(function () {
            $("#selectable-1").selectable({
                autoRefresh: false
            });
        });
    </script>
</head>

<body>
    <ol id="selectable-1">
        <li class="ui-widget-content">Product 1</li>
        <li class="ui-widget-content">Product 2</li>
        <li class="ui-widget-content">Product 3</li>
        <li class="ui-widget-content">Product 4</li>
        <li class="ui-widget-content">Product 5</li>
        <li class="ui-widget-content">Product 6</li>
        <li class="ui-widget-content">Product 7</li>
    </ol>
</body>
</html>

Refrence From :-tutorialspoint

user_83849830
Related