Accordion 折叠面板

手风琴折叠面板组件。

组件演示

default（圆角灰边）

就这样恣意的活着: 置身人群中
你只需要被淹没享受沉默
退到人群后
你只需给予双手微笑等候

让生命去等候，去等候，去等候，去等候: 走在忠孝东路
徘徊在茫然中
在我的人生旅途
选择了多少错误
我在睡梦中惊醒
感叹悔言无尽
恨我不能说服自己
接受一切教训
让生命去等候
等候下一个漂流
让生命去等候
等候下一个伤口

我就这样告别山下的家: 我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？

<section data-am-widget="accordion" class="am-accordion am-accordion-default"
data-am-accordion='{ "multiple": true }'>
  <dl class="am-accordion-item am-active">
    <dt class="am-accordion-title">就这样恣意的活着</dt>
    <dd class="am-accordion-content am-collapse am-in">置身人群中
      <br/>你只需要被淹没 享受 沉默
      <br/>退到人群后
      <br/>你只需给予双手 微笑 等候</dd>
  </dl>
  <dl class="am-accordion-item">
    <dt class="am-accordion-title">让生命去等候，去等候，去等候，去等候</dt>
    <dd class="am-accordion-content am-collapse ">走在忠孝东路
      <br/>徘徊在茫然中
      <br/>在我的人生旅途
      <br/>选择了多少错误
      <br/>我在睡梦中惊醒
      <br/>感叹悔言无尽
      <br/>恨我不能说服自己
      <br/>接受一切教训
      <br/>让生命去等候
      <br/>等候下一个漂流
      <br/>让生命去等候
      <br/>等候下一个伤口</dd>
  </dl>
  <dl class="am-accordion-item">
    <dt class="am-accordion-title">我就这样告别山下的家</dt>
    <dd class="am-accordion-content am-collapse ">我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？</dd>
  </dl>
</section>

basic（极简无边框）

就这样恣意的活着: 置身人群中
你只需要被淹没享受沉默
退到人群后
你只需给予双手微笑等候

让生命去等候，去等候，去等候，去等候: 走在忠孝东路
徘徊在茫然中
在我的人生旅途
选择了多少错误
我在睡梦中惊醒
感叹悔言无尽
恨我不能说服自己
接受一切教训
让生命去等候
等候下一个漂流
让生命去等候
等候下一个伤口

我就这样告别山下的家: 我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？

<section data-am-widget="accordion" class="am-accordion am-accordion-basic"
data-am-accordion='{  }'>
  <dl class="am-accordion-item am-active">
    <dt class="am-accordion-title">就这样恣意的活着</dt>
    <dd class="am-accordion-content am-collapse am-in">置身人群中
      <br/>你只需要被淹没 享受 沉默
      <br/>退到人群后
      <br/>你只需给予双手 微笑 等候</dd>
  </dl>
  <dl class="am-accordion-item">
    <dt class="am-accordion-title">让生命去等候，去等候，去等候，去等候</dt>
    <dd class="am-accordion-content am-collapse ">走在忠孝东路
      <br/>徘徊在茫然中
      <br/>在我的人生旅途
      <br/>选择了多少错误
      <br/>我在睡梦中惊醒
      <br/>感叹悔言无尽
      <br/>恨我不能说服自己
      <br/>接受一切教训
      <br/>让生命去等候
      <br/>等候下一个漂流
      <br/>让生命去等候
      <br/>等候下一个伤口</dd>
  </dl>
  <dl class="am-accordion-item">
    <dt class="am-accordion-title">我就这样告别山下的家</dt>
    <dd class="am-accordion-content am-collapse ">我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？</dd>
  </dl>
</section>

gapped（扁平分离边框）

就这样恣意的活着: 置身人群中
你只需要被淹没享受沉默
退到人群后
你只需给予双手微笑等候

让生命去等候，去等候，去等候，去等候: 走在忠孝东路
徘徊在茫然中
在我的人生旅途
选择了多少错误
我在睡梦中惊醒
感叹悔言无尽
恨我不能说服自己
接受一切教训
让生命去等候
等候下一个漂流
让生命去等候
等候下一个伤口

我就这样告别山下的家: 我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？

<section data-am-widget="accordion" class="am-accordion am-accordion-gapped"
data-am-accordion='{  }'>
  <dl class="am-accordion-item am-active">
    <dt class="am-accordion-title">就这样恣意的活着</dt>
    <dd class="am-accordion-content am-collapse am-in">置身人群中
      <br/>你只需要被淹没 享受 沉默
      <br/>退到人群后
      <br/>你只需给予双手 微笑 等候</dd>
  </dl>
  <dl class="am-accordion-item">
    <dt class="am-accordion-title">让生命去等候，去等候，去等候，去等候</dt>
    <dd class="am-accordion-content am-collapse ">走在忠孝东路
      <br/>徘徊在茫然中
      <br/>在我的人生旅途
      <br/>选择了多少错误
      <br/>我在睡梦中惊醒
      <br/>感叹悔言无尽
      <br/>恨我不能说服自己
      <br/>接受一切教训
      <br/>让生命去等候
      <br/>等候下一个漂流
      <br/>让生命去等候
      <br/>等候下一个伤口</dd>
  </dl>
  <dl class="am-accordion-item">
    <dt class="am-accordion-title">我就这样告别山下的家</dt>
    <dd class="am-accordion-content am-collapse ">我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？</dd>
  </dl>
</section>

使用方法

直接使用

拷贝演示中的代码，粘贴到 Amaze UI HTML 模板（点此下载） <body> 区域；
将示例代码中的内容替换为自己的内容。

使用 Handlebars

首先，引入 Handlebars 库及 amui.widget.helper.js（可参考 Amaze UI HTML 模板里的 widget.html 文件）。

接下来有两种方式来渲染数据。

第一种，将组件调用代码写在模板里面：

<script type="text/x-handlebars-template" id="my-tpl">
  {{>accordion accordionData}}
</script>

然后获取模板内容，传入数据渲染并插入到页面中。

$(function() {
  var $tpl = $('#my-tpl'),
      tpl = $tpl.text(),
      template = Handlebars.compile(tpl),
      data = {
        accordionData: {
          "theme": "basic",
          "content": [
            {
              "title": "标题一",
              "content": "内容一",
              "active": true
            },
            {
              "title": "标题二",
              "content": "内容二"
            },
            {
              "title": "标题三",
              "content": "内容三"
            }
          ]
        }
      },
      html = template(data);

  $tpl.before(html);
});

渲染出来的 HTML 如下：

<section data-am-widget="accordion" class="am-accordion am-accordion-basic doc-accordion-class"
         id="doc-accordion-example" data-accordion-settings="{  }">
  <dl class="am-accordion-item am-active">
    <dt class="am-accordion-title">标题一</dt>
    <dd class="am-accordion-content">内容一</dd>
  </dl>
  <dl class="am-accordion-item">
    <dt class="am-accordion-title">标题二</dt>
    <dd class="am-accordion-content">内容二</dd>
  </dl>
  <dl class="am-accordion-item">
    <dt class="am-accordion-title">标题三</dt>
    <dd class="am-accordion-content">内容三</dd>
  </dl>
</section>

如果使用的组件较多或者还有组件以外的自定义模板，建议使用上面的方法，将模板分离出来，便于维护。

第二种，直接将组件调用代码传给 Handlebars：

var template = Handlebars.compile('{{>accordion}}'),
    data = {
      accordionData: {
        "id": "doc-accordion-example",
        "className": "doc-accordion-class",
        "theme": "basic",
        "content": [
          {
            "title": "标题一",
            "content": "内容一",
            "active": true
          },
          {
            "title": "标题二",
            "content": "内容二"
          },
          {
            "title": "标题三",
            "content": "内容三"
          }
        ]
      }
    },
    html = template(data.accordionData);

$('body').append(html);

云适配 WebIDE

将组件拖入编辑界面；
点击右侧面板里的【数据采集】按钮，按以下格式采集数据。

var data = [
  {
    "title": "",    // 面板标题 支持 html
    "content": ""   // 面板内容 支持 html
  }
];

return data;

数据接口

{
  // id
  "id": "",

  // 自定义 class
  "className": "",

  // 主题
  "theme": "",

  "options": {
    "multiple": false // 是否允许同时展开多个面板，默认为 FALSE
  },

  // 内容（*为必备项）
  "content": [
    {
      "title": "", // 标题，支持 html
      "content": "", // 内容，支持 html
      "active": false // 是否激活当前面板，如果需要激活则设置为 true，否则可不用设置此项
    }
  ]
}

Amaze UI

Web 组件