jQuery滾動(dòng)插件scrollable.js用法分析
本文實(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ì)有所幫助。
- jQuery中關(guān)于ScrollableGridPlugin.js(固定表頭)插件的使用逐步解析
- jquery tools 系列 scrollable(2)
- jquery tools 系列 scrollable學(xué)習(xí)
- jQuery控制li上下循環(huán)滾動(dòng)插件用法實(shí)例(附demo源碼下載)
- 基于JQuery實(shí)現(xiàn)仿網(wǎng)易郵箱全屏動(dòng)感滾動(dòng)插件fullPage
- 基于編寫jQuery的無(wú)縫滾動(dòng)插件
- 基于jQuery的圖片左右無(wú)縫滾動(dòng)插件
- 超級(jí)有用的13個(gè)基于jQuery的內(nèi)容滾動(dòng)插件和教程
- jQuery新聞滾動(dòng)插件 jquery.roller.js
- jcarousellite.js 基于Jquery的圖片無(wú)縫滾動(dòng)插件
- 基于jQuery圖片平滑連續(xù)滾動(dòng)插件
相關(guān)文章
jquery 實(shí)現(xiàn)滾動(dòng)條下拉時(shí)無(wú)限加載的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery 實(shí)現(xiàn)滾動(dòng)條下拉時(shí)無(wú)限加載的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06jquery實(shí)現(xiàn)html頁(yè)面 div 假分頁(yè)有原理有代碼
大概原理就是填充后div的總高度 (1000px) 顯示高度(100px) 則頁(yè)面總數(shù)為10頁(yè) 。當(dāng)查看第二頁(yè)時(shí),顯示的div高度為100 - 200之間,以此類推2014-09-09父頁(yè)面顯示遮罩層彈出半透明狀態(tài)的dialog
本文為大家介紹下父頁(yè)面顯示遮罩層,彈出半透明狀態(tài)的dialog。dialog即彈出的子頁(yè)面,需要的朋友可以參考下2014-03-03自編jQuery插件實(shí)現(xiàn)模擬alert和confirm
現(xiàn)在絕大多數(shù)網(wǎng)站都不用自帶的alert和confirm了,因?yàn)榻缑嫣擦?。因此這個(gè)插件就這樣產(chǎn)生了...2014-09-09jQuery 2.0.3 源碼分析之core(一)整體架構(gòu)
這篇文章主要介紹了jQuery 2.0.3 源碼分析之core(一)整體架構(gòu),需要的朋友可以參考下2014-05-05jQuery EasyUI 折疊面板accordion的使用實(shí)例(分享)
下面小編就為大家分享一篇jQuery EasyUI 折疊面板accordion的使用實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12jQuery實(shí)現(xiàn)的超簡(jiǎn)單點(diǎn)贊效果實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)的超簡(jiǎn)單點(diǎn)贊效果,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)點(diǎn)贊功能的具體步驟與相關(guān)技巧,需要的朋友可以參考下2015-12-12