首页制作

楼层输出标签

首先我们来了解一个标签

• floorTag
  

他返回一个楼层的数组:[floor,floor]

floor的基本属性为：

  {
    "id": 1,
    "name": "食品箱包1",
    "is_display": 1,
    "anchor_words": "一楼服饰",
    "panelList": [
      {
        "panel_name": "新版块",
        "panel_html": "<div class=\"panel\"> \n <div class=\"body\"> \n  <!-- 右侧主体--> \n  <div class=\"main layout\" layout_id=\"main\" id=\"brand\"> \n   <ul class=\"block edit-enable\" block_type=\"BRAND\" style=\"height:100px;\" id=\"panel-brand-list\" block_id=\"1\"> \n    <li class=\"brand-hidden\"> <a> <img> </a> </li> \n   </ul> \n  </div> \n </div> \n</div>"
      },
      {
        "panel_name": "新版块",
        "panel_html": "<div class=\"panel\"> \n <div class=\"body\"> \n  <!-- 右侧主体--> \n  <div class=\"main layout\" layout_id=\"main\" id=\"brand\"> \n   <ul class=\"block edit-enable\" block_type=\"BRAND\" style=\"height:100px;\" id=\"panel-brand-list\" block_id=\"1\"> \n    <li class=\"brand-hidden\"> <a> <img> </a> </li> \n    <li class=\"brand-show\"> <a> <img src=\"http://static.b2b2cv2.javamall.com.cn/attachment/brand/201506021637048618.jpg\"> </a> </li>\n    <li class=\"brand-show\"> <a> <img src=\"http://static.v4.javamall.com.cn/attachment/brand/201202211143461491.jpg\"> </a> </li>\n   </ul> \n  </div> \n </div> \n</div>"
      }
    ]
  }

• 其中比较重要的是panelList 数组，他的每个元素有两个属性：

  • panel_name 面板的名称
  • panel_html :面板的html：面板模板+后台维护的数据，即：填充好数据的html版段

制作思路

1. 循环floor数组
2. 将面板的html输出到页面中
3. 组织样式及Javascript实现最终效果 面板html是这里的关键，在维护时除规范中约定的样式必须有，也可以定义自己的样式以便实现效果， 这些样式后台不会有，所以不会影响后台的设计

示例

 <#assign floorTag =newTag("floorTag")>
    <#assign floorList=floorTag ("{'client_type':'pc'}") >
    <#list floorList as floor>
        <div class="floor-line-con floor-color-${floor_index}" data-lift="floor-${floor_index}">
                <div class="floor-hd">
                    <i class="box_hd_arrow"></i>
                    <i class="box_hd_dec"></i>
                    <div class="hd-tit" style="cursor:default">
                       ${floor.name}
                    </div>
                    <div class="hd-tags">
                        <ul>
                            <#list floor.panelList as pl>
                                <#if pl_index lt 8>
                                    <li<#if pl_index==0> class="current"</#if>>
                                <span>${pl.panel_name}</span><i class="arrowImg"></i>
                                </li>
                                </#if>
                            </#list>
                        </ul>
                    </div>
                </div>

                <div class="floor-body">
                    <#list floor.panelList as pl>
                        ${pl.panel_html}
                    </#list>
                </div>
            </div>
    </#list>