jQuery UI Resizable option() 方法

jQuery UI是一种基于 Web 的技术，由使用 jQuery、JavaScript 库实现的 GUI 小部件、视觉效果和主题组成。 jQuery UI 是为网页构建 UI 界面的最佳工具。它还可以用于构建高度交互的 Web 应用程序，或者可以用于轻松添加小部件。

在本文中，我们将学习jQuery Mobile Resizable option() 方法。使用此方法，我们可以获取、设置或更新 Resizable 小部件的任何参数值。我们还可以使用此方法将所有选项作为键值对获取。

句法：

1.如果用户想要任何选项的值，选项名称应该在option(optionName)方法中传递。 optionName应该是字符串类型。

var isEnhanced = $("Selector").resizable("option", "enhanced");

范围：

• optionName：此参数是我们需要以字符串形式传递的输入，我们需要为其获取值。

返回类型：我们根据选项数据类型得到各自的返回值。

2.获取所有选项作为键值对，只需要调用option()方法，不传参数即可。

var options= $("Selector").resizable("option");

参数：没有参数的option()方法被传递给方法。

返回类型：该方法以optionName-optionValue对集合的形式返回所有选项的键值对列表。

3 、设置任意选项的值，只需要调用option(optionName, value) ，以optionName和value作为参数。

$("Selector").resizable("option", "enhanced", "false");

参数：

• optionName：选项方法需要选项名称作为第一个参数，该参数为字符串类型。
• value：选项方法需要选项名称作为第二个参数，该参数为字符串类型。

4.我们也可以设置多个选项而不是只设置一个，你只需要调用option(options)方法，其中options是选项列表。

$("Selector").resizable("option", {enhanced: false, disabled: true});

范围：

• option：是optionName-value对作为输入的map，用来设置传递的值对应的options，属于object类型。

CDN 链接：以下是您的项目需要的一些 jQuery Mobile 脚本，因此请将这些脚本添加到您的项目中。

示例：此示例描述了jQuery Mobile Resizable option() 方法的使用。

HTML

  

    
    
    
    
    
        h1 {
            color: green;
        }
  
        .container {
            width: 320px;
        }
  
        #resizable-div {
            float: left;
        }
  
        #resizable-div {
            width: 150px;
            height: 150px;
            text-align: center;
            border: 2px solid black;
        }
    
    
        $(function () {
            $("#btn").on('click', function () {
                var options = $("#resizable-div").resizable("option");
                document.getElementById('GFG').innerHTML +=
                    "No of key/value pair present : " +
                    Object.keys(options).length;
            });
        });
  
        $(function () {
            $("#resizable-div").resizable();
            $("#resizable-div").resizable('enable');
        });
    

  

    
        GeeksforGeeks
        jQuery UI Resizable option() Method
  
        
            
                I'm Enable
            
        
        
        
  
        
    

  

输出：

jQuery Mobile Resizable option() 方法

参考： https ://api.jqueryui.com/resizable/#method-option