jQuery Selectable autoRefresh 选项有什么用？答案

【问题标题】：What is the use of jQuery Selectable autoRefresh option?jQuery Selectable autoRefresh 选项有什么用？
【发布时间】：2022-01-15 17:34:32
【问题描述】：

当我想知道如何使用 Selectable 小部件 autoRefresh 选项时，我正在探索该部分。谁能举例说明一下？

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

jQueryUI 提供 selectable() 方法来单独或成组选择 DOM 元素。使用此方法，可以通过将鼠标悬停在元素上拖动框（有时称为套索）来选择元素。此外，可以通过在按住 Ctrl/Meta 键的同时单击或拖动来选择元素，从而允许进行多个（非连续）选择。

语法

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

您可以使用 Javascript 对象一次提供一个或多个选项。如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 -

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

选项 - 自动刷新 此选项设置为 true，每个可选项目的位置和大小在选择操作开始时计算。默认情况下，它的值为 true。如果您有很多项目，您可能希望将其设置为 false 并手动调用 refresh() 方法。语法

$( ".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>

参考来自：-tutorialspoint

【讨论】：