Saturday, September 21, 2019

jQuery UI Accordion

jQuery UI Accordian is an expandable and collapsible content holder that is broken into sections and probably looks like tabs.

Syntax:

You can use the accordion () method in two forms:

  1. $(selector, context).accordion (options) Method  
  1. $(selector, context).accordion ("action", params) Method  

First Method

$(selector, context).accordion (options) Method:
The accordion (options) method specifies that an HTML element and its contents should be treated and managed as accordion menus. The options parameter is an object that specifies the appearance and behavior of the menu involved.

Syntax:

  1. $(selector, context).accordion (options);  
You can use one or more options at a time using Javascript object. In the case of more than one options to be provided, you have to separate them using a comma as follows:

  1. $(selector, context).accordion({option1: value1, option2: value2..... });  
Following is a list of different options that can be used with this method:

OptionDescription
activeIt specifies the index of the menu that is open when the page is first accessed. By default its value is 0. It is of two types:
boolean: if set to false will collapse all panels. This requires the collapsible option to be true.
integer: The zero-based index of the panel that is active (open). a negative value selects panels going backward from the last panel.
animateThe animate option is used to set how to animate changing panels. By default its value is {}.

this is of four types:
boolean: a value of false will disable animations.
number: this is a duration in milliseconds
string: name of easing to use with default duration.
object: animation settings with easing and duration properties.
collapsibleThis option allows users to click on the open panel's header have no effect when it is set to false. It facilitates users to close a menu by clicking on it when it is set to true. By default its value is false.
disabledIf you set this option's value true then it disables the accordion. By default its value is false.
eventThis option specifies the event used to select an accordion header. By default its value is click.
headerThis option specifies a selector or element to override the default pattern for identifying the header elements. By default its value is > li > :first-child,> :not(li):even.
heightStyleThe heightStyle option is used to control the height of accordion and panels. By default its value is auto.
Its possible values are:
auto: all panels will be set to the height of the tallest panel.
fill: expand to the available height based on the accordion's parent height.
content: each panel will be only as tall as its content.
iconsThis option is an object that defines the icons to use to the left of the header text for opened and closed panels. The icon to use for closed panels is specified as a property named header, whereas the icon to use for open panels is specified as a property named headerselected. By default its value is { "header": "ui-icon-triangle-1-e", "activeheader": "ui-icon-triangle-1-s" }.

jQuery UI Accordion() Example 1

Let's take an example of jQuery UI Accordion() method:
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8"  
  5.   <title>jQuery UI Accordion - Default functionality</title>  
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  7.   <script src="//code.jquery.com/jquery-1.10.2.js"></script>  
  8.   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  9.   <link rel="stylesheet" href="/resources/demos/style.css">  
  10.   <script>  
  11.   $(function() {  
  12.     $( "#accordion" ).accordion();  
  13.   });  
  14.   </script>  
  15. </head>  
  16. <body>  
  17. <div id="accordion">  
  18.   <h3>What is Java?</h3>  
  19.   <div>  
  20.     <p>  
  21.    Java is a simple, object oriented, concurrent and general purpose programming language.   
  22.   Some other important features of java are robust, secure, portable, interactive and high performance.   
  23.   Java was developed by Sun Microsystems in 1995 since then it has become very popular due to its feature  
  24.    like platform independent and robust in the case of memory management.  
  25.     </p>    
  26.   </div>  
  27.   <h3>Why is it called platform?</h3>  
  28.   <div>  
  29.     <p>  
  30.    Because java has its own run time environment (JRE) and API so it is called platform.  
  31.     </p>  
  32.   </div>  
  33.   <h3>Where is it used?</h3>  
  34.   <div>  
  35.     <p>  
  36.     According to Sun Microsystems, nearly 3 billion devices run java. Some of these devices   
  37.    are mobile phones, games, robotics, application in banking sector etc.  
  38.     </p>  
  39.   </div>  
  40.   <h3>Why JavaTpoint</h3>  
  41.   <div>  
  42.     <ul>  
  43.       <li>Life Time Validity</li>  
  44.       <li>Training by Java Professionals</li>  
  45.       <li>Get an opportunity to work on real time projects</li>  
  46.        <li>Interaction with Industry Experts</li>  
  47.         <li>Small Batches to focus on each student</li>  
  48.     </ul>  
  49.   </div>  
  50.   </div>  
  51.  </body>  
  52. </html>  

Second Method

The accordion ("action", params) method is used to perform an action on accordion elements, such as selecting/de-selecting the accordion menu. The action is specified as a string in the first argument (e.g., "disable" disables all menus).
Syntax:
  1. $(selector, context).accordion ("action", params);  
Following is a list of actions that can be passed.
ActionDescription
destroyThis action destroys the accordion functionality of an element completely. The elements return to their pre-init state.
disableThis action disable all menus. No click will be taken into account. This method does not accept any arguments.
enableThis action reactivate all menus. The clicks are again considered. This method does not accept any arguments.
option(optionName)This action gets the value of currently associated accordion element with the specified optionname. This takes a string value as argument.
optionThis action gets an object containing key/value pairs representing the current accordion options hash.
option(optionName, value)This action sets the value of the accordion option associated with the specified optionName.
option(options)This action sets one or more options for the accordion. Here options is a map of option-value pairs to set.
refreshThis action processes any headers and panels that were added or removed directly in the dom. it then re-computes the height of the accordion panels. Results depend on the content and the heightStyle option. This method does not accept any arguments.
widgetThis action returns the accordion widget element; the one annotated with the UI-accordion class name.

jQuery UI Accordion() method example 2

Let's take an example to demonstrate the use of option (optionName, value) method:

  1. <!doctype html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI Accordion Example </title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <script>  
  10.          $(function() {  
  11.             $( "#accordion-5" ).accordion({  
  12.                disabled: false  
  13.             });  
  14.             $("input").each(function () {  
  15.                $(this).change(function () {  
  16.                   if ($(this).attr("id") == "disableaccordion") {  
  17.                      $("#accordion-5").accordion("option", "disabled", true);  
  18.                   } else {  
  19.                      $("#accordion-5").accordion("option", "disabled", false);  
  20.                   }  
  21.                });  
  22.             });  
  23.          });  
  24.       </script>  
  25.       <style>  
  26.          #accordion-5{font-size: 14px;}  
  27.       </style>  
  28.    </head>  
  29.    <body>  
  30.       <div id="accordion-5">  
  31.          <h3>What is Java?</h3>  
  32.             <div>  
  33.                <p>  
  34.                 Java is a simple, object oriented, concurrent and general purpose programming language.   
  35.                 Some other important features of java are robust, secure, portable, interactive and high performance.   
  36.                 Java was developed by Sun Microsystems in 1995 since then it has become very popular due to its feature  
  37.                 like platform independent and robust in the case of memory management.  
  38.                </p>  
  39.             </div>  
  40.             <h3>Why is it called Platform?</h3>  
  41.             <div>  
  42.                <p>  
  43.                Because java has its own run time environment (JRE) and API so it is called platform.    
  44.                </p>  
  45.             </div>  
  46.             <h3>Where is it used?</h3>  
  47.             <div>  
  48.                <p>  
  49.              According to Sun Microsystems, nearly 3 billion devices run java. Some of these devices   
  50.              are mobile phones, games, robotics, application in banking sector etc.      
  51.                </p>  
  52.                  
  53.             </div>  
  54.           <h3>Why JavaTpoint?</h3>  
  55.               <div>  
  56.     <ul>  
  57.       <li>Life Time Validity</li>  
  58.       <li>Training by Java Professionals</li>  
  59.       <li>Get an opportunity to work on real time projects</li>  
  60.        <li>Interaction with Industry Experts</li>  
  61.         <li>Small Batches to focus on each student</li>  
  62.     </ul>  
  63.   </div>  
  64.   
  65.          </div>  
  66.          <div style="margin-top:30px">  
  67.             <input type="radio" name="disable" id="disableaccordion"    
  68.                value="disable">Disable accordion  
  69.             <input type="radio" name="disable" id="enableaccordion" checked   
  70.                value="enable">Enable accordion  
  71.          </div>  
  72.      </body>  
  73. </html>  
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

How to register multiple implementations of the same interface in Asp.Net Core?

 Problem: I have services that are derived from the same interface. public interface IService { } public class ServiceA : IService { ...