Amaze UI

Web 组件

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 am-disabled">
        <dt class="am-accordion-title">
          就这样恣意的活着
        </dt>
        <dd class="am-accordion-bd am-collapse am-in">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            置身人群中 <br/> 你只需要被淹没 享受 沉默 <br/> 退到人群后 <br/> 你只需给予双手 微笑 等候
          </div>
        </dd>
      </dl>
      <dl class="am-accordion-item">
        <dt class="am-accordion-title">
          让生命去等候，去等候，去等候，去等候
        </dt>
        <dd class="am-accordion-bd am-collapse ">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            走在忠孝东路 <br/> 徘徊在茫然中 <br/> 在我的人生旅途 <br/> 选择了多少错误 <br/> 我在睡梦中惊醒 <br/> 感叹悔言无尽 <br/> 恨我不能说服自己 <br/> 接受一切教训 <br/> 让生命去等候 <br/> 等候下一个漂流 <br/> 让生命去等候 <br/>等候下一个伤口
          </div>
        </dd>
      </dl>
      <dl class="am-accordion-item">
        <dt class="am-accordion-title">
          我就这样告别山下的家
        </dt>
        <dd class="am-accordion-bd am-collapse ">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
          </div>
        </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-bd am-collapse am-in">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            置身人群中 <br/> 你只需要被淹没 享受 沉默 <br/> 退到人群后 <br/> 你只需给予双手 微笑 等候
          </div>
        </dd>
      </dl>
      <dl class="am-accordion-item">
        <dt class="am-accordion-title">
          让生命去等候，去等候，去等候，去等候
        </dt>
        <dd class="am-accordion-bd am-collapse ">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            走在忠孝东路 <br/> 徘徊在茫然中 <br/> 在我的人生旅途 <br/> 选择了多少错误 <br/> 我在睡梦中惊醒 <br/> 感叹悔言无尽 <br/> 恨我不能说服自己 <br/> 接受一切教训 <br/> 让生命去等候 <br/> 等候下一个漂流 <br/> 让生命去等候 <br/>等候下一个伤口
          </div>
        </dd>
      </dl>
      <dl class="am-accordion-item">
        <dt class="am-accordion-title">
          我就这样告别山下的家
        </dt>
        <dd class="am-accordion-bd am-collapse ">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
          </div>
        </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-bd am-collapse am-in">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            置身人群中 <br/> 你只需要被淹没 享受 沉默 <br/> 退到人群后 <br/> 你只需给予双手 微笑 等候
          </div>
        </dd>
      </dl>
      <dl class="am-accordion-item">
        <dt class="am-accordion-title">
          让生命去等候，去等候，去等候，去等候
        </dt>
        <dd class="am-accordion-bd am-collapse ">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            走在忠孝东路 <br/> 徘徊在茫然中 <br/> 在我的人生旅途 <br/> 选择了多少错误 <br/> 我在睡梦中惊醒 <br/> 感叹悔言无尽 <br/> 恨我不能说服自己 <br/> 接受一切教训 <br/> 让生命去等候 <br/> 等候下一个漂流 <br/> 让生命去等候 <br/>等候下一个伤口
          </div>
        </dd>
      </dl>
      <dl class="am-accordion-item">
        <dt class="am-accordion-title">
          我就这样告别山下的家
        </dt>
        <dd class="am-accordion-bd am-collapse ">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
          </div>
        </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 2.3 新增
      "disabled": null // 是否禁用当前面板，如果需要禁用则设置为 true，否则不用设置此项，禁用以后此面板将保持默认状态，不响应用户操作
    }
  ]
}

注意事项

  • 不要在 .am-accordion-bd 上添加上下 padding/margin/border 样式。
侧栏导航
×
Amaze UI 微信
在微信上关注我们