广告位模板规范

工作业务

为了使模板能匹配更多的展示方式，现在对模板进行了一下规范，这样制作样式的时候会方便很多。

<div class="jdAdPn jdAdW644 clear" id="jdAdBox" >
        <a class="jdAbLogoBot" href="%%j_logo_url%%" target="_blank">京东推广</a>
        <div class="jdAdInner">
            <div class="jdAdLogo">
                <a href="%%j_logo_url%%" target="_blank">
                    <img src="http://x.jd.com/file/images/logo.jpg" alt="京东logo"></a>
            </div>
            <div class="jdAdRow" id="jdAdRow">
            <% var l = datas.length; %>
            <% var gsize = 1; %> <!--一组一个商品展示-->
            <!-- 一个轮播组 -->
            <% for(var i = 0; i < 1; i++) { %>
                <div class="jdAdCol" id="jdAdCol<%= i %>">
                    <div class="jdAdCont" id="jdAdList<%= i %>">
                    <% for(var j = 0; j < l; j++) { %>
                        <!-- 展示组，以jdAdGroup为轮播的最小单元 -->
                        <div class="jdAdGroup" style="<%=j==0?'':'display:none'%>">
                            <% for(var k = 0; k < 1; k++) { %>
                                <% var item = datas[j*gsize+k] %>
                            <!-- 商品组，以jdAdContInner为最小商品展示单元 -->
                            <div id="<%=item.data_skuid %>" class="jdAdContInner">
                                <!-- 商品图片展示 -->
                                <div class="jdAdImg">
                                    <a href="<%= item.data_skuurl%>" target='_blank' title="<%= item.data_skuname%>" ><img data-src="http://img13.360buyimg.com/cms/s{size}x{size}_<%=item.data_skuimg%>" alt="<%= item.data_skuname%>图片" /></a>
                                </div>
                                <!-- 商品展示cover层 -->
                                 <a href="<%= item.data_skuurl%>"   id="clk<%= j %>" data-skuid="<%= item.data_skuid%>" target='_blank' title="<%= item.data_skuname%>" class="jdAdCover" ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////AAAAVcLTfgAAAAF0Uk5TAEDm2GYAAAAMSURBVHjaYmAACDAAAAIAAU9tWeEAAAAASUVORK5CYII=" alt="<%= item.data_skuname%>" /></a>
                                 <!-- 商品信息展示 -->
                                <ul>
                                    <li class="jdAdName"><%= item.data_skuname %></li>
                                    <li class="jdAdPrice">
                                        <!-- 价格展示 -->
                                        <p class="jdAdLeft">
                                            <span>&yen;</span>
                                            <span class="jdAdPrice" id="price_<%= item.data_skuid %>"><%= item.data_skuprice %></span>
                                        </p>
                                        <!-- 预留参考价展示 -->
                                        <span class='jdAdSubTag' id='rprice_<%= item.data_skuid %>' style='display:none'><%= item.data_subprice %></span>
                                        </li>
                                    <li>
                                        <!-- 促销展示位 -->
                                        <span class="jdAdPromo" id="promInfo_<%= item.data_skuid %>" style='display:none'></span>
                                    </li>
                                </ul>
                            </div>
                            <%}%>
                        </div>
                    <% } %>
                    </div>
                    <!-- 轮播条tag展示，如果不需要需要展示商品相关信息，去掉‘var item = datas[j]’，每个轮播组只有一个tag展示 -->
                    <div class="jdAdTags">
                        <ul class="jdAdList" id="jdAdTags<%= i %>">
                            <% for(var j = 0; j < l; j++) { %>
                                <% var item = datas[j] %>
                                <li><p class='jdAdLine'><%= j + 1 %></p></li>
                            <% } %>
                        </ul>
                    </div>
                </div>
            <% } %>
            </div>
        </div>
</div>