方法描述
鼠标移动到不同的tab,切换相对应的内容
应用场景
主要应用在商品分类推荐模块中,点击不同的标题,切换相对应的内容。
方法参数
名称 值 类型 描述
调用语句 <div class="j-module" module-function="tab" module-param="{参数一:值,参数二:值,...>模板代码</div>
方法调用 支持传入参数
参数
标题节点 tabNode string 如:{tabNode:’.jSortTab span’}
内容节点 tabContent string 如:{tabContent:’.jSortContent ul’}
当前标识 arrow string 如:{arrow:’.jSortTabArrow’}
当前样式 defaultClass string 如{defaultClass:’current’}
标题宽度 setUpWidth number 值:0,1;其中0表示平均分配宽度,1表示默认宽度;如{setUpWidth:0}
<div class="j-module" module-function="tab,autoWidth" module-param="{}">
<div class="jSortTabArrow"><b></b></div>
<div class="jSortTab">
#foreach($!categoryRec in $!categoryRecList)
<span>$!categoryRec.categoryName</span>
#end
</div>
<div class="jSortContent">
#foreach($!categoryRec in $!categoryRecList)
<ul>
#foreach($!goods in $!categoryRec.goodsList)
<li>
<div class="jItem">
<div class="jPic">
<a title="$!goods.wname" href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank"><img width="100" height="100" src="$!jshopCommon.getImage($!goods.imageurl,2)" alt="$!goods.wname"></a>
</div>
<div class="jGoodsInfo">
<div class="jDesc">
<a title="$!goods.wname" href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">$!goods.wname</a>
</div>
<div class="jPrice">
<div class="jdPrice">
<span class="jRmb">¥</span>
<span class="jdNum">$!jshopPrice.getJdPrice($!goods.goodsId)</span>
</div>
</div>
</div>
</div>
</li>
#end
</ul>
#end
</div>
</div>
.userjSortRecommend{}
.userjSortRecommend .mt{}
.userjSortRecommend .mc{background:#fff; overflow:hidden; position:relative;}
.userjSortRecommend .jSortTab{border-bottom:2px solid #AAAAAA; overflow:hidden; position:relative; height:32px;}
.userjSortRecommend .jSortTab span{float:left; width:158px; padding:7px 0; height:18px; text-align:center; font-size:14px; font-weight:bold; color:#666;}
.userjSortRecommend .jSortTab span.current{color:#E4393C;}
.userjSortRecommend .jSortTabArrow{width:158px; position:absolute; z-index:1; top:25px; left:0; height:7px; border-bottom:2px solid #E4393C; overflow:hidden; text-align:center;}
.userjSortRecommend .jSortTabArrow b{display:inline-block; margin-top:-8px; width:0; height:0; border-style:dashed dashed solid dashed; border-width:10px; border-color:transparent transparent #E4393C transparent; overflow:hidden; zoom:1; font-size:0;}
.userjSortRecommend .jSortContent{overflow:hidden; border-right:1px solid #F1F1F1; border-bottom:1px solid #F1F1F1; margin-top:-1px; height:100%;}
.userjSortRecommend .jSortContent ul{overflow:hidden; display:none;}
.userjSortRecommend .jSortContent ul.current{display:block;}
.userjSortRecommend li{width:157px; overflow:hidden; float:left;}
.userjSortRecommend .jItem{border-left:1px solid #F1F1F1; border-top:1px solid #F1F1F1; padding:5px 10px 0;}
.userjSortRecommend .jPic{height:100px; padding:5px 0; text-align:center;}
.userjSortRecommend .jGoodsInfo{padding-bottom:5px;}
.userjSortRecommend .jDesc{height:32px; line-height:1.3; overflow:hidden;}
.userjSortRecommend .jDesc a{color:#666;}
.userjSortRecommend .jDesc a:hover{color:#E4393C; text-decoration:underline;}
.userjSortRecommend .jdPrice{color:#E4393C; height:18px; overflow:hidden;}
.userjSortRecommend .jdPrice span{float:left;}
.userjSortRecommend .jdPrice .jRmb{font-size:12px;}
.userjSortRecommend .jdPrice .jdNum{font-size:15px;}
.userjSortRecommend .jdPrice .jdNumNo{font-size:12px;}
最后编辑: admin 文档更新时间: 2020-03-24 09:32 作者:admin