jQueryUI手风琴插件-IGI

时间：2020-02-23 14:46:17 　来源:igfitidea点击:

在本文中，我们将讨论对Web开发人员非常有用的有趣功能之一，即手风琴。
手风琴是可扩展和可折叠的内容堆叠列表，可用于在有限的空间中显示信息。

jQueryUI手风琴插件

jQueryUI提供了一个名为手风琴的插件，用于显示垂直堆叠的内容列表，例如选项卡或者缩略图，可以扩展显示与之相关的内容，也可以折叠显示的内容。

手风琴插件的简单示例

以下示例演示了jQueryUI手风琴插件的默认功能。
此示例分为四个部分。
您可以通过单击每个节标题来折叠或者展开这些节。

accordion-default.html

<!doctype html>
<html>
<head>
<title>jQuery UI Accordion - Basic Demo</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<script>
$(function() {
  $( "#accordion" ).accordion();
});
</script>

</head>
<body>

<div id="accordion">

<h3>jQuery tutorial</h3>
<div>
  <p>
  This Tutorial covers all the basic jQuery functionality.
   We have also included advanced topics like jQuery plugins.
  </p>
  <ul>
    <li>jQuery Events</li>
    <li>jQuery Animations</li>
    <li>jQuery plugins</li>
  </ul>
</div>
<h3>Java Collections Framework Tutorial</h3>
<div>
  <p>
  Java Collections are one of the core frameworks of Java language.
  We use Collections almost in every application, this tutorial will
  explain Java Collections Framework in detail. Learn about collections
  framework interfaces, classes and algorithms in detail.
  </p>
</div>
<h3>Java XML Tutorial</h3>
<div>
  <p>
  XML is widely used technology to store or transport data and it’s
  platform independent. Java provides various API’s to read, write or
  manipulate XML data. This tutorial explains about DOM Parser, SAX Parser,
  JDOM Parser, StAX Parser and misc xml tasks.
  </p>
</div>
<h3>Java Regular Expression Tutorial</h3>
<div>
  <p>
  A regular expression defines a pattern for a String. Regular Expressions
  can be used to search, edit or manipulate text. A tutorial covering
  java.util.regex package classes, regular expression symbols, metacharacters,
  quantifiers and capturing groups in detail with example.
  </p>
</div>

</div>

</body>
</html>

您将在浏览器中看到以下输出。
第一部分默认显示其内容。
单击任何部分以切换内容显示。

jQueryUI手风琴插件提供了不同的选项和方法来自定义此小部件，以改善我们上的用户体验。
我们将在接下来的部分中探索所有可用的选项和方法。

jQueryUI手风琴选项

下表简要描述了可用的手风琴插件选项及其用法。

Options	Syntax	Description
active	$( ".selector"; ).accordion({ active: 2 });	Denotes which panel is currently open. Supports both Integer and boolean return types.False: collapse all the pannels, provided collapsible option is true. Default integer value is zero,the first panel.
animate	$( ".selector"; ).accordion({ animate: 200 });	Determines how to animate the collapsing and expanding of content panels.
collapsible	$( ".selector"; ).accordion({ collapsible: true });	Collapse all the active panels at once if it is set to true.
disabled	$( ".selector"; ).accordion({ disabled: true });	Setting to true will disable the accordion.
event	$( ".selector"; ).accordion({ event: "mouseover"; });	Specifies the event used to expand or collapse the panels. You can specify multiple events separated by comma.
header	$( ".selector"; ).accordion({ header: "h2"; });	Specifies the selector for header element. Default: "> li > :first-child,> :not(li):even";
heightStyle	$( ".selector"; ).accordion({ heightStyle: "fill"; });	This option controls the height of the accordion and panels. "fill";, "auto";, and "content"; are the possible values.
icons	$( ".selector"; ).accordion({ icons: { "header";: "ui-icon-plus";, "activeHeader";: "ui-icon-minus"; } });	This option is used to specify the icons used for headers and active headers.

在应用程序中使用手风琴插件时，可以使用这些选项。
现在将研究可用于定制手风琴插件的方法。

jQueryUI手风琴方法

下表简要描述了可用的手风琴插件方法及其用法。

Methods	Usage	Description
destroy()	$(".selector";).accordion( "destroy";);	This will remove the accordion function completely.
disable()	$( ".selector";).accordion( "disable";);	This method is used to disable the accordion.
enable()	$( ".selector"; ).accordion( "enable"; );	Invoking this method enables the accordion.
instance()	$(".selector";).accordion( "instance";);	This method is used to retrieve the instance object of the accordion.
option( optionName )	$( ".selector"; ).accordion( "option";, "disabled"; );	This is used to get the current value specified by the option name.
option( options )	$( ".selector"; ).accordion( "option";, { disabled: true } );	This is used to set one or more options.
refresh()	$( ".selector"; ).accordion( "refresh"; );	This method process headers and panels that are added or removed directly in the DOM and the height of the accordion panels are recomputed. The result of this process depends on the heightStyle option.
widget()	$( ".selector"; ).accordion( "widget"; );	This method returns the jQuery object that contains the accordion.

这些是jQueryUI手风琴插件中的可用方法。
现在将研究可用于定制手风琴插件的事件。

jQueryUI手风琴活动

在本节中，我们将研究手风琴插件事件方法。
下表简要描述了手风琴事件方法。

Event Method	Syntax	Description
activate( event, ui )	$( ".selector"; ).accordion({,activate: function( event, ui ) {}});	This method is fired after the activation of a panel.
beforeActivate( event, ui )	$( ".selector"; ).accordion({,beforeActivate: function( event, ui ) {}});	This method is fired before the activation of the panel
create( event, ui )	$( ".selector"; ).accordion({,create: function( event, ui ) {}});	This method is fired on creation of accordion.

jQueryUI手风琴实例

在本节中，您将看到使用某些选项的手风琴插件的一些示例。

使用heightStyle选项

以下示例演示了如何使用heightStyle选项。
在此示例中，您可以看到手风琴的尺寸自动设置为其父容器的高度，以填充该容器分配的垂直空间。
我们使用heightStyle：" fill"选项来实现。

accordion-heightStyle.html

<!doctype html>
<html>
<head>
<title>jQuery UI Accordion - HeightStyle</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<script>
$(function() {
  $( "#accordion" ).accordion({
    heightStyle: "fill"
  });
});
</script>

</head>
<body>

<div id="accordion">

<h3>jQuery tutorial</h3>
<div>
  <p>
  This Tutorial covers all the basic jQuery functionality.
   We have also included advanced topics like jQuery plugins.
  </p>
  <ul>
    <li>jQuery Events</li>
    <li>jQuery Animations</li>
    <li>jQuery plugins</li>
  </ul>
</div>
<h3>Java Collections Framework Tutorial</h3>
<div>
  <p>
  Java Collections are one of the core frameworks of Java language.
  We use Collections almost in every application, this tutorial will
  explain Java Collections Framework in detail. Learn about collections
  framework interfaces, classes and algorithms in detail.
  </p>
  <p>
  Java Collections are one of the core frameworks of Java language.
  We use Collections almost in every application, this tutorial will
  explain Java Collections Framework in detail. Learn about collections
  framework interfaces, classes and algorithms in detail.
  </p>
</div>
<h3>Java XML Tutorial</h3>
<div>
  <p>
  XML is widely used technology to store or transport data and it’s
  platform independent. Java provides various API’s to read, write or
  manipulate XML data. This tutorial explains about DOM Parser, SAX Parser,
  JDOM Parser, StAX Parser and misc xml tasks.
  </p>
  <p>
  XML is widely used technology to store or transport data and it’s
  platform independent. Java provides various API’s to read, write or
  manipulate XML data. This tutorial explains about DOM Parser, SAX Parser,
  JDOM Parser, StAX Parser and misc xml tasks.
  </p>
</div>
<h3>Java Regular Expression Tutorial</h3>
<div>
  <p>
  A regular expression defines a pattern for a String. Regular Expressions
  can be used to search, edit or manipulate text. A tutorial covering
  java.util.regex package classes, regular expression symbols, metacharacters,
  quantifiers and capturing groups in detail with example.
  </p>
</div>

</div>

</body>
</html>

使用事件选项

下面的示例演示事件选项的用法。
在这个例子中，我们使用带有该选项的mouseover事件。

accordion-eventOption.html

<!doctype html>
<html>
<head>
<title>jQuery UI Accordion - Event Option</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<script>
$(function() {
  $( "#accordion" ).accordion({
    event: "mouseover"
  });
});
</script>

</head>
<body>

<div id="accordion">

<h3>jQuery tutorial</h3>
<div>
  <p>
  This Tutorial covers all the basic jQuery functionality.
   We have also included advanced topics like jQuery plugins.
  </p>
  <ul>
    <li>jQuery Events</li>
    <li>jQuery Animations</li>
    <li>jQuery plugins</li>
  </ul>
</div>
<h3>Java Collections Framework Tutorial</h3>
<div>
  <p>
  Java Collections are one of the core frameworks of Java language.
  We use Collections almost in every application, this tutorial will
  explain Java Collections Framework in detail. Learn about collections
  framework interfaces, classes and algorithms in detail.
  </p>
</div>
<h3>Java XML Tutorial</h3>
<div>
  <p>
  XML is widely used technology to store or transport data and it’s
  platform independent. Java provides various API’s to read, write or
  manipulate XML data. This tutorial explains about DOM Parser, SAX Parser,
  JDOM Parser, StAX Parser and misc xml tasks.
  </p>
  <p>
  XML is widely used technology to store or transport data and it’s
  platform independent. Java provides various API’s to read, write or
  manipulate XML data. This tutorial explains about DOM Parser, SAX Parser,
  JDOM Parser, StAX Parser and misc xml tasks.
  </p>
</div>
<h3>Java Regular Expression Tutorial</h3>
<div>
  <p>
  A regular expression defines a pattern for a String. Regular Expressions
  can be used to search, edit or manipulate text. A tutorial covering
  java.util.regex package classes, regular expression symbols, metacharacters,
  quantifiers and capturing groups in detail with example.
  </p>
</div>

</div>

</body>
</html>

jQueryUI手风琴插件