亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery滾動(dòng)插件scrollable.js用法分析

 更新時(shí)間:2017年05月25日 12:02:13   作者:GQ_cyan  
這篇文章主要介紹了jQuery滾動(dòng)插件scrollable.js用法,簡(jiǎn)單分析了scrollable.js的功能、方法及相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery滾動(dòng)插件scrollable.js用法。分享給大家供大家參考,具體如下:

Scrollable是一個(gè)靈活、輕量級(jí)用于創(chuàng)建滾動(dòng)內(nèi)容的jQuery插件。任何內(nèi)容(HTML、視頻、文件、圖片等...)都可以作為一個(gè)滾動(dòng)項(xiàng)。支持水平與垂直兩種滾動(dòng)方向。

用途:滾動(dòng)效果,可制作分步驗(yàn)證頁(yè)面

以下scrollable.js方法說(shuō)明描述:

方法名稱
返回值 說(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è)元素,以此類推。此外,需注意的是,如果獲取到多個(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è),該方法其他解釋類似于(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)畫效果持續(xù)時(shí)間的,而callback為其回調(diào)方法。具體實(shí)現(xiàn)可參見(jiàn)scrollable的prev()方法使用示例。

具體使用方法:

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)
});

另外,如果你的表單頁(yè)面要自適應(yīng)屏幕并且resize的話能讓表單頁(yè)面不至于偏離,可以使用 scrollable.seekTo(index)來(lái)解決。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論