1. 基础外观

    • ECL
      • 元素
        • 按钮
        • 输入框
        • 图标
      • 组件
        • 表格
        • 表单
        • 日历
          • 带农历的日历
      • 布局

    基础结构

    <div class="c_level">
    	<ul class="c_levelUl">
    		<li class="c_levelLi">
    			<div class="c_levelNode">
    				<span class="c_levelText"><span>ECL</span></span>
    				<span class="c_levelLeft"></span>
    				<span class="c_levelRight"></span>
    			</div>
    		</li>
    	</ul>
    </div>
    

    由于 IE6 对 CSS 渲染支持的严重不足,该组件必须借助 JS 来完成对 IE6 的兼容。以下以最简形式描述 JS 的算法过程:

    <!--[if IE 6]>
    <script>
    	var level = document.getElementById("level");
    	var lis = level.getElementsByTagName("li");
    	window.onload = function (){
    		for ( i = 0 ; i < lis.length; i++)
    		{
    			lis[i].style.width = lis[i].offsetWidth;
    			if ( lis[i].className == "c_levelLi c_levelFirst")
    			{
    				lis[i].children[0].children[1].style.borderTopWidth = "0";
    				//每组节点的第一个节点去掉左线
    			}
    			if ( lis[i].className == "c_levelLi c_levelLast")
    			{
    				lis[i].children[0].children[2].style.borderTopWidth = "0";
    				//每组节点的最末节点去掉右线
    			}
    			if ( lis[i].className == "c_levelLi c_levelFirst c_levelLast")
    			{
    				lis[i].children[0].children[1].style.borderTopWidth = "0";
    				lis[i].children[0].children[2].style.borderTopWidth = "0";
    				//当子节点唯一时左右线均去掉
    			}
    		}
    		var levelHTML = level.innerHTML;
    		level.innerHTML = levelHTML;
    		//刷新 HTML
    	}
    </script>
    <![endif]-->
    

    增加子节点

    <div class="c_level">
    	<div class="c_levelLine"></div>
    	<ul class="c_levelUl">
    		<li class="c_levelLi">
    			<div class="c_levelNode">
    				<span class="c_levelText"><span>ECL</span></span>
    				<span class="c_levelLeft"></span>
    				<span class="c_levelRight"></span>
    			</div>
    			<div class="c_levelLine"></div>
    			<ul class="c_levelUl">
    				<li class="c_levelLi c_levelFirst">
    					<div class="c_levelNode">
    						<span class="c_levelText"><span>元素</span></span>
    						<span class="c_levelLeft"></span>
    						<span class="c_levelRight"></span>
    					</div>
    					<div class="c_levelLine"></div>
    					<ul class="c_levelUl">
    						<li class="c_levelLi c_levelFirst">
    							<div class="c_levelNode">
    								<span class="c_levelText"><span>按钮</span></span>
    								<span class="c_levelLeft"></span>
    								<span class="c_levelRight"></span>
    							</div>
    						</li>
    						<li class="c_levelLi">
    							<div class="c_levelNode">
    								<span class="c_levelText"><span>输入框</span></span>
    								<span class="c_levelLeft"></span>
    								<span class="c_levelRight"></span>
    							</div>
    						</li>
    						<li class="c_levelLi c_levelLast">
    							<div class="c_levelNode">
    								<span class="c_levelText"><span>图标</span></span>
    								<span class="c_levelLeft"></span>
    								<span class="c_levelRight"></span>
    							</div>
    						</li>
    					</ul>
    				</li>
    			</ul>
    		</li>
    	</ul>
    </div>
    

    增加子节点时应注意,每一组节点的第一个和最后一个分别要加上样式:c_levelFirst 与 c_levelLast

  2. 扩展外观

    1. 图文节点

      • ECL
        • 元素
        • 组件
        • 布局
      <div class="c_level">
      	<ul class="c_levelUl">
      		<li class="c_levelLi">
      			<div class="c_levelNode">
      				<span class="c_levelGraphic">
      					<span class="c_levelGraphicPic"><img src="img/level.png" /></span>
      					<span class="c_levelGraphicText">布局</span>
      				</span>
      				<span class="c_levelLeft"></span>
      				<span class="c_levelRight"></span>
      			</div>
      		</li>
      	</ul>
      </div>
      
    2. 通用节点

      • ECL
        • 元素
          订单开通数:6,728 个,工单开通数:10,826 个,成员开通数:5,259,617 个。
        • 组件
          表头 表头 表头
               
               
               
               
        • 布局
          表头 表头 表头
               
               
               
               
      <div class="c_level">
      	<ul class="c_levelUl">
      		<li class="c_levelLi">
      			<div class="c_levelNode">
      				<span class="c_levelBox">
      					<!-- 这里放置任意组件 -->
      				</span>
      				<span class="c_levelLeft"></span>
      				<span class="c_levelRight"></span>
      			</div>
      		</li>
      	</ul>
      </div>