多行省略号 addEllipsis
JSHOP 2013-12-27 16:02:45
评论:0 浏览:17324
方法描述
计算文字的数量,超过一定的数量后,剩余的用其他传入的字符替换。
应用场景
主要应用于商品展示类模块中,如商品推荐、分页显示商品、店内搜索结果、主从商品等等模块,当商品标题太长而布局容器有限时使用。
方法参数
名称 类型 描述
调用语句 <div class="j-module" module-function="addEllipsis" module-param="{参数一:值,参数二:值,...>模板代码</div> 方法调用 支持传入参数
参数
文字节点 title string 需要替换的文字节点,如:{title:'.jDesc a'}
数量 count number 文字的数量,如{count:15}
替换字符 text string 用于替换的字符,如{text:'...'}
可使用模块
商品推荐
分页显示商品
店内搜索结果
主从商品
更多效果等您发挥
商品推荐DEMO
文字替换
<div class="j-module" module-function="autoLayout,addEllipsis" module-param="{node:'li', spacingType:'margin', size:0.5, title:'.jDesc a', count:25, text:'......'}" >
<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,2)" alt="$!goods.wname" height="160" width="160" />
</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">
<span class="jRmb">&yen;</span>
$!jshopPrice.getJdPrice($!goods.goodsId)
</div>
</div>
<div class="jBtnArea">
<a target="_blank" href="$!jshopCommon.addCart($!goods.goodsId)">放入购物车</a>
</div>
</div>
</div>
#if($!goods.promTag && $!goods.promTag!="")
<div class="jPromotionLabel">
<div class="jPromotionTextArea">
<span class="jPromotionNum">$!goods.promTag</span>
</div>
</div>
#end
</li>
#end
</ul>
</div>
.userjGoodsRecommend .mt{}
.userjGoodsRecommend .mc{background:#ffe7f4; overflow:hidden;}
.userjGoodsRecommend .mb{display:none;}
.userjGoodsRecommend .mc ul{width:100%;}
.userjGoodsRecommend li{float:left; width:185px; padding:5px 0; margin:0 5px; overflow:hidden; display:inline; position:relative;}
.userjGoodsRecommend .jItem{height:auto; background:#fff; border:solid 1px #f0b7e3;}
.userjGoodsRecommend .jPic{position:relative; text-align:center; background:#fff; _height:100%;}
.userjGoodsRecommend .jPic img{vertical-align:top;}
.userjGoodsRecommend .jPic a{padding:5px 0; width:160px; height:160px; display:block; margin:0 auto;}
.userjGoodsRecommend .jGoodsInfo{overflow:hidden; position:relative; padding:5px; zoom:1;}
.userjGoodsRecommend .jDesc{height:32px; line-height:1.3; overflow:hidden;}
.userjGoodsRecommend .jDesc a{color:#8c8c8c; text-decoration:none;}
.userjGoodsRecommend .jDesc a:hover{text-decoration:underline;}
.userjGoodsRecommend .jDesc .jSlogan{color:#9a3082!important;}
.userjGoodsRecommend .jPrice{height:17px; overflow:hidden; padding:5px 0;}
.userjGoodsRecommend .jPrice span{float:left; display:inline;}
.userjGoodsRecommend .jPrice .jsNumNo{text-decoration:none;}
.userjGoodsRecommend .jdPrice{color:#9a3082; font-weight:bold;}
.userjGoodsRecommend .jdPrice .jRmb{font-size:14px;}
.userjGoodsRecommend .jdPrice .jText{font-size:14px;}
.userjGoodsRecommend .jdPrice .jdNum{font-size:18px;}
.userjGoodsRecommend .jdPrice .jdNumNo{font-size:12px;}
.userjGoodsRecommend .jSalePrice{color:#9ed1f9; text-decoration:line-through; overflow:hidden; clear:both;}
.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:5px; bottom:10px;}
.userjGoodsRecommend .jBtnArea a{display:block; background:url(//img14.360buyimg.com/cms/g6/M00/03/1B/rBEGDFC14QEIAAAAAAAGoFUJLbYAAAwXAPVaHgAAAa4047.gif) no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//img14.360buyimg.com/cms/g6/M00/03/1B/rBEGDFC14QEIAAAAAAAGoFUJLbYAAAwXAPVaHgAAAa4047.gif'); _background-image:none; width:75px; height:22px; 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;}
.userjGoodsRecommend .jPromotionTextArea{overflow:hidden; text-align:center; padding-top:22px; line-height:1.2; color:#fff;}
.userjGoodsRecommend .jPromotionText1{display:block;}
.userjGoodsRecommend .jPromotionNum{}
.userjGoodsRecommend .jPromotionText2{}
名称 类型 描述