Categories
JqueryUI教程

jQuery UI Accordian

jQuery UI Accordian

jQuery UI Accordian是一个可扩展且可折叠的内容持有人,它分为几部分,可能看起来像标签。

句法:

您可以通过两种形式使用手风琴()方法:

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

第一种方法

$(selector,context).accordion(options)方法:

手风琴(选项)方法指定应将HTML元素及其内容视为手风琴菜单进行管理。 options参数是一个对象,用于指定所涉及菜单的外观和行为。

句法:

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

您可以使用Javascript对象一次使用一个或多个选项。如果要提供多个选项,则必须使用逗号将它们分开,如下所示:

$(selector, context).accordion({option1: value1, option2: value2..... });

以下是可与该方法一起使用的不同选项的列表:

Option Description
active It 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.
animate The 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.
collapsible This 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.
disabled If you set this option’s value true then it disables the accordion. By default its value is false.
event This option specifies the event used to select an accordion header. By default its value is click.
header This 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.
heightStyle The 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.
icons This 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()示例1

让我们以jQuery UI Accordion()方法为例:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>
<div id="accordion">
  <h3>What is Java?</h3>
  <div>
    <p>
   Java is a simple, object oriented, concurrent and general purpose programming language. 
  Some other important features of java are robust, secure, portable, interactive and high performance. 
  Java was developed by Sun Microsystems in 1995 since then it has become very popular due to its feature
   like platform independent and robust in the case of memory management.
    </p>    
  </div>
  <h3>Why is it called platform?</h3>
  <div>
    <p>
   Because java has its own run time environment (JRE) and API so it is called platform.
    </p>
  </div>
  <h3>Where is it used?</h3>
  <div>
    <p>
    According to Sun Microsystems, nearly 3 billion devices run java. Some of these devices 
   are mobile phones, games, robotics, application in banking sector etc.
    </p>
  </div>
  <h3>Why JavaTpoint</h3>
  <div>
    <ul>
      <li>Life Time Validity</li>
      <li>Training by Java Professionals</li>
      <li>Get an opportunity to work on real time projects</li>
       <li>Interaction with Industry Experts</li>
        <li>Small Batches to focus on each student</li>
    </ul>
  </div>
  </div>
 </body>
</html>

第二种方法

手风琴(“操作”,参数)方法用于对手风琴元素执行操作,例如选择/取消选择手风琴菜单。该动作在第一个参数中指定为字符串(例如,“ disable”禁用所有菜单)。

句法:

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

以下是可以通过的操作列表。

Action Description
destroy This action destroys the accordion functionality of an element completely. The elements return to their pre-init state.
disable This action disable all menus. No click will be taken into account. This method does not accept any arguments.
enable This 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.
option This 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.
refresh This 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.
widget This action returns the accordion widget element; the one annotated with the UI-accordion class name.

jQuery UI Accordion()方法示例2

让我们以一个示例来演示选项(optionName,value)方法的使用:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#accordion-5" ).accordion({
               disabled: false
            });
            $("input").each(function () {
               $(this).change(function () {
                  if ($(this).attr("id") == "disableaccordion") {
                     $("#accordion-5").accordion("option", "disabled", true);
                  } else {
                     $("#accordion-5").accordion("option", "disabled", false);
                  }
               });
            });
         });
      </script>
      <style>
         #accordion-5{font-size: 14px;}
      </style>
   </head>
   <body>
      <div id="accordion-5">
         <h3>What is Java?</h3>
            <div>
               <p>
                Java is a simple, object oriented, concurrent and general purpose programming language. 
                Some other important features of java are robust, secure, portable, interactive and high performance. 
                Java was developed by Sun Microsystems in 1995 since then it has become very popular due to its feature
                like platform independent and robust in the case of memory management.
               </p>
            </div>
            <h3>Why is it called Platform?</h3>
            <div>
               <p>
               Because java has its own run time environment (JRE) and API so it is called platform.  
               </p>
            </div>
            <h3>Where is it used?</h3>
            <div>
               <p>
             According to Sun Microsystems, nearly 3 billion devices run java. Some of these devices 
             are mobile phones, games, robotics, application in banking sector etc.    
               </p>
               
            </div>
          <h3>Why JavaTpoint?</h3>
              <div>
    <ul>
      <li>Life Time Validity</li>
      <li>Training by Java Professionals</li>
      <li>Get an opportunity to work on real time projects</li>
       <li>Interaction with Industry Experts</li>
        <li>Small Batches to focus on each student</li>
    </ul>
  </div>

         </div>
         <div style="margin-top:30px">
            <input type="radio" name="disable" id="disableaccordion"  
               value="disable">Disable accordion
            <input type="radio" name="disable" id="enableaccordion" checked 
               value="enable">Enable accordion
         </div>
     </body>
</html>
error: 内容受到保护 !!