快捷導(dǎo)航

jquery tools 系列 scrollable（2）

更新時(shí)間：2009年09月06日 12:01:21 作者：

本文詳細(xì)介紹scrollable中方法使用及本文完整示例。

scrollable提供的一系列獲取scrollable對(duì)象的方法具體使用方式如下：

var scrollable=$("div.scrollable").scrollable(); 
    //alert(scrollable.getConf().prev);//獲取配置對(duì)象中的prev屬性 
    scrollable.getConf().speed=200;//設(shè)置配置對(duì)象的speed屬性 
    //alert(scrollable.getIndex());//獲取當(dāng)前滾動(dòng)項(xiàng)的索引 
    //alert(scrollable.getItems().length);//獲取當(dāng)前滾動(dòng)項(xiàng)的數(shù)量 
    //alert(scrollable.getItemWrap().html());//獲取包含滾動(dòng)項(xiàng)的節(jié)點(diǎn)(class=scrollable)，并將所有滾動(dòng)項(xiàng)顯示出來(lái) 
    //alert(scrollable.getPageAmount());//獲取當(dāng)前滾動(dòng)欄分頁(yè)數(shù) 
    //alert(scrollable.getPageIndex());//獲取當(dāng)前所在分頁(yè) 
    //alert(scrollable.getRoot().html());//獲取滾動(dòng)項(xiàng)的上一級(jí)節(jié)點(diǎn)（id=thumbs） 
    //alert(scrollable.getSize()); 
    //alert(scrollable.getVisibleItems().length);//獲取當(dāng)前可見(jiàn)滾動(dòng)項(xiàng)數(shù)量 
    scrollable.next();//如果有下一個(gè)滾動(dòng)項(xiàng)，則跳轉(zhuǎn)到下一個(gè)滾動(dòng)項(xiàng) 
    scrollable.prev(3000,function(){return true});//跳轉(zhuǎn)到前一滾動(dòng)項(xiàng) 
    //var seekTo= scrollable.click(0).seekTo(2,1000,function(){ 
        //alert(this.getIndex()); 
    //}); 

    //scrollable.move(2); 
    //scrollable.prevPage();//跳轉(zhuǎn)到前一頁(yè) 
    //scrollable.nextPage();//跳轉(zhuǎn)到下一頁(yè) 
    //scrollable.setPage(1);//跳轉(zhuǎn)到下一頁(yè) 
    //scrollable.begin();//跳轉(zhuǎn)到第一個(gè)滾動(dòng)項(xiàng) 
    //scrollable.end();//跳轉(zhuǎn)到最后一個(gè)滾動(dòng)項(xiàng) 
    scrollable.click(3);//使第四個(gè)滾動(dòng)項(xiàng)處于選中狀態(tài) 

    scrollable.onBeforeSeek(function(){ 
            alert("you click the "+this.getIndex()+"st scrollable item!"); 
    }); 

    $("#remove").click(function(){ 
        scrollable.getItems().filter(":last").remove();//刪除最后一個(gè)滾動(dòng)項(xiàng) 
        scrollable.reload().prev();//自動(dòng)更新相關(guān)配置信息，并跳轉(zhuǎn)到被刪除滾動(dòng)項(xiàng)的前一項(xiàng) 
    });

以下是scrollable對(duì)象的方法說(shuō)明描述：

方法名稱(chēng)	返回值	說(shuō)明
getConf()	Object	返回scrollable的配置對(duì)象，并且可通過(guò)設(shè)置該對(duì)象的相關(guān)屬性值來(lái)修改該配置對(duì)象的屬性。
getIndex()	number	獲取當(dāng)前滾動(dòng)項(xiàng)的索引號(hào)，0代表第一個(gè)元素，1代表第二個(gè)元素，以此類(lèi)推。此外，需注意的是，如果獲取到多個(gè)滾動(dòng)項(xiàng)，那么將會(huì)只返回第一個(gè)滾動(dòng)項(xiàng)的索引號(hào)。
getItems()	jQuery	返回所有的滾動(dòng)項(xiàng)，結(jié)果以jquery對(duì)象的方式返回。
getItemWrap()	jQuery	獲取滾動(dòng)項(xiàng)的父節(jié)點(diǎn)，結(jié)果以jquery對(duì)象的方式返回。
getPageAmount()	number	獲取當(dāng)前滾動(dòng)欄的分頁(yè)數(shù)。
getPageIndex()	number	返回當(dāng)前分頁(yè)索引號(hào)。比如說(shuō)，如果分頁(yè)設(shè)置為5個(gè)滾動(dòng)項(xiàng)/頁(yè)，并且當(dāng)前滾動(dòng)項(xiàng)位置為7的話，那么將會(huì)返回1（第二頁(yè)）
getRoot()	jQuery	獲取滾動(dòng)項(xiàng)的上一級(jí)節(jié)點(diǎn)。
getSize()	number	返回滾動(dòng)項(xiàng)的數(shù)量。該方法等同于getConf().size
getVisibleItems()	jQuery	獲取一個(gè)由當(dāng)前可見(jiàn)滾動(dòng)項(xiàng)組成列表，該列表為一個(gè)jquery對(duì)象，可見(jiàn)滾動(dòng)項(xiàng)的數(shù)量由配置對(duì)象的size屬性定義。

reload()	API	scrollable支持動(dòng)態(tài)添加和刪除滾動(dòng)項(xiàng)的功能。在動(dòng)態(tài)添加或刪除滾動(dòng)項(xiàng)以后，調(diào)用此方法來(lái)自動(dòng)更新分頁(yè)導(dǎo)航以及滾動(dòng)項(xiàng)移動(dòng)的相關(guān)信息。
prev()	API	跳轉(zhuǎn)到該滾動(dòng)項(xiàng)的前一項(xiàng)（如果該滾動(dòng)項(xiàng)不是第一個(gè)滾動(dòng)項(xiàng)）
next()	API	跳轉(zhuǎn)到該滾動(dòng)項(xiàng)的下一項(xiàng)（如果該滾動(dòng)項(xiàng)不是最后一個(gè)滾動(dòng)項(xiàng)）
seekTo(index)	API	跳轉(zhuǎn)到指定索引處的滾動(dòng)項(xiàng)。
move(offset)	API	將處于當(dāng)前狀態(tài)（激活）的滾動(dòng)項(xiàng)位置由當(dāng)前滾動(dòng)項(xiàng)向前/后移動(dòng)offset。Offset為正，則滾動(dòng)項(xiàng)向右/下移動(dòng)，否則，向左/上移動(dòng)。比如:move(2),則處于當(dāng)前狀態(tài)的滾動(dòng)項(xiàng)的索引由i滾動(dòng)項(xiàng)轉(zhuǎn)移至i+2滾動(dòng)項(xiàng)。
prevPage()	API	跳轉(zhuǎn)到前一頁(yè)（如果該頁(yè)不是第一頁(yè)）。
nextPage()	API	跳轉(zhuǎn)到后一頁(yè)（如果該頁(yè)不是最后一頁(yè)）。
setPage(index)	API	跳轉(zhuǎn)到第index頁(yè)。比如，index=2,那么會(huì)從當(dāng)前頁(yè)跳轉(zhuǎn)到第3頁(yè)。
movePage(offset)	API	用于將顯示頁(yè)的位置由當(dāng)前頁(yè)切換到該頁(yè)/后offset頁(yè)，該方法其他解釋類(lèi)似于(offset)。
begin()	API	跳轉(zhuǎn)到第一個(gè)滾動(dòng)項(xiàng)，相當(dāng)于seekTo(0)。
end()	API	跳轉(zhuǎn)到最后一個(gè)滾動(dòng)項(xiàng)。
click(index)	API	使第index個(gè)滾動(dòng)項(xiàng)處于選中（激活）狀態(tài)。

onBeforeSeek(fn)	API	參見(jiàn)配置對(duì)象的onBeforeSeek相關(guān)說(shuō)明
onSeek(fn)	API	參見(jiàn)配置對(duì)象的onSeek相關(guān)說(shuō)明

注意：上面方法表中prev()方法以下的方法除了表中攜帶的參數(shù)外，還包含兩個(gè)隱含參數(shù)：speed和callback。其中speed參數(shù)是用于控制滾動(dòng)項(xiàng)的動(dòng)畫(huà)效果持續(xù)時(shí)間的，而callback為其回調(diào)方法。具體實(shí)現(xiàn)可參見(jiàn)scrollable的prev()方法使用示例。

最后，給出本scrollable系列的完整示例代碼：

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script> 
<script src="http://static.flowplayer.org/js/jquery.mousewheel.js" ></script> 
<link rel="stylesheet" type="text/css"  /> 

<style><!-- 
div.scrollable { 
    position:relative; 
    overflow:hidden; 
    width: 646px;     
    height:300px;     
} 

#thumbs {     
    position:absolute; 
    width:20000em;     
    clear:both; 
    border:1px solid #222; 
} 

a.prev, a.next { 
    margin-top:118px;     
} 

#thumbs div { 
    float:left; 
    width:214px; 
    height:300px; 
    background:#333 url(/upload/20090906120115441.png) repeat-x 0 146px; 
    color:#fff; 
    border-left:1px solid #333; 
    cursor:pointer; 
} 

#thumbs div.hover { 
    background-color:#444;     
} 

#thumbs div.active { 
    background-color:#066; 
    cursor:default; 
} 

#thumbs h3, #thumbs p, #thumbs span { 
    margin:13px;         
    font-family:"bitstream vera sans"; 
    font-size:13px; 
    color:#fff;     
} 

#thumbs h3 em { 
    font-style:normal; 
    color:yellow; 
} 
--></style><style>div.scrollable { 
    position:relative; 
    overflow:hidden; 
    width: 646px;     
    height:300px;     
} 

#thumbs {     
    position:absolute; 
    width:20000em;     
    clear:both; 
    border:1px solid #222; 
} 

a.prev, a.next { 
    margin-top:118px;     
} 

#thumbs div { 
    float:left; 
    width:214px; 
    height:300px; 
    background:#333 url(/upload/20090906120115441.png) repeat-x 0 146px; 
    color:#fff; 
    border-left:1px solid #333; 
    cursor:pointer; 
} 

#thumbs div.hover { 
    background-color:#444;     
} 

#thumbs div.active { 
    background-color:#066; 
    cursor:default; 
} 

#thumbs h3, #thumbs p, #thumbs span { 
    margin:13px;         
    font-family:"bitstream vera sans"; 
    font-size:13px; 
    color:#fff;     
} 

#thumbs h3 em { 
    font-style:normal; 
    color:yellow; 
}</style> 




<!-- navigator --> 
<div class="navi"></div> 

<!-- prev link --> 
<a class="prev"></a> 

<!-- root element for scrollable --> 
<div class="scrollable"> 

    <div id="thumbs"> 

         
            <div> 

                <img src="/upload/20090906120116994.jpg" /> 

                <h3><em>1. </em>An example title</h3> 

                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a. 
                </p> 

                <span class="blue">60 sec</span> 

            </div> 

            <div> 

                <img src="/upload/20090906120117587.jpg" /> 

                <h3><em>2. </em>An example title</h3> 

                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a. 
                </p> 

                <span class="blue">80 sec</span> 

            </div> 

            <div> 

                <img src="/upload/20090906120117884.jpg" /> 

                <h3><em>3. </em>An example title</h3> 

                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a. 
                </p> 

                <span class="blue">100 sec</span> 

            </div> 

            <div> 

                <img src="/upload/20090906120117490.jpg" /> 

                <h3><em>4. </em>An example title</h3> 

                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a. 
                </p> 

                <span class="blue">120 sec</span> 

            </div> 

            <div> 

                <img src="/upload/20090906120118968.jpg" /> 

                <h3><em>5. </em>An example title</h3> 

                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a. 
                </p> 

                <span class="blue">140 sec</span> 

            </div> 

    </div> 

</div> 

<!-- next link --> 
<a class="next"></a> 

<!-- let rest of the page float normally --> 
<br clear="all" /> 
<div> 
    <input type="button" value="remove" id="remove"/> 
</div> 
<script type="text/javascript"><!-- 
$(function() {         

    $("div.scrollable").scrollable({ 
        size: 3, 
        vertical:false, 
        //clickable:false, 
        loop:true,//設(shè)置是否自動(dòng)跳轉(zhuǎn)（根據(jù)間隔時(shí)間） 
        //interval: 1000,//設(shè)置間歇時(shí)間間隔 
        //speed:2000, 
        items: '#thumbs', 
        //prev:'.prev',//跳轉(zhuǎn)到上一項(xiàng) 
        //next:'.next'//跳轉(zhuǎn)到下一項(xiàng) 
        prevPage:'.prev',//跳轉(zhuǎn)到上一頁(yè) 
        nextPage:'.next',//跳轉(zhuǎn)到下一頁(yè) 
        hoverClass: 'hover', 
        easing:'linear' 
    });     

    var scrollable=$("div.scrollable").scrollable(); 
    //alert(scrollable.getConf().prev);//獲取配置對(duì)象中的prev屬性 
    scrollable.getConf().speed=200;//設(shè)置配置對(duì)象的speed屬性 
    //alert(scrollable.getIndex());//獲取當(dāng)前滾動(dòng)項(xiàng)的索引 
    //alert(scrollable.getItems().length);//獲取當(dāng)前滾動(dòng)項(xiàng)的數(shù)量 
    //alert(scrollable.getItemWrap().html());//獲取包含滾動(dòng)項(xiàng)的節(jié)點(diǎn)(class=scrollable)，并將所有滾動(dòng)項(xiàng)顯示出來(lái) 
    //alert(scrollable.getPageAmount());//獲取當(dāng)前滾動(dòng)欄分頁(yè)數(shù) 
    //alert(scrollable.getPageIndex());//獲取當(dāng)前所在分頁(yè) 
    //alert(scrollable.getRoot().html());//獲取滾動(dòng)項(xiàng)的上一級(jí)節(jié)點(diǎn)（id=thumbs） 
    //alert(scrollable.getSize()); 
    //alert(scrollable.getVisibleItems().length);//獲取當(dāng)前可見(jiàn)滾動(dòng)項(xiàng)數(shù)量 
    scrollable.next();//如果有下一個(gè)滾動(dòng)項(xiàng)，則跳轉(zhuǎn)到下一個(gè)滾動(dòng)項(xiàng) 
    scrollable.prev(3000,function(){return true});//跳轉(zhuǎn)到前一滾動(dòng)項(xiàng) 
    //var seekTo= scrollable.click(0).seekTo(2,1000,function(){ 
        //alert(this.getIndex()); 
    //}); 

    //scrollable.move(2); 
    //scrollable.prevPage();//跳轉(zhuǎn)到前一頁(yè) 
    //scrollable.nextPage();//跳轉(zhuǎn)到下一頁(yè) 
    //scrollable.setPage(1);//跳轉(zhuǎn)到下一頁(yè) 
    //scrollable.begin();//跳轉(zhuǎn)到第一個(gè)滾動(dòng)項(xiàng) 
    //scrollable.end();//跳轉(zhuǎn)到最后一個(gè)滾動(dòng)項(xiàng) 
    scrollable.click(3);//使第四個(gè)滾動(dòng)項(xiàng)處于選中狀態(tài) 

    scrollable.onBeforeSeek(function(){ 
            alert("you click the "+this.getIndex()+"st scrollable item!"); 
    }); 

    $("#remove").click(function(){ 
        scrollable.getItems().filter(":last").remove();//刪除最后一個(gè)滾動(dòng)項(xiàng) 
        scrollable.reload().prev();//自動(dòng)更新相關(guān)配置信息，并跳轉(zhuǎn)到被刪除滾動(dòng)項(xiàng)的前一項(xiàng) 
    }); 

}); 
// --></script>