jQuery |可选择（）和手风琴（）

jQuery UI用于在网站或网页中整合强大的效果。
在本文中，将讨论 jQuery UI 交互和小部件，例如 selectable 和 Accordion，它们允许以逻辑方式选择和显示项目。

1. Selectable() 方法
   此方法允许在鼠标的帮助下选择元素。使用jQuery UI，我们可以选择DOM（d ocumentöbject中号Odel等）元件，其可用于选择。这可以通过用鼠标单击可选择的对象并执行其他工作来完成。
   句法：
   selectable() 方法有两种形式，每种形式的使用取决于需求。这些如下：-

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

   $(selector, context).selectable ("action", [params]);

   给定的表格显示了可以与 selectable() 方法一起使用的不同选项：

   Option	Purpose
   autoRefresh	If the value of this option is set to “true”, it will allow the position and size of each selected element to be computed at the beginning of the selection operation. The default value this option is set to “true”.
   cancel	This option is used to forbids the selection of the DOM elements (selectable elements). If the value of this option is set to li, then it will prevent the selection of all list items in the web page. The default value of this option is textarea, input, button, option, select. This means that by default, these elements cannot be selected the web page.
   delay	This option is used to produce the delay between the click of the user and the start of selection of item. The main purpose of this option is to avoid unwanted selections. The default value of this option is 0.
   filter	This option is used to indicate the part of the element which is used to select the items. The default value of this option is * which indicates the the item can be selected by clicking anywhere on the item.	disabled	This option is used to disable the process of selection .When the value of this option is set to true, it disables the selection process.To enable the selection process, the enable option is used. The default value of this option is false.

   例子：

   • 默认功能 –
     代码 ：

     jQuery UI Selectable() Method - Default functionality
     
     
     
     #select .ui-selecting {
                         background: aqua;
                         }
     #select .ui-selected { 
                         background: yellow; 
                         color: green; 
                         }
     #select { 
             list-style-type: none; 
             margin: 0; 
             padding: 0; 
             width: 50%; 
             }
     #select li { 
             margin: 3px; 
             padding: 10px; 
             font-size: 1.4em; 
             height: 18px; 
             }
     
     
     
     
     $( function() {
         $( "#select" ).selectable();
     });
     
     
     
     Geeks for Geeks
     
     
     Web Tech
     Linux
     DBMS
     CBNST
     Theory of Computation
     
     
     
                         

     输出：
     选择前：
     
     选择Linux 和 DBMS部分后：
     
     注意：使用 Ctrl + 单击可选择多个选项。

   • 网格显示 –
     代码 ：

     jQuery UI Selectable() Method - Display as grid
     
     
     
     #grid .ui-selecting { 
                         background: aqua;
                         }
     #grid .ui-selected { 
                     background: yellow; 
                     color: green; 
                     }
     #grid { 
         list-style-type: none; 
         margin: 0; 
         padding: 0; 
         width: 450px; 
         }
     #grid li { 
             margin: 3px; 
             padding: 1px; 
             float: left; 
             width: 50px; 
             height: 50px; 
             font-size: 2.5em; 
             text-align: center; 
             }
     
     
     
     
     
     
     $( function() {
         $( "#grid" ).selectable();
     });
     
     
     
     
     Geeks for Geeks
     
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
      
      
     
                         

     输出：
     选择前：
     
     从网格中选择所需的数字后：
     

2. 手风琴()方法：
   手风琴是一个由 jQuery UI 提供的小部件。手风琴的主要目的是将页面内容分成逻辑部分。每个部分由两部分组成——
   1. 标题这部分包含部分的标题。标题部分通常使用标题标签创建。
   2. Body这部分包含section的内容。body部分通常使用div标签创建。

   网页中的手风琴可以使用jQuery 库提供的accordion() 方法创建。
   句法：
   使用手风琴方法的语法如下

   $(selector).accordion (options)

   $(selector).accordion ("action", params)

   给定的表格显示了可以与手风琴（）方法一起使用的不同选项：

   OPTION	PURPOSE
   active	This option can take the boolean and integer values only.When the option is set to false, it will allow the panels to collapse. The default value of this option is true.
   animate	This option can take integer, boolean or string values .This option is used to produce animation while opening the panels. If the value of this option is set to false, it will disable the animation.
   disabled	This option is used to disable the accordion .When the value of this option is set to true, it disables the accordion. To enable the accordion process, the disabled option is set to false . The default value of this option is false.

   例子：

   • 默认功能 –在默认功能中，手风琴的一个部分始终处于打开状态。
     代码 ：

     Accordion Effect - Default functionality
     
     
     
     
     
     
     $(function() {
         $( "#gfg" ).accordion();
     });
     
     
     
     Welcome to Geeks for Geeks
     
     Web Technology
     
     
         Web technology refers to the means by which computers 
         communicate with each other using markup languages and
         multimedia packages.
     
     
     CBNST
     
     
     Computer Based Numerical and Statistical Techniques: CBNST is
     use to optimize performance and minimize error in problem-solving
     application. Application of Computer Based Numerical and
     Statistical Techniques:
     
     
     Data Structures
     
     
     A data structure is a particular way of organizing data in a computer
      so that it can be used effectively. 
     
     
     Algorithms
     
     
     An algorithm is an unambiguous specification of how to solve a
     class of problems. Algorithms can perform calculation, data processing
     and automated reasoning tasks.
       
     
     
     
     
                         

     输出：
     在点击任何部分之前
     
     单击数据结构部分后
     

   • 可折叠内容 –要删除默认功能，可折叠选项设置为 true。
     代码 ：

     jQuery UI Accordion - Collapsible Content
     
     
     
     
     
     
     $(function() {
         $( "#gfg" ).accordion({ collapsible: true});
     });
     
     
     
     Welcome to Geeks for Geeks
     
     Web Technology
     
     
      Web technology refers to the means by which computers 
      communicate with each other using markup languages and 
      multimedia packages.
     
     
     CBNST
     
     
     Computer Based Numerical and Statistical Techniques: 
     CBNST is use to optimize performance and minimize error
     in problem-solving application.
     
     
     Data Structures
     
     
     A data structure is a particular way of organizing data in a computer
      so that it can be used effectively. 
     
     
     Algorithms
     
     
     An algorithm is an unambiguous specification of how to solve a class
     of problems. Algorithms can perform calculation, data processing and
     automated reasoning tasks.
     
     
     
     
                         

     输出：
     单击“数据结构”选项一次后
     
     单击“数据结构”选项两次后