README

作者: TheCelavi
版本: 1.0.0
稳定性: 稳定
日期: 2012年11月10日
由 Run Open Code 提供
许可: 免费

dmAccordionBehaviorPlugin for Diem Extended 是一个简单的折叠面板 UI 控件。

用法

使用折叠面板最简单和最直接的方法是将小部件添加到区域，并将 dmAccordionBehaviorPlugin附加到该区域。此行为将使每个奇数小部件成为折叠面板标题，每个偶数小部件成为折叠面板内容。

但是，它可以与具有以下结构的任何 HTML 元素一起工作

<container>
	<acc-header></acc-header>
	<acc-content></acc-content>
	<acc-header></acc-header>
	<acc-content></acc-content>
	.....
</container>

为了实现这一点，您必须指定 Inner target 选择器为 <container> 标签，以便折叠面板可以识别它以及标题和内容。

注意，在此示例中，标签如 container、acc-header 和 acc-content 只是示例，当然，任何 HTML 结构都将工作，例如使用 DIV 或可能是 UL 和 LI

HTML 输出

此行为不会更改结构，它只会向标签添加一些 CSS 类。

<container class="dmAccordionBehavior theme">
	<acc-header class="accordion-title accordion-title-index-0 open"></acc-header>
	<acc-content class="accordion-content accordion-content-index-0 open"></acc-content>
	<acc-header class="accordion-title accordion-title-index-1 closed"></acc-header>
	<acc-content class="accordion-content accordion-content-index-1 closed"></acc-content>
	<acc-header class="accordion-title accordion-title-index-2 closed"></acc-header>
	<acc-content class="accordion-content accordion-content-index-2 closed"></acc-content>		
	.....
</container>

注意 theme 类在 <container> 标签上 - 它将是您在行为配置表单中选择的主题名称。在这种情况下，您可以设置折叠面板的样式。

配置和主题化

在 dmAccordionBehaviorPlugin/config/dm/config.yml 中是此行为的配置参数。

default:
  dmAccordionBehavior:
    defaults: 
      inner_target: ''
      theme: default
      event: click_open_close
      colapsable: true
      initialy_open: 1 
      animation: slide
      easing: jswing
      duration: 500
    themes: 
      default: 'dmAccordionBehaviorPlugin.default' 

如果您通过 Github 下载了行为，您可以修改此文件。如果您通过 Composer 安装了它，那么您必须使用 Symfony 配置级联来覆盖此设置。

部分 defaults 包含行为的默认设置，这是行为表单最初显示的内容。如果您想将某些其他设置显示为默认设置，请更改此处。

部分 themes 是用于主题的，并且它被配置为 theme_key: path_to_css_file。如果用户在行为表单中选择 default 主题，则折叠视图的 HTML 结构将是

<div class="dmAccordionBehavior default">
	.... titles and contents
</div>

注意添加了 default 类，即主题密钥。当然，将加载主题 CSS 文件。因此，对于您来说，只需要主题化它。