选项卡 tab
方法描述
鼠标移动到不同的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} |
可使用模块
- 商品分类推荐
- 更多效果等您发挥
商品分类推荐DEMO一
商品分类推荐DEMO二
带移动箭头的切换效果
特价商品
今日推荐
季度热销
<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;}
纯色切换
特价商品
今日推荐
季度热销
-
¥ 759.00¥ 199.00
-
¥ 599.00¥ 229.00
-
【今日特惠】米尚MISUN春秋新款羽绒女装轻薄款撞色拼接针织兜女羽绒服女款短外套 草沙绿 S 满199减20,满399还可再用50优惠券。首页领券!!更优惠!!!¥ 1099.00¥ 269.00
-
夏娜(ShineNa)2013秋冬裝新品 圆领长袖拼接毛呢修身连衣裙 10171 藏青色 L 热卖秋品,低至5折!全场免运费,支持7天无理由退换货¥ 820.00¥ 189.00
-
苏醒的乐园 秋装上新 韩版女装 修身中长款 白鸭绒真毛领 羽绒服女款 YRF187 红色 L 满199元减20元 满499元减60元 满799元减80元 .全场包邮,支持货到付款!!!¥ 2599.00¥ 459.00
-
Sara Phillips羊绒衫 女 2013新款卷边V领纯羊绒 短款薄毛衣85119 映暮苍蓝 (S)160/80A 100%纯山羊绒,支持货到付款,满799立减100¥ 2809.00¥ 319.00
-
妖精的口袋 棉花梦乡 2013冬装新款 立体菱格甜美厚毛衣 1319031 浪漫紫 S 狂欢提前到!满399减100促销火热进行中!¥ 759.00¥ 159.00
-
森宿 欢乐颂 2013冬装新款 A字型白鸭绒长款羽绒服 2232006 我爱大红色 M 4到6号全场满399立减200上不封顶¥ 1490.00¥ 799.00
-
¥ 779.00¥ 399.00
-
夏娜(ShineNa)2013秋冬新品时尚简约大口袋羊毛呢大衣 修身呢子外套 0750 黄色 S 53.6%羊毛,热卖秋品,低至5折!全场免运费,支持7天无理由退换货!¥ 1200.00¥ 298.00
-
乐町2013冬装新款日系甜美女装 可爱手套羽绒服C4AC34305 粉红色 S 【乐町冬装 首发尝鲜】 满立减100 仅需379 首发顺丰 第一时速享秋品¥ 959.00¥ 479.00
-
¥ 488.00¥ 158.00
-
【京东配送】浅时 2013冬季新款 欧美时尚军工装 宽松短装 女加厚羽绒服YR1208 米白 M 【货到付款,店庆特惠】1-12号浅时店庆,全场满2件9折优惠。满500送精美针织衫一件¥ 699.00¥ 218.00
-
¥ 798.00¥ 289.00
-
爱丽缇女装新款韩版女士修身毛领羽绒服正品反季清仓女中长款A13XD008 橙红色 S 时尚新品汇聚!支持货到付款!¥ 1688.00¥ 588.00
<div class="j-module" module-function="tab,autoWidth" module-param="{}">
<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 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="jSalePrice">
<span class="jRmb">¥</span>
$!jshopPrice.getSkuPrice($!goods.goodsId)
</div>
<div class="jdPrice">
<span class="jRmb">¥</span>
$!jshopPrice.getJdPrice($!goods.goodsId)
</div>
</div>
</div>
</div>
</li>
#end
</ul>
#end
</div>
</div>
.userjSortRecommend{}
.userjSortRecommend .mt{}
.userjSortRecommend .mc{background:#fff; overflow:hidden; position:relative;}
.userjSortRecommend .jSortTab{overflow:hidden; position:relative; height:28px; background:#cbcbcb;}
.userjSortRecommend .jSortTab span{float:left; width:100px; height:28px; line-height:28px; text-align:center; font-size:15px; font-weight:bold; color:#fff; background:#cbcbcb;}
.userjSortRecommend .jSortTab span.current{color:#fff; background:#be312e;}
.userjSortRecommend .jSortContent{overflow:hidden; height:100%; border:solid 1px #cbcbcb;}
.userjSortRecommend .jSortContent ul{padding:3px 0; overflow:hidden; display:none;}
.userjSortRecommend .jSortContent ul.current{display:block;}
.userjSortRecommend li{float:left; width:185px; padding:5px 0; margin:0 5px; overflow:hidden; display:inline; position:relative;}
.userjSortRecommend .jItem{height:auto; background:#fff;}
.userjSortRecommend .jPic{position:relative; text-align:center; background:#fff; _height:100%;}
.userjSortRecommend .jPic img{vertical-align:top;}
.userjSortRecommend .jPic a{padding:5px 0; width:160px; height:160px; display:block; margin:0 auto;}
.userjSortRecommend .jGoodsInfo{overflow:hidden; position:relative; padding:5px; text-align:center;}
.userjSortRecommend .jDesc{height:14px; line-height:1.3; overflow:hidden;}
.userjSortRecommend .jDesc a{color:#020202; text-decoration:none;}
.userjSortRecommend .jDesc a:hover{text-decoration:underline;}
.userjSortRecommend .jDesc .jSlogan{color:#ff0000!important;}
.userjSortRecommend .jPrice{height:34px; overflow:hidden;}
.userjSortRecommend .jPrice .jsNumNo{text-decoration:none;}
.userjSortRecommend .jdPrice{color:#e60215; font-weight:bold; height:20px; font-size:14px; overflow:hidden;}
.userjSortRecommend .jdPrice .jRmb{}
.userjSortRecommend .jdPrice .jText{}
.userjSortRecommend .jdPrice .jdNum{}
.userjSortRecommend .jdPrice .jdNumNo{}
.userjSortRecommend .jSalePrice{color:#cdcdcd; text-decoration:line-through; overflow:hidden; clear:both;}
.userjSortRecommend .jSalePrice .jRmb{ text-decoration:line-through;}
.userjSortRecommend .jSalePrice .jsNum{text-decoration:line-through;}