方法描述
根据布局的宽度判断能放下的一行数量,并将多余的宽度平均分配给每一个列表项。支持css对象传入。
应用场景
主要应用于不同的宽度布局,如190、390、590、790、990等布局,同一套模板显示的列表个数会根据布局宽度自动计算,并撑满布局。
方法参数
名称 值 类型 描述
调用语句 <div class="j-module" module-function="autoWidth" module-param="{参数一:值,参数二:值,...>模板代码</div>
方法调用 支持传入参数
参数
节点 node string 需要计算宽度的节点,如:{node:’li’}
节点css对象 extra object 给需要计算宽度的节点增加一些css样式,这样可适应不同的效果需求。如{extra:{margin:’0 5px’, padding:’5px 0’}}
<div class="j-module" module-function="autoWidth" module-param="{}" >
#if($moduleTitle.exists)
<div class="jTitle">
#if($moduleTitle.moreExists)
<span class="jTitleExtra"><a href="$!moduleTitle.moreLink">$!moduleTitle.more</a></span>
#end
#if($moduleTitle.titleExists)
<span class="jTitleName"><a href="$!moduleTitle.titleLink">$!moduleTitle.title</a></span>
#end
</div>
#else
<div class="jTitle">
<span class="jTitleName">新品上架</span>
</div>
#end
<ul>
#foreach($goods in $goodsRecList)
<li>
<div class="jItem">
<div class="jPic">
<a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">
<img src="$!jshopCommon.getImage($!goods.imageurl,6)" alt="$!goods.wname" class="err-product" width="238" height="238" />
</a>
</div>
<div class="jGoodsInfo">
<div class="jDesc" title="$!goods.wname $!goods.advertWord">
<a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">$!goods.wname</a>
<span class="jSlogan">$!goods.advertWord</span>
</div>
<div class="jPrice">
<div class="jdPrice">
$!jshopPrice.getJdPrice($!goods.goodsId)
</div>
<div class="jSalePrice">
$!jshopPrice.getSalePrice($!goods.goodsId)
</div>
</div>
<div class="jBtnArea">
<a target="_blank" href="$!jshopCommon.addCart($!goods.goodsId)">放入购物车</a>
</div>
</div>
</div>
#if( $!goods.promTag!="")
<div class="jPromotionLabel">
<div class="jPromotionTextArea">
<span class="jPromotionText1">直降</span><span class="jPromotionNum">$!goods.promTag</span><span class="jPromotionText2">元</span>
</div>
</div>
#end
</li>
#end
</ul>
</div>
.userjGoodsRecommend{background:#fff; overflow:hidden;}
.userjGoodsRecommend .mc{overflow:hidden;}
.userjGoodsRecommend .jTitle{background:#fff; border-bottom:solid 2px #e6e6e6; color:#666; padding:10px 0; margin-bottom:5px; overflow:hidden;}
.userjGoodsRecommend .jTitle a{color:#666;}
.userjGoodsRecommend .jTitleName{font-size:22px;}
.userjGoodsRecommend .jTitleExtra{font-size:14px; font-weight:bold; float:right;}
.userjGoodsRecommend li{float:left; width:240px; padding:5px 0; margin:0 3px; overflow:hidden; display:inline; position:relative;}
.userjGoodsRecommend .jItem{height:auto;}
.userjGoodsRecommend .jPic{position:relative; text-align:center; background:#fff; _height:100%; border:solid 1px #f1f1f1;}
.userjGoodsRecommend .jPic img{vertical-align:top;}
.userjGoodsRecommend .jPic img.err-product{background:url(//misc.360buyimg.com/lib/skin/e/i/error-jd.gif) no-repeat 50% 50%;}
.userjGoodsRecommend .jPic a{width:238px; height:238px; display:block; margin:0 auto;}
.userjGoodsRecommend .jGoodsInfo{overflow:hidden; position:relative; padding:8px 60px 5px 5px; background:#e6e6e6; margin-top:1px;}
.userjGoodsRecommend .jDesc{height:16px; line-height:1.3; font-size:12px; overflow:hidden;}
.userjGoodsRecommend .jDesc a{color:#666666; text-decoration:none;}
.userjGoodsRecommend .jDesc a:hover{text-decoration:underline;}
.userjGoodsRecommend .jDesc .jSlogan{color:#e33a3d!important;}
.userjGoodsRecommend .jPrice{height:18px; padding-top:7px; overflow:hidden;}
.userjGoodsRecommend .jPrice span{float:left; display:inline;}
.userjGoodsRecommend .jPrice .jsNumNo{text-decoration:none;}
.userjGoodsRecommend .jdPrice{float:right;}
.userjGoodsRecommend .jdPrice .jRmb{font-size:12px; color:#D21E20;}
.userjGoodsRecommend .jdPrice .jText{font-size:12px; color:#D21E20;}
.userjGoodsRecommend .jdPrice .jdNum{font-size:22px; color:#D21E20;}
.userjGoodsRecommend .jdPrice .jdNumNo{font-size:12px;}
.userjGoodsRecommend .jSalePrice{text-decoration:line-through; color:#999; font-weight:bold; overflow:hidden;}
.userjGoodsRecommend .jSalePrice .jText{text-decoration:line-through;}
.userjGoodsRecommend .jSalePrice .jRmb{text-decoration:line-through;}
.userjGoodsRecommend .jSalePrice .jsNum{text-decoration:line-through;}
.userjGoodsRecommend .jBtnArea{overflow:hidden; position:absolute; right:0; bottom:0;}
.userjGoodsRecommend .jBtnArea a{display:block; background:#e33a3d url(//img10.360buyimg.com/cms/g12/M00/01/02/rBEQYVGDK5sIAAAAAAAI7OBo0A0AAANqgH1uosAAAkE619.gif) center center no-repeat; width:55px; height:55px; text-indent:-9999px;}
.userjGoodsRecommend .jPromotionLabel{width:40px; height:66px; background:url(//img10.360buyimg.com/cms/g8/M02/0F/11/rBEHZ1C0Ma8IAAAAAAAIpkn1m8MAADCTQP_7yMAAAi-795.png) no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//img10.360buyimg.com/cms/g8/M02/0F/11/rBEHZ1C0Ma8IAAAAAAAIpkn1m8MAADCTQP_7yMAAAi-795.png'); _background-image:none; position:absolute; top:5px; right:10px; display:none;}
.userjGoodsRecommend .jPromotionTextArea{overflow:hidden; text-align:center; padding-top:22px; line-height:1.2; color:#fff;}
.userjGoodsRecommend .jPromotionText1{display:block;}
.userjGoodsRecommend .jPromotionNum{}
.userjGoodsRecommend .jPromotionText2{}