规范

目录
概述
单图片区块
手动商品区块
自动商品区块
单图片区块
多图片区块
品牌区块
文本区域

概述

我们先展示一段非常简化的、但符合规范的面板(Panel）的html片段：

<div class="panel" >
            <!-- 左侧边栏-->
            <div class="layout"" layout_id="slide">
                <div class="edit-enable block single_image-block "   block_type="SINGLE_IMAGE">
                    <div class="single_image">
                        <a><img /></a>    
                    </div>
                </div>
            </div>

            <!-- 右侧主体-->
            <div class="main layout" layout_id="main">

                <!-- 商品列表块-->
                <ul class="goods-list">
                    <li class="edit-enable block" block_type="MANUAL_GOODS" block_id="mg_1">
                        <div class="goods">
                           <div class="g-img">  <img width="130" height="130"  src=""   style="display: inline;"> </a> </div>
                           <div class="g-name">  </div>
                           <div class="g-price"><i>￥</i><span></span>
                        </div>
                    </li>
                    <li class="edit-enable block" block_type="MANUAL_GOODS"  block_id="mg_2">
                        <!-- 同mg_1 略...   -->                
                    </li>
                    <li class="edit-enable block" block_type="MANUAL_GOODS" block_id="mg_3">
                        <!-- 同mg_1 略...   -->        
                    </li>
                    <li class="edit-enable block" block_type="MANUAL_GOODS" block_id="mg_4">
                        <!-- 同mg_1 略...   -->                    
                    </li>
                    <li class="edit-enable block" block_type="MANUAL_GOODS" block_id="mg_5">
                        <!-- 同mg_1 略...   -->                    
                    </li>
                </ul>
            </div>
        </div> 
</div>

以上述html为例，我们来列举面板的Html规范

面板(Panel)

• 样式必须为 panel

布局(Layout)

• 样式必须为layout
• 必须指定一个面板内唯一的layout_id

区块(block)

• 样式必须为block ，样式必须存在edit-enable（未来会废弃）
• 必须指定一个面板内唯一的block_id
• 必须指定block_type:
  • MANUAL_GOODS:手动选择商品区块，商品列中的商品要手动的一个个选择。
  • AUTO_GOODS:自动商品区块，商品列表中的商品是根据定义的条件筛选输出的。
  • SINGLE_IMAGE：单个图片区块，只展示一个图片
  • MULTI_IMAGE：多图片区块，同时展示、选择多个图片
  • BRAND：品牌列表区块，同时展示多个品牌。
  • TEXT:简单文本输出

区块规范详解

手动商品区块

一、规范：

<UL>
<li class="edit-enable block" block_type="MANUAL_GOODS" block_id="mg_1">
    <div class="goods">
      <div class="g-img">
        <a><img></a>
      </div>
      <a class="g-name"></a>
      <div class="g-price">
          <i>￥</i><span></span>
      </div>
    </div>
</li>

<!-- 其它li blockid 不要重复 -->

</UL>

二、解释：
手动商品区块需要定义好要显示的商品个数，每一个商品区块都需要手动选择
区块元素的展示规则如下：

.goods .g-img img

输出商品图片

.goods a.g-name

输出商品名称，同时此连接的href会被生成为商连接

.goods .g-price>span

输出商品价格

自动商品区块

一、规范：

<div class="edit-enable block" block_type="AUTO_GOODS" block_id="autogoods">
  <dl>
                    <dt>商品内容展示块（自动规则类型）</dt>
                    <dd>已设定该内容块为“<span name="nc-category"></span>”分类商品按“<span name="nc-rule"></span>”规则排序<span name="nc-number"></span>种商品。</dd>
                    <dd>该类型展示需模版保存后在商城前台读取数据进行实时更新显示。</dd>
  <dl>
<ul >
    <li >
        <div class="goods">
            <div class="g-img">
            <a><img></a>
            </div>
            <a class="g-name"></a>
            <div class="g-price">
                <i>￥</i><span></span>
            </div>
        </div>
    </li>
</ul>
</div>

二、解释：
自动商品的元素结构基本相同， 但需要外围必须存在一个UL，这个UL只需要有一LI，这个LI会根据选择的商品数自动循环显示

单图片区块

一、规范：

<div class="edit-enable block" block_type="SINGLE_IMAGE"  block_id="img1">
   <div   class="single_image" >
        <a><img /></a>
    </div>
</div>

二、解释：
单图片显示区块由一个A和一个img组成，用来显示连接和图片
区块元素的展示规则如下：

.single_image>a

输出图片连接

.single_image>a>img

输出图片

多图片区块

一、规范：

<div class="edit-enable block" block_type="MULTI_IMAGE"  block_id="img">
    <ul>
     <li>
        <a><img /></a>    
     </li>
    </ul>
</div>

二、解释：
多图片区块由一组Li组成，外围被一个UL包裹
在定义模板时，只需要定义一个li即可，在输出时，会循环li的内容输出多个图片

li>a

输出图片连接

li>a>img

输出图片

品牌区块

一、规范：

<ul class="block edit-enable" block_type="BRAND"   block_id="brand">
       <li  > <a target="_blank" href="#"> <img> </a> </li>
</ul>

二、解释：
品牌区块由一组Li组成，外围被一个UL包裹
在定义模板时，只需要定义一个li即可，模在输出时，会循环li的内容输出多个品牌

li>a

输出品牌连接

li>a>img

输出品牌图片

文本区域

一、规范：

<div class="edit-enable block text-block" block_id="block_text"  block_type="TEXT">

   <div class="text">
        <a></a>
    </div>
</div>

二、解释：
文本区块由一个a组成

.text>a

会将文本输出在A的内容中，同时为a添加href连接