MooTools - 手风琴

上一页
下一页

手风琴是 MooTools 提供的最流行的插件。它有助于隐藏和显示数据。让我们进一步讨论它。

创建新的手风琴

手风琴所需的基本元素是一对切换按钮及其内容。让我们创建 HTML 中的标题和内容对。

<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>

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

语法

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

示例

让我们举一个定义手风琴基本功能的例子。查看以下代码。

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            list-style: none;
            width: 300px;
            background-color: #222;
            border: 1px solid;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var toggles = $$('.togglers');
            var content = $$('.elements');
            var AccordionObject = new Fx.Accordion(toggles, content);
         });
      </script>
   </head>
   
   <body>
      <h3 class = "togglers">Toggle 1</h3>
      <p class = "elements">Here is the content of toggle 1</p>
      <h3 class = "togglers">Toggle 2</h3>
      <p class = "elements">Here is the content of toggle 2</p>
      <h3 class = "togglers">Toggle 3</h3>
      <p class = "elements">Here is the content of toggle 3</p>
   </body>
   
</html>

您将收到以下输出 -

输出

手风琴选项

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

display

此选项确定页面加载时显示哪个元素。默认设置为 0，因此显示第一个元素。要设置其他元素，只需输入与之对应的另一个整数即可。与“show”不同，display 会过渡打开元素。

语法

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

show

与“display”类似，“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
});

opacity

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

语法

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

fixedHeight

要设置固定高度，您需要设置一个整数（例如，您可以将内容设置为 100px 高的 100）。如果您计划使用小于内容自然高度的固定高度，则应将其与某种 CSS overflow 属性一起使用。

语法

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

手风琴事件

这些事件允许您为手风琴的每个操作创建自己的功能。

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

手风琴方法

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

addSection()

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

语法

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

注意 - 当您像这样添加一个部分时，尽管它会显示在索引 2 的位置，但实际索引将比最后一个索引 +1。因此，如果您在数组中包含 5 个项目 (0-4)，并且您添加了第 6 个，则无论您使用 .addSection() 在哪里添加它，其索引都将为 5。

display()

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

语法

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

示例

以下示例解释了手风琴功能及其一些效果。查看以下代码。

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            color: #222;
            margin: 0;
            padding: 2px 5px;
            background: #EC7063;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            font-size: 15px;
            font-weight: normal;
            font-family: 'Andale Mono', sans-serif;
         }
         
         .ind {
            background: #2E86C1;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            font-size: 20px;
            color: aliceblue;
            font-weight: normal;
            font-family: 'Andale Mono', sans-serif;
            width: 200px;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         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);
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "active" class = "ind">onActive</div>
      <div id = "background" class = "ind">onBackground</div>
      
      <div id = "accordion_wrap">
         <p class = "togglers">Toggle 1: click here</p>
         <p class = "elements">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</p>
         <p class = "togglers">Toggle 2: click here</p>
         <p class = "elements">Here is the content of toggle 2</p>
         <p class = "togglers">Toggle 3: click here</p>
         <p class = "elements">Here is the content of toggle 3</p>
         <p class = "togglers">Toggle 4: click here</p>
         <p class = "elements">Here is the content of toggle 4</p>
      </div>
      
      <p>
         100
         <button id = "display_section" class = "btn btn-primary">
            display section
         </button>
      </p>
      
   </body>
</html>

输出

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

打印页面
上一页
下一页
广告