📌  相关文章
📜  MooTools-手风琴

📅  最后修改于: 2020-10-22 06:37:09             🧑  作者: Mango

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

制作新的手风琴

手风琴需要的基本元素是成对的拨动开关及其内容。让我们创建html的标题和内容对。

Toggle 1


Here is the content of toggle 1


Toggle 2


Here is the content of toggle 2

查看以下语法，以了解如何基于上述HTML结构构建手风琴。

句法

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

您将收到以下输出-

输出

手风琴选项

手风琴具有强大的功能。这些功能有助于调整选项以提供自定义输出。

显示

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

句法

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

显示

就像“显示”一样，show决定了页面加载时将打开哪个元素，但是“ show”代替了过渡，只是使内容在加载时显示而没有任何过渡。

句法

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

高度

设置为true时，在显示的元素之间切换时将发生高度过渡效果。这是您在上面看到的标准手风琴设置。

句法

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

宽度

就像height选项一样。但是，与其转换高度以显示内容，不如改变宽度。如果您将“宽度”用于标准设置（如我们上面使用的那样），则标题切换之间的间隔将保持不变，具体取决于内容的高度。然后，“内容” div将从左向右过渡以显示在该空间中。

句法

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

不透明

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

句法

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

定高

要设置固定的高度，您需要固定一个整数（例如，对于100px高的内容，您可以放置100）。如果计划固定的高度小于内容的自然高度，则应将此属性与某种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
});

总是隐藏

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

句法

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

手风琴活动

这些事件使您可以为手风琴的每个操作创建功能。

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事件。它传递一个包含content元素的变量。

句法

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');
   }
});

手风琴方法

这些方法可帮助您创建和操作手风琴节。

addSection（）

使用此方法，您可以添加一个部分（切换/内容元素对）。它的工作方式类似于我们已经看到的许多其他方法。首先引用手风琴对象，使用.addSection，然后可以调用标题的ID，内容的ID，最后声明希望新内容出现在什么位置（0是第一位置）。

句法

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

注意-当添加这样的部分时，尽管该部分将显示在索引2的位置，但实际索引将是最后一个索引＆plus; 1。因此，如果数组中有5个项目（0-4），并且添加第6个项目，则无论使用.addSection（）将其添加到何处，其索引都是5。

显示（）

这使您可以打开给定的元素。您可以通过索引选择元素（因此，如果添加了一个元素对并想要显示它，则此处将具有与上面使用的索引不同的索引。

句法

AccordionObject.display(5); //would display the newly added element

例

下面的示例说明了手风琴功能的一些效果。看一下下面的代码。


      
      
      
      
      
   
   
   
      
onActive

      
onBackground

      
      

         
Toggle 1: click here

         
Here is the content of toggle 1 Here is the content of
            toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here
            is the content of toggle 1 Here is the content of toggle 1 Here is the content
            of toggle 1 Here is the content of toggle 1

         
Toggle 2: click here

         
Here is the content of toggle 2

         
Toggle 3: click here

         
Here is the content of toggle 3

         
Toggle 4: click here

         
Here is the content of toggle 4

      

      
      

         100

输出

单击每个切换部分，然后您将找到每个动作的隐藏数据和事件指示器。