jQuery UI 可选 refresh() 方法

jQuery UI由使用jQuery 、 JavaScript库实现的 GUI 小部件、视觉效果和主题组成。 jQuery UI 非常适合为网页构建 UI 界面。它可用于构建高度交互的 Web 应用程序，也可用于轻松添加小部件。

在本文中，我们将使用jQuery Mobile 的 Selectable refresh()方法来刷新每个选定元素的位置和大小。此刷新函数用于手动重新计算每个选择器的位置和大小。为此，我们需要将autoRefresh选项设置为false 。它不接受任何功能参数。

句法：

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

参数：此方法不接受任何参数。

CDN 链接：将以下 jQuery Mobile 脚本添加到您的项目中。

示例：此示例描述了jQuery Mobile 可选 refresh()方法的使用。

HTML

    
    
    
      
    
    
    
    
    
    
          
        .GFG{
            float: center;
        }
        .grid {
          display: grid;
          grid-template-columns: 50px 50px 50px;
          gap: 10px;
        }
        .grid-item {
          width: 50px;
          height: 50px;
          background-color: aqua;
        }
        .ui-selected {
          background-color: green;
        }
        .ui-selecting {
          background-color: rgb(122, 255, 122);
        }
    
    
        $(function () {
            $("#btn").on('click', function () {
                $(".grid").selectable( "refresh" );
                alert("Widget Refreshed");
            });
        });
  
        $(".grid").selectable();
    


    
       GeeksforGeeks
       jQuery UI Selectable refresh() Method
       
           
              
              
              
              
              
              
              
              
              
           
       
         
       
    

输出：

参考： https://api.jqueryui.com/selectable/#method-refresh