日日麻批-日日麻批免费视频-日日麻批免费视频播放-日日麻批视频-国产4tube在线播放-国产69精品久久久久9999

快消品貨源批發市場
快消品貨源分銷平臺
 
 
當前位置: 貨源批發網 » 網商學院 » 網店裝修 » 淘寶店鋪裝修 » 淘寶拓展版Tab標簽輪播代碼

淘寶拓展版Tab標簽輪播代碼

放大字體  縮小字體 發布日期:2024-02-25 21:58:30  來源:電商聯盟  作者:樂發網  瀏覽次數:27

拓展版Tab標簽輪播代碼。淘寶店鋪拓展版裝修中所用的輪播焦點圖效果,可以通過焦點圖的Tab插件制作完成,本文講解如何制作tab標簽式焦點圖。

由于淘寶裝修平臺增強了一些展示效果,但這些效果需要用Javascript編寫,但目前淘寶裝修平臺又不能將Javascript開放給眾多設計師,所以他們提供了一些Widget庫供設計師們調用。

首先,針對不同的效果,需要配置不同的參數,也應該采用不同的Html代碼結構。

然后利用名叫J_TWidget的元素,讓庫文件找到它,并開始渲染,比如:

<divclass="J_TWidget"data-type="Slide"data-cfg="{…}">

<!--code-->

</div>

現在我們拿第一種Tab標簽來舉例。

<divid="demo1"class="J_TWidget"data-widget-type="Tabs"data-widget-config="{

'effect':'fade',

'autoplay':true,

'circular':true

}">

<divclass="section">

<ulclass="ks-switchable-nav">

<liclass="ks-active">標題A</li>

<li>標題B</li>

<li>標題C</li>

<li>標題D</li>

</ul>

<divclass="ks-switchable-content">

<div>-----預先加載的內容---------</div>

<divstyle="display:none">內容B</div><divstyle="display:none">內容C</div>

<divstyle="display:none">內容D</div>

</div>

</div>

</div>

上面代碼中粗體部分是比較重要的地方,必須添加,下面一一對其進行解釋。

1、demo1表示為最外面的容器;

2、J_TWidget表示需要用庫文件開始渲染;

3、data-widget-type="Tabs"這個是用來告訴庫文件,我們的widget組件要用什么方式來渲染,即它的表現方式為Tab標簽式;

4、data-widget-config=”{….}”這里是組件的相關配置,是很靈活的一部分,可以看后面的配置表;

5、class=”ks-switchable-nav”這個用來定義當前組件進行輪播的目標列表的class值,就是觸發區域;

6、class="ks-switchable-content"用來定義輪播列表所對應的內容區域的class值。

將以上代碼拷貝到裝修后臺預覽一下,你會發現他們是錯位的,不錯,這是因為還差一步——定義CSS,我們需要將CSS內容也拷貝進后臺:

<style>

#demo1{

position:relative;

width:750px;

padding-top:29px;

}

#demo1.ks-switchable-nav{position:absolute;left:20px;margin-top:-29px;z-index:99;}

#demo1.ks-switchable-navli{

float:left;

width:130px;

height:27px;

line-height:21px;

text-align:center;

background:url(http://img03.taobaocdn.com/tps/i3/T1de0RXlhAXXXXXXXX-130-70.gif)no-repeat06px;

margin-right:3px;

padding-top:8px;

cursor:pointer;

}

#demo1.ks-switchable-navli.ks-active{background-position:0-40px;cursor:default;}

#demo1.ks-switchable-content{

position:relative;

height:120px;

padding:20px;

border:1pxsolid#AEC7E5;

}

#demo1.unselected.clsli{float:left;}

</style>

這樣將Html和CSS內容融合到一起使用,才能讓輪播焦點圖起到效果。而且我們還可以利用CSS將它的樣式改變,比如將Tab標簽的觸發區域放在內容區下面等等。

下面是配置參數列表,我們可以根據它的可選參數,制作出適合自己的特殊效果。配置參數列表:

比如我們想讓觸發點變成鼠標點擊觸發,那么可以修改為:

<divid="demo1"class="J_TWidget"data-widget-type="Tabs"data-widget-config="{

triggerType:click,

}">

<!--code-->

</div>

怎么樣,學會了嗎,其實這些一點也不難,只用掌握怎樣應用而以。

樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。

本文內容整合網站:百度百科、知乎、淘寶平臺規則

本文來源: 淘寶拓展版Tab標簽輪播代碼

分享與收藏:  網商學院搜索  告訴好友  關閉窗口  打印本文 本文關鍵字:
 
更多..資源下載
淘寶店鋪裝修圖文
淘寶店鋪裝修如何實現全屏輪播 淘寶裝修子賬號設置流程
淘寶店鋪,天貓店鋪背景固定的方法。
淘寶店鋪裝修網商學院推薦
淘寶店鋪裝修點擊排行
 
手機版 手機掃描訪問
主站蜘蛛池模板: 91最新91精品91蝌蚪 | 亚洲欧美在线观看 | 中文字幕一区二区三区视频在线 | 九九视频免费在线观看 | 亚洲小视频在线播放 | 中文字幕精品视频在线 | 亚洲成a人v | 欧美一级专区免费大片俄罗斯 | 国产一区二区三区不卡免费观看 | 免费看亚洲 | 亚洲热视频 | 欧美孕妇孕交 | 国产高清视频a在线大全 | 中文字幕亚洲综合久久 | 久久一区二区三区免费播放 | 欧美精品亚洲精品日韩专区 | 日韩亚洲国产综合久久久 | 国产精品免费一区二区三区四区 | 韩国一级毛片大全女教师 | 欧美激情国内自拍偷 | 色伦网| 国产露脸3p普通话 | 日本人成在线视频免费播放 | 亚洲视频在线一区 | 成人观看网站a | 91九色国产porny | 一级特黄aa大片欧美网站 | 精品国产日韩亚洲一区二区 | 免费在线观看一区二区 | 国产在亚洲线视频观看 | 一区二区3区免费视频 | 免费国产成人高清在线观看不卡 | 日韩一级精品久久久久 | 中文字幕国产一区 | 免费在线观看a级毛片 | 欧美日韩高清不卡一区二区三区 | 青青草国产免费国产是公开 | 中文字幕1区 | 国内精品99 | 一级在线视频 | 欧美一级视屏 |