jQuery UI Sortable option() 方法

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

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

句法：

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

• optionName：此参数是我们需要以字符串形式传递的输入，我们需要为其获取值。
• 返回值：我们根据期权数据类型得到各自的返回值。

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

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

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

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

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

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

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

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

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

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

CDN 链接：添加您的项目所需的以下 jQuery Mobile 脚本。

示例：此示例演示了jQuery UI Sortable option()方法。

HTML

  

    
    
    
    
    
    
  
    
        #sortable {
            list-style-type: none;
            width: 50%;
        }
  
        #sortable li {
            margin: 10px 0;
            padding: 0.5em;
            font-size: 25px;
            height: 20px;
            background-color: #7af760;
        }
        #btn
        {
            margin-left: 50px;
            padding: 0.5;
            font-size: 25px;
            height: 50px;
            width: 50%;
        }
    
    
        $(function () {
            $("#btn").on('click', function () {
                var options = $("#divID").sortable("option");
                document.getElementById('spanID').innerHTML += 
                "No of key/value pair present : " 
                + Object.keys(options).length;
            });
        });
  
        $(function () {
            $("#sortable").sortable();
        });
    

  

    
        
            GeeksforGeeks
        
  
        jQuery UI Sortable option() Method
  
        
            Geeks1
            Geeks2
            Geeks3
            Geeks4
        
          
        
          
                
    

输出：

jQuery Mobile 可排序 option() 方法

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