最近在做京东模板,因为是最新平台,好多功能都需要摸索,俺技术一般,摸索出一个简易的卡盘功能   ——————使用的是分类推荐模块哦!

本着共享的精神,俺将代码放到这儿了,各人请自便。(代码还不够完善,希望完善的童鞋可以发给我,直接放到评论里吧!在这里提前谢过哦!呵呵)

代码实现的是如下效果:

本人京东设计师:王靖鋆          卡盘效果预览: http://zx.jd.com/designerDetail.html?id=148

HTML代码 如下:

#set($intNum=0)
<div class="j-module" module-function="tabAutoLayout" module-param="{}">
  <div class="jSortContent">
    <!--开始循环每一组商品信息-->
  #foreach($!categoryRec in $!goodsCategoryRecList)
      <!--开始循环商品信息,因为一张大图对应一个小图,所以每组ul有且只有一个li-->
 #foreach($!goods in $!categoryRec.goodsList)
      <ul>
        <li>
 <div class="jItem">
  <div class="jPicbig">
<div class="jaoHot"></div><!--测出是左上标签-->
              <!--自动调用商品图片-->
<a title="$!goods.wname" href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">
  <img width="350" height="320" src="$!jshopCommon.getImage($!goods.imageurl,1)" alt="$!goods.wname">
</a>
              <!--自动调用商品促销标签-->
#if( $!goods.promTag!="")
<div class="jPromotionLabel">
  $!goods.promTag
</div>
#end
</div>
<div class="jGoodsInfo">
  <div class="jTitle"><h1><span style="font-size:17px;">HOT</span> 《热卖商品》</h1></div>
<!--自动调用商品名称和商品广告-->
              <div class="jDesc" title="$!goods.wname $!goods.advertWord">
<div class="jWname">
  <a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">$!goods.wname</a></br>
</div>
<div style="line-height:30px;">
<span class="jSlogan">$!goods.advertWord</span>
</div>
</div>
              <!--自动调用商品参考价和促销价-->
<div class="jPrice">
<div class="jSalePrice">
<span class="jText">参考价:</span>
<span class="jRmb">¥</span>
$!jshopPrice.getSalePrice($!goods.goodsId)
</div>
<div class="jdPrice">
<span class="jText">促销价:</span>
<span class="jRmb">¥</span>
$!jshopPrice.getJdPrice($!goods.goodsId)
</div>
</div>
              <!--实现加入购物车功能-->
<div class="jBtnArea">
<a href="$!jshopCommon.addCart($!goods.goodsId)" target="_blank" >加入购物车</a>
</div>
  </div>
  </div>
  </li>
      </ul>
  #end
      <!--商品信息循环结束-->
    #end
    <!--商品组信息循环结束-->
  </div>   <div class="jSortTab">
  #foreach($!categoryRec in $!goodsCategoryRecList)
  #foreach($!goods in $!categoryRec.goodsList)
  <span>
  <div class="jPic">
  <a title="$!goods.wname" href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">
  <img width="50" height="50" src="$!jshopCommon.getImage($!goods.imageurl,5)" alt="$!goods.wname">
</a>
</div>
</span>
      #end
  #end
  </div>
  <div class="jSortTabArrow"><b></b></div>
</div>

CSS代码 如下:

.user_PShow{font-family:'microsoft yahei';}
.user_PShow *{font-family:'microsoft yahei';}
.user_PShow .mt{}
.user_PShow .mc{background:#fff; overflow:hidden; position:relative;border-radius:4px;border:5px solid #EDEDED;border-bottom:0px;}
.user_PShow .jSortTab{border-top:2px solid #AAAAAA; overflow:hidden; position:relative;background-color:#ededed;height:74px;}
.user_PShow .jSortTab span{float:left; width:158px; padding:7px 0;text-align:center; font-size:14px; font-weight:bold; color:#666;}
.user_PShow .jSortTab span.current{color:#FFFFFF;background-color:#FFFFFF;}
.user_PShow .jSortTabArrow{width:158px; position:absolute; z-index:; top:25px; left:; height:7px; overflow:hidden; text-align:center;}
.user_PShow .jSortTabArrow b{display:inline-block; margin-top:-8px; width:; height:; border-width:10px; border-color:transparent transparent #E4393C transparent; overflow:hidden; zoom:; font-size:;}
.user_PShow .jSortContent{overflow:hidden;border-bottom:1px solid #F1F1F1;height:100%;}
.user_PShow .jSortContent ul{overflow:hidden; display:none;}
.user_PShow .jSortContent ul.current{display:block;padding:10px;}
.user_PShow li{width:157px; overflow:hidden; float:left;}
.user_PShow .jPic{padding:5px; text-align:center;background-color:#c3c3c3;width:50px;margin:0px auto;}
.user_PShow .jDesc{height:55%; line-height:1.3; overflow:hidden;margin:10px 0px;}
.user_PShow .jDesc a{color:#666;font-size:13px;}
.user_PShow .jDesc a:hover{color:#E4393C; text-decoration:underline;}
.user_PShow .jdPrice .jRmb{font-size:12px;}
.user_PShow .jdPrice .jdNum{font-size:15px;}
.user_PShow .jdPrice .jdNumNo{font-size:12px;}
.user_PShow .jMore{position:absolute;right:0px;top:0px;text-align:center;}
.user_PShow .jTm{height:auto;position:relative;}
.user_PShow .jPicbig{text-align:center;float:left;border:5px solid #ededed;}
.user_PShow .jGoodsInfo{float:left;margin-left:30px;height:330px;width:550px;overflow:hidden;}
.user_PShow .jSortContent ul li{width:100% !important;}
.user_PShow .jTitle{background-color:#E7492E;font-size:15px;color:#FFFFFF;padding:5px 15px;}
.user_PShow .jPrice,.user_PShow .jBtnArea,.user_PShow .jDesc{padding:0px 15px;}
.user_PShow .jPrice{color:#c3c3c3;font-weight:bold;line-height:25px;min-height:45px;text-align:right;}
.user_PShow .jBtnArea{color:#FFFFFF;font-weight:bold;line-height:43px;padding:0px;}
.user_PShow .jBtnArea a,.user_PShow .jBtnArea .btn-coll{
display:block; background: url("file/loadImage.html?templateId=5&imageName=Bjsale.png") no-repeat scroll 0 0 transparent;
width:200px;height:40px;margin:0px auto;line-height:40px;text-align:center;color:#FFFFFF;font-size:17px;float:right;
}
.user_PShow .jBtnArea .btn-coll{
background: url("file/loadImage.html?templateId=5&imageName=Bjsalegz.png") no-repeat scroll 0 0 transparent;float:left;
cursor: pointer;display: block;vertical-align: top;font-weight:bold;;width:200px;height:40px;margin:0px;padding:0px;
}
.user_PShow .jAdvertWord{font-size:12px;height:30%;margin:10px 0px;}
.user_PShow .jSalePrice{ text-decoration:line-through; overflow:hidden; clear:both;}
.user_PShow .jdPrice{color:#ff0000; overflow:hidden;font-weight:bold;}
.user_PShow h1{font-weight:bold;}
.user_PShow .jWname{margin:10px 0px;width:100%;text-align:center;border-bottom:2px solid #C3C3C3;}
.user_PShow .jSlogan{color:#565656;font-size:17px;font-weight:bold;}
.user_PShow .jaoHot{
background: url("file/loadImage.html?templateId=5&imageName=hotjao.png") no-repeat scroll 0 0 transparent;width:84px;height:84px;
position:absolute;left:6px;top:7px;
}
.user_PShow .jPromotionLabel{padding:15px 0px;color:#FFFFFF;font-size:12px;width:56px; height:55px;text-align:center; background:url("file/loadImage.html?templateId=5&imageName=promTag.png") no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img10.360buyimg.com/cms/g8/M02/0F/11/rBEHZ1C0Ma8IAAAAAAAIpkn1m8MAADCTQP_7yMAAAi-795.png'); _background-image:none; position:absolute; top:4px; left:310px;}
.user_PShow .jPromotionTextArea{width:56px;font-size:12px;overflow:hidden; text-align:center; padding-top:35px;color:#fff;}
.user_PShow .jPromotionText1{}
.user_PShow .jPromotionNum{}
.user_PShow .jPromotionText2{}
.user_PShow .jSortTab span.current .jPic{background-color:#FF0000;}

京东SDK模板卡盘效果实现代码的更多相关文章

  1. 使用 T4 文本模板生成设计时代码

      使用设计时 T4 文本模板,您可以在 Visual Studio 项目中生成程序代码和其他文件. 通常,您编写一些模板,以便它们根据来自模型的数据来改变所生成的代码. 模型是包含有关应用程序要求的 ...

  2. 模仿京东顶部搜索条效果制作的一个小demo

    最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...

  3. 关于 调用 JNI JAR 的说明和注意事项,调用第三方 JAR SDK 和 翻译 安卓 JAVA 代码 的说明 V2015.6.10

    关于 调用 JNI JAR 的说明和注意事项,调用第三方 JAR SDK 和 翻译 安卓 JAVA 代码 的说明 V2015.6.10 转载请标明出处,否则死全家.选择[复制链接]即可得到出处. (* ...

  4. 读书笔记 effective c++ Item 44 将与模板参数无关的代码抽离出来

    1. 使用模板可能导致代码膨胀 使用模板是节省时间和避免代码重用的很好的方法.你不需要手动输入20个相同的类名,每个类有15个成员函数,相反,你只需要输入一个类模板,然后让编译器来为你实例化20个特定 ...

  5. Js实现京东无延迟菜单效果(demo)

    一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...

  6. python测试开发django-56.模板渲染markdown语法+代码高亮

    前言 上一篇已经实现在xadmin后台编辑markdown语法的文档,编辑完成之后发布博客,在前端html能把markdown语法显示出来. 主要思路是先从数据库把markdown的代码读出来,导入m ...

  7. 京东sdk商家上架接口调用问题总结(更新中...)

    前言: 最近在做商家发布产品,调用京东sdk,发现问题很多,而且还是在我同事的帮助下完成的,摸索中,菜鸟还请高手门多多提携才好,入正题 首先是引用jd的sdk啦,京东sdk中发布商品需要调用一个 36 ...

  8. js实现雪花飘落效果的代码

    使用js实现雪花飘落的效果,用html5绘布加js写的雪花飘效果 . 代码: <html> <head> <script> /** * js与html5实现的雪花飘 ...

  9. Swagger结合mustache模板生成后台接口代码、以及前后台建模代码

    之前项目中使用的的thrift来建模,维护前后台模型以及rest接口,前台使用的是angular2: 但是使用thrift只能生成建模,后台的rest接口的Controller文件还是需要手动去写,一 ...

随机推荐

  1. C语言 包含结构的结构

    一个结构体的成员是另一个结构体 代码: # include <stdio.h> # include <stdlib.h> struct data { int year; int ...

  2. cocos2dx中使用iconv转码(win32,iOS,Android)

    首先贴下环境:Win7 64, NDK r8e, libiconv-1.14, cygwin 一 Win32环境配置 Cocos2D-X自带有win32上的iconv库.仅仅须要配置一下就可以使用. ...

  3. 多通道 移位寄存器 verilog

    // Quartus II Verilog Template // Basic 64-stage shift register with multiple taps module basic_shif ...

  4. git是一种分布式代码管理工具,git通过树的形式记录文件的更改历史,比如: base'<--base<--A<--A' ^ | --- B<--B' 小米工程师常常需要寻找两个分支最近的分割点,即base.假设git 树是多叉树,请实现一个算法,计算git树上任意两点的最近分割点。 (假设git树节点数为n,用邻接矩阵的形式表示git树:字符串数组matrix包含n个字符串,每个字符串由字符'0

    // ConsoleApplication10.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream& ...

  5. PHP和mysql的长连接

    关于 PHP MySQL 长连接.连接池的一些探索 PHP连接MySQL的方式,用的多的是mysql扩展.mysqli扩展.pdo_mysql扩展,是官方提供的.php的运行机制是页面执行完会释放所有 ...

  6. mybatis前台传来一个String,后后台执行sql变成了true

    实际上参数传来的是一个字符串 3 ,不知道为什么会变成true 最后当然是查不到信息了.. 我在mapper映射文件里面使用了动态的where查询,我觉得跟这个关系不太大, 现在不知道怎么办,希望有思 ...

  7. 08 redis中hash结构及命令详解

    Hash 哈希数据类型相关命令 hset key field value 作用: 把key中 filed域的值设为value 注:如果没有field域,直接添加,如果有,则覆盖原field域的值 hm ...

  8. 【PHP开发】远程文件(图片)下载

    这一篇文章介绍的方法不算原创了,只是引用的别人的文章,加上自己的注释,因为接触php时间不长,所以尝试的东西比较多,自己加的注释也比较简单,php高手请略过. 我要用到远程下载图片,是在做微信公众平台 ...

  9. 注册HttpHandler

    How to: Register HTTP Handlers After you have created a custom HTTP handler class, you must register ...

  10. DB Migrations更新数据库命令

    在项目迭代的过程中,数据库结构常常需要跟随业务需求的变化做出调整,尤其在迭代的初期阶段,加一个字段减一个字段的需求更是家常便饭.在小型团队中,往往是负责开发功能模块的程序员在完成本地开发环境数据库的变 ...