SuperSlide之屬性targetCell介紹

禁用頁面菜單js代碼:javascript

<script type="text/javascript">
document.oncontextmenu=function(){ return false; }
</script>

1.默認html框架:html

<div class="slideTxtBox">
    <div class="hd">
    <div class="db">
        <ul>
        <ul style="display:none;">
        <ul style="display:none;">
    </div>
</div>

標註:mianCell是SuperSlide裏面最重要參數之一,並且規定了它必須爲「」切換內容的包裹層「,例如在這裏是「」.db「」java

2.不知足默認HTML結構框架

<div class="slideTxtBox">
    <dt class="hd">
   <dd style="display:block;">
   <dd style="display:none;">
   <dd style="display:none;">
</div>

標註:有時候咱們的html結構不必定能知足這個要求,例如這裏我想換「dd「,但dd沒有包裹層,不能應用到mainCell;ide

targetCell的引入就是爲了解決此類問題,並能實現更多功能。學習

3.targetCell:切換元素對象,能和提提Cell,mainCell同時使用,只支持fade效果。spa

<div class="slideTxtBox">
    <dt class="hd">
   <dd style="display:block;">
   <dd style="display:none;">
   <dd style="display:none;">
</div>
jQuery(".slideTxtBox").slide({titCell:'.hd li',targetCell:"dd"});

4.例如這裏我想會控制.con的顯示消失。code

<div class="slideTxtBox">
     <h3>
     <div class="con">
     <h3>
     <div class="con">
      <h3>
     <div class="con">
</div>

這裏咱們能夠這樣寫的:htm

jQuery('.slideTxtBox').slide({titCell:"h3",targetCell:'.con'});

 

2、實例:titCell,mainCell,targetCell同時應用對象

有時候咱們會遇到 Tab 切換右側有「更多」的狀況,此時 targetCell 能很好解決問題。

效果以下:

代碼以下,注意觀察 targetCell:

<div class="slideTxtBox">
    <div class="hd">
        <span class="more">
            <a href="#">> 更多1</a>
            <a href="#">> 更多2</a>
            <a href="#">> 更多3</a>
        </span>
        <ul><li>教育</li><li>培訓</li><li>出國</li></ul>
    </div>
    <div class="bd">
        <ul>
            <li><span class="date">2011-11-11</span><a href="#">中國打破了世界軟件巨頭規則</a></li>
            <li><span class="date">2011-11-11</span><a href="#">口語:會說中文就能說英語!</a></li>
            <li><span class="date">2011-11-11</span><a href="#">農場摘菜不如在線學外語好玩</a></li>
            <li><span class="date">2011-11-11</span><a href="#">數理化老師竟也看學習資料?</a></li>
        </ul>
        <ul>
            <li><span class="date">2011-11-11</span><a href="#">名師教做文:3妙招巧寫高分</a></li>
            <li><span class="date">2011-11-11</span><a href="#">耶魯小子:教你備考SAT</a></li>
            <li><span class="date">2011-11-11</span><a href="#">施強:高端專業語言教學</a></li>
            <li><span class="date">2011-11-11</span><a href="#">數理化老師竟也看學習資料?</a></li>
        </ul>
        <ul>
            <li><span class="date">2011-11-11</span><a href="#">澳大利亞八大名校招生說明會</a></li>
            <li><span class="date">2011-11-11</span><a href="#">2012世界大學排名新鮮出爐</a></li>
            <li><span class="date">2011-11-11</span><a href="#">新加坡留學,國際雙語課程</a></li>
            <li><span class="date">2011-11-11</span><a href="#">高考後留學日本名校隨你選</a></li>
        </ul>
    </div>
</div>

js腳本:

jQuery(".slideTxtBox").slide({ titCell:".hd li", mainCell:".bd", targetCell:".more a", autoPlay:true});
相關文章
相關標籤/搜索