MooTools - Accordion

手风琴是MooTools提供的最受欢迎的插件.它有助于隐藏和显示数据.让我们更多地讨论它.

创建新的Accordion

手风琴所需的基本元素是成对的切换及其内容.让我们创建html的标题和内容对.

Toggle 1Here is the content of toggle 1
Toggle 2Here is the content of toggle 2

查看以下语法，了解如何根据上述HTML结构构建手风琴.

语法

  var toggles = $$('.togglers');  var content = $$('.elements');  var AccordionObject = new Fx.Accordion(toggles，content);

示例

让我们举个例子来定义Accordion的基本功能.请看下面的代码.

                                                window.addEvent('domready', function() {            var toggles = $$('.togglers');            var content = $$('.elements');            var AccordionObject = new Fx.Accordion(toggles, content);         });                     Toggle 1      Here is the content of toggle 1
      Toggle 2      Here is the content of toggle 2
      Toggle 3      Here is the content of toggle 3
      

Accordion选项

Accordion提供了巨大的功能.这些功能有助于调整选项以提供自定义输出.

显示

此选项确定页面加载时显示的元素.默认设置为0，因此第一个元素显示.要设置另一个元素，只需输入与其索引对应的另一个整数.与"show"不同，display会将元素转换为打开状态.

语法

var AccordionObject = new Accordion(toggles, content {   display: 0 //default is 0});

show

很像"显示"，show确定在页面加载时将打开哪个元素，而是转换时，"show"只会使内容显示在加载状态而不会发生任何转换.

语法

var AccordionObject = new Accordion(toggles, content {   show: 0 //default is 0});

height

设置为true时，在显示的元素之间切换时会发生高度转换效果.是你在上面看到的标准手风琴设置.

语法

var AccordionObject = new Accordion(toggles, content {   height: true //default is true});

width

这与 height 选项相同.但是，这不是转换高度来显示内容，而是有助于转换宽度.如果您使用标准设置的"width"，就像我们上面使用的那样，那么标题切换之间的空间将根据内容的高度保持不变.然后，"content"div将从左向右过渡以显示在该空间中.

语法

var AccordionObject = new Accordion(toggles, content {   width: false //default is false});

不透明度

此选项决定在隐藏或显示某些内容时是否显示不透明度过渡效果.由于我们使用上面的默认选项，您可以在那里看到效果.

语法

var AccordionObject = new Accordion(toggles, content {   opacity: true //default is true});

fixedHeight

要设置固定高度，您需要修复一个整数(例如，您可以设置100内容100px高).如果您计划使用小于内容自然高度的固定高度，则应使用某种CSS溢出属性.

语法

var AccordionObject = new Accordion(toggles, content {   fixedHeight: false //default is false});

fixedWidth

就像上面的"fixedHeight"一样，如果你给这个选项一个整数，这将设置宽度.

语法

var AccordionObject = new Accordion(toggles, content {   fixedWidth: false //default is false});

alwaysHide

此选项可让您为标题添加切换控件.如果设置为true，当您单击打开的内容标题时，内容元素将自动关闭而不会打开任何其他内容.您可以在以下示例中看到执行.

语法

var AccordionObject = new Accordion(toggles, content {   alwaysHide: false //default is false});

Accordion活动

这些活动可让您为Accordion的每个动作创建功能.

onActive

这将在您切换打开元素时执行.它将传递切换控制元素和打开的内容元素以及参数.

语法

var AccordionObject = new Accordion(toggles, content {   onActive: function(toggler, element) {      toggler.highlight('#76C83D'); //green      element.highlight('#76C83D');   }});

onBackground

当元素开始隐藏并传递正在关闭但未打开的所有其他元素时执行.

语法

var AccordionObject = new Accordion(toggles, content {   onBackground: function(toggler, element) {      toggler.highlight('#DC4F4D'); //red      element.highlight('#DC4F4D');   }});

onComplete

这是您的标准onComplete事件.它传递一个包含内容元素的变量.

语法

var AccordionObject = new Accordion(toggles, content {   onComplete: function(one, two, three, four){      one.highlight('#5D80C8'); //blue      two.highlight('#5D80C8');      three.highlight('#5D80C8');      four.highlight('#5D80C8');   }});

Accordion方法

这些方法可帮助您创建和操作Accordion章节.

addSection()

使用此方法，您可以添加一个部分(切换/内容元素对).它像我们看到的许多其他方法一样工作.首先引用手风琴对象，使用.addSection，然后你可以调用标题的id，内容的id，最后说明你希望新内容出现在哪个位置(0是第一个位置).

语法

AccordionObject.addSection('togglersID', 'elementsID', 2);

注意 : 当您添加这样的部分时，虽然它将显示在索引2的位置，但实际索引将是 +  1最后一个索引.因此，如果您的数组中有5个项目(0-4)并且添加了6 ^th ，则无论您在何处添加它，其索引都将为5.addSection();

display()

这可以让你打开一个给定的元素.您可以通过索引选择元素(因此，如果您添加了一个元素对并且想要显示它，那么此处将使用与上面使用的索引不同的索引.

语法

AccordionObject.display(5);//将显示新添加的元素

示例

以下示例解释了带有一些效果的Accordion功能.请查看以下代码.

                                                window.addEvent('domready', function() {            var toggles = $$('.togglers');            var content = $$('.elements');                        var AccordionObject = new Fx.Accordion(toggles, content, {               show: 0,               height : true,               width : false,               opacity: true,               fixedHeight: false,               fixedWidth: false,               alwaysHide: true,                              onActive: function(toggler, element) {                  toggler.highlight('#DC7633'); //green                  element.highlight('#DC7633');                  $('active').highlight('#DC7633');               },                              onBackground: function(toggler, element) {                  toggler.highlight('#AED6F1'); //red                  element.highlight('#AED6F1');                  $('background').highlight('#F4D03F');               }            });            $('display_section').addEvent('click', function(){               AccordionObject.display(4);            });         });                     onActive