jQuery UI is used to incorporate the powerful effects in the website or web pages .
In this article, about jQuery UI interactions and widgets will be discussed such as selectable and accordion which allows items to be selected and displayed in a logical manner.
- Selectable() Method
This method allows the elements to be selected with the help of mouse. Using jQuery UI, we can select the DOM(Document Object Model) elements which is available to select. This can be done by clicking on the selectable object by mouse and performing other work.
Syntax:
The selectable() method has two forms and the use of each form depends on the requirement. These are as follows :-$(selector, context).selectable (options);
$(selector, context).selectable ("action", [params]);The given table shows the different options that can be used with selectable() method:
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 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.Example:
- Default Functionality –
Code :<!doctype html><htmllang="en"><head><title>jQuery UI Selectable() Method - Default functionality</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><linkrel="stylesheet"href="/resources/demos/style.css"><styletype="text/css">#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;}</style><script>$( function() {$( "#select" ).selectable();});</script></head><body><h1align="center">Geeks for Geeks</h1><center><olid="select"><liclass="ui-widget-content">Web Tech</li><liclass="ui-widget-content">Linux</li><liclass="ui-widget-content">DBMS</li><liclass="ui-widget-content">CBNST</li><liclass="ui-widget-content">Theory of Computation</li></ol></center></body></html>Output:
Before selection:
After selection of Linux and DBMS section section:
Note: Use Ctrl + Click to select multiple options. - Grid Display –
Code :<!doctype html><htmllang="en"><head><title>jQuery UI Selectable() Method - Display as grid</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><linkrel="stylesheet"href="/resources/demos/style.css"><styletype="text/css">#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;}</style></script></script><script>$( function() {$( "#grid" ).selectable();});</script></head><body><center><h1>Geeks for Geeks</h1><olid="grid"><liclass="ui-state-default">1</li><liclass="ui-state-default">2</li><liclass="ui-state-default">3</li><liclass="ui-state-default">4</li><liclass="ui-state-default">5</li><liclass="ui-state-default">6</li><liclass="ui-state-default">7</li><liclass="ui-state-default">8</li><liclass="ui-state-default">9</li><liclass="ui-state-default">10</li><liclass="ui-state-default">11</li><liclass="ui-state-default">12</li><liclass="ui-state-default">13</li><liclass="ui-state-default">14</li><liclass="ui-state-default">15</li><liclass="ui-state-default">16</li><liclass="ui-state-default">17</li><liclass="ui-state-default">18</li><liclass="ui-state-default">19</li><liclass="ui-state-default">20</li><liclass="ui-state-default">21</li><liclass="ui-state-default">22</li><liclass="ui-state-default">23</li><liclass="ui-state-default">24</li><liclass="ui-state-default">25</li><liclass="ui-state-default">26</li><liclass="ui-state-default">27</li><liclass="ui-state-default">28</li></ol></center></body></html>Output:
Before selection:
After selection of the required numbers from the grid:
- Default Functionality –
- Accordion() Method:
The accordion is a widget which is provided by jQuery UI. The main purpose of accordion is to break the page content into logical section.Each section consist of two parts –- Header This part contains the title of the section. The header section is usually created using heading tags.
- Body This part contains the content of the section.The body section is usually created using div tag.
The accordion in the web page can be create using accordion() method provided by jQuery library.
Syntax:
The syntax to use accordion method is as follows$(selector).accordion (options)
$(selector).accordion ("action", params)The given table shows the different options that can be used with accordion() method:
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. Example:
- Default Functionality –In default functionality, the one section of the accordion is always open.
Code :<!doctype html><htmllang="en"><head><title>Accordion Effect - Default functionality</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></script></script><script>$(function() {$( "#gfg" ).accordion();});</script></head><body><h1align="center">Welcome to Geeks for Geeks</h1><divid="gfg"><h3>Web Technology</h3><div><p>Web technology refers to the means by which computerscommunicate with each other using markup languages andmultimedia packages.</p></div><h3>CBNST</h3><div><p>Computer Based Numerical and Statistical Techniques: CBNST isuse to optimize performance and minimize error in problem-solvingapplication. Application of Computer Based Numerical andStatistical Techniques:</p></div><h3>Data Structures</h3><div><p>A data structure is a particular way of organizing data in a computerso that it can be used effectively.</p></div><h3>Algorithms</h3><div><p>An algorithm is an unambiguous specification of how to solve aclass of problems. Algorithms can perform calculation, data processingand automated reasoning tasks.</p></div></div></body></html>Output:
Before clicking on any section
After clicking on Data Structures section
- Collapsible Content –To remove the default functionality, the collapsible option is set to true.
Code :<!doctype html><htmllang="en"><head><title>jQuery UI Accordion - Collapsible Content</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></script></script><script>$(function() {$( "#gfg" ).accordion({ collapsible: true});});</script></head><body><h1align="center">Welcome to Geeks for Geeks</h1><divid="gfg"><h3>Web Technology</h3><div><p>Web technology refers to the means by which computerscommunicate with each other using markup languages andmultimedia packages.</p></div><h3>CBNST</h3><div><p>Computer Based Numerical and Statistical Techniques:CBNST is use to optimize performance and minimize errorin problem-solving application.</p></div><h3>Data Structures</h3><div><p>A data structure is a particular way of organizing data in a computerso that it can be used effectively.</p></div><h3>Algorithms</h3><div><p>An algorithm is an unambiguous specification of how to solve a classof problems. Algorithms can perform calculation, data processing andautomated reasoning tasks.</p></div></div></body></html>Output:
After clicking the Data Structures option one time
After clicking the Data Structures option twice
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
