1. 简介

    ECL 是一套纯 CSS 框架,是各页面组件的构成基础。

    它由三部分组成:元素、组件、布局。

    1. 元素(Element)

      元素是指页面的内容单元。

      元素分为实体元素、功能性元素:
      实体元素是一个个独立的实体,直接嵌入到组件的各个位置即可。
      功能性元素则是附加在已有元素之上,使元素产生新的特性。

    2. 组件(Component)

      组件是指用于拼装页面的块。

      组件分为一般组件、容器组件、独立组件。
      类似标题组件(c_title)、表单组件(c_form)、表格组件(c_table)这样依次排列在界面上的组件,属于一般组件,一般组件必须放置在一定的容器之中
      容器组件用于容纳一般组件,包括:区域组件(c_box)、选项组件(c_option)、弹出组件(c_popup)、层次结构图(c_level),容器组件中必须包含一般组件
      独立组件独立存在,拥有固有的结构,不用在容器之中,也无法包容其他组件,包括:右键菜单(c_contextMenu)、冒泡提示(c_toolTip)。
      除滚动条(c_scroll)组件功能特殊、容器中必须放置一般组件外,组件之间,不得互相嵌套!

    3. 布局(Layout)

      布局用于控制元素、组件在空间上的排布与间距的控制。

  2. 使用

    1. 选用布局、插入容器

      <div class="c_box"></div>
      <div class="l_col">
      	<div class="l_left">
      		<div class="c_box"></div>
      	</div>
      	<div class="l_auto">
      		<div class="c_box"></div>
      	</div>
      </div>
      <div class="c_box"></div>
      
    2. 插入一般组件

      <div class="c_box">
      	<div class="c_form">
      		...
      	</div>
      </div>
      <div class="l_col">
      	<div class="l_left">
      		<div class="c_box">
      			<div class="c_title">
      				...
      			</div>
      			<div class="c_tree">
      				...
      			</div>
      		</div>
      	</div>
      	<div class="l_auto">
      		<div class="c_box">
      			<div class="c_title">
      				...
      			</div>
      			<div class="c_list">
      				...
      			</div>
      			<div class="c_title">
      				...
      			</div>
      			<div class="c_table">
      				...
      			</div>
      		</div>
      	</div>
      </div>
      <div class="c_box">
      	<div class="c_submit">
      		...
      	</div>
      </div>
      
    3. 修改组件参数、插入元素