jQuery滾動插件scrollable.js用法分析
本文實例講述了jQuery滾動插件scrollable.js用法。分享給大家供大家參考,具體如下:
Scrollable是一個靈活、輕量級用于創(chuàng)建滾動內(nèi)容的jQuery插件。任何內(nèi)容(HTML、視頻、文件、圖片等...)都可以作為一個滾動項。支持水平與垂直兩種滾動方向。
用途:滾動效果,可制作分步驗證頁面
以下scrollable.js方法說明描述:
|
方法名稱
|
返回值 | 說明 |
| getConf() | Object | 返回scrollable的配置對象,并且可通過設置該對象的相關屬性值來修改該配置對象的屬性。 |
| getIndex() | number | 獲取當前滾動項的索引號,0代表第一個元素,1代表第二個元素,以此類推。此外,需注意的是,如果獲取到多個滾動項,那么將會只返回第一個滾動項的索引號。 |
| getItems() | jQuery | 返回所有的滾動項,結(jié)果以jquery對象的方式返回。 |
| getItemWrap() | jQuery | 獲取滾動項的父節(jié)點,結(jié)果以jquery對象的方式返回。 |
| getPageAmount() | number | 獲取當前滾動欄的分頁數(shù)。 |
| getPageIndex() | number | 返回當前分頁索引號。比如說,如果分頁設置為5個滾動項/頁,并且當前滾動項位置為7的話,那么將會返回1(第二頁) |
| getRoot() | jQuery | 獲取滾動項的上一級節(jié)點。 |
| getSize() | number | 返回滾動項的數(shù)量。該方法等同于getConf().size |
| getVisibleItems() | jQuery | 獲取一個由當前可見滾動項組成列表,該列表為一個jquery對象,可見滾動項的數(shù)量由配置對象的size屬性定義。 |
| reload() | API | scrollable支持動態(tài)添加和刪除滾動項的功能。在動態(tài)添加或刪除滾動項以后,調(diào)用此方法來自動更新分頁導航以及滾動項移動的相關信息。 |
| prev() | API | 跳轉(zhuǎn)到該滾動項的前一項(如果該滾動項不是第一個滾動項) |
| next() | API | 跳轉(zhuǎn)到該滾動項的下一項(如果該滾動項不是最后一個滾動項) |
| seekTo(index) | API | 跳轉(zhuǎn)到指定索引處的滾動項。 |
| move(offset) | API | 將處于當前狀態(tài)(激活)的滾動項位置由當前滾動項向前/后移動offset。Offset為正,則滾動項向右/下移動,否則,向左/上移動。比如:move(2),則處于當前狀態(tài)的滾動項的索引由i滾動項轉(zhuǎn)移至i+2滾動項。 |
| prevPage() | API | 跳轉(zhuǎn)到前一頁(如果該頁不是第一頁)。 |
| nextPage() | API | 跳轉(zhuǎn)到后一頁(如果該頁不是最后一頁)。 |
| setPage(index) | API | 跳轉(zhuǎn)到第index頁。比如,index=2,那么會從當前頁跳轉(zhuǎn)到第3頁。 |
| movePage(offset) | API | 用于將顯示頁的位置由當前頁切換到該頁/后offset頁,該方法其他解釋類似于(offset)。 |
| begin() | API | 跳轉(zhuǎn)到第一個滾動項,相當于seekTo(0)。 |
| end() | API | 跳轉(zhuǎn)到最后一個滾動項。 |
| click(index) | API | 使第index個滾動項處于選中(激活)狀態(tài)。 |
| onBeforeSeek(fn) | API | 參見配置對象的onBeforeSeek相關說明 |
| onSeek(fn) | API | 參見配置對象的onSeek相關說明 |
注意:上面方法表中prev()方法以下的方法除了表中攜帶的參數(shù)外,還包含兩個隱含參數(shù):speed和callback。其中speed參數(shù)是用于控制滾動項的動畫效果持續(xù)時間的,而callback為其回調(diào)方法。具體實現(xiàn)可參見scrollable的prev()方法使用示例。
具體使用方法:
var scrollable=$("div.scrollable").scrollable();
//alert(scrollable.getConf().prev);//獲取配置對象中的prev屬性
scrollable.getConf().speed=200;//設置配置對象的speed屬性
//alert(scrollable.getIndex());//獲取當前滾動項的索引
//alert(scrollable.getItems().length);//獲取當前滾動項的數(shù)量
//alert(scrollable.getItemWrap().html());//獲取包含滾動項的節(jié)點(class=scrollable),并將所有滾動項顯示出來
//alert(scrollable.getPageAmount());//獲取當前滾動欄分頁數(shù)
//alert(scrollable.getPageIndex());//獲取當前所在分頁
//alert(scrollable.getRoot().html());//獲取滾動項的上一級節(jié)點(id=thumbs)
//alert(scrollable.getSize());
//alert(scrollable.getVisibleItems().length);//獲取當前可見滾動項數(shù)量
scrollable.next();//如果有下一個滾動項,則跳轉(zhuǎn)到下一個滾動項
scrollable.prev(3000,function(){return true});//跳轉(zhuǎn)到前一滾動項
//var seekTo= scrollable.click(0).seekTo(2,1000,function(){
//alert(this.getIndex());
//});
//scrollable.move(2);
//scrollable.prevPage();//跳轉(zhuǎn)到前一頁
//scrollable.nextPage();//跳轉(zhuǎn)到下一頁
//scrollable.setPage(1);//跳轉(zhuǎn)到下一頁
//scrollable.begin();//跳轉(zhuǎn)到第一個滾動項
//scrollable.end();//跳轉(zhuǎn)到最后一個滾動項
scrollable.click(3);//使第四個滾動項處于選中狀態(tài)
scrollable.onBeforeSeek(function(){
alert("you click the "+this.getIndex()+"st scrollable item!");
});
$("#remove").click(function(){
scrollable.getItems().filter(":last").remove();//刪除最后一個滾動項
scrollable.reload().prev();//自動更新相關配置信息,并跳轉(zhuǎn)到被刪除滾動項的前一項
});
另外,如果你的表單頁面要自適應屏幕并且resize的話能讓表單頁面不至于偏離,可以使用 scrollable.seekTo(index)來解決。
更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設計有所幫助。
- jQuery中關于ScrollableGridPlugin.js(固定表頭)插件的使用逐步解析
- jquery tools 系列 scrollable(2)
- jquery tools 系列 scrollable學習
- jQuery控制li上下循環(huán)滾動插件用法實例(附demo源碼下載)
- 基于JQuery實現(xiàn)仿網(wǎng)易郵箱全屏動感滾動插件fullPage
- 基于編寫jQuery的無縫滾動插件
- 基于jQuery的圖片左右無縫滾動插件
- 超級有用的13個基于jQuery的內(nèi)容滾動插件和教程
- jQuery新聞滾動插件 jquery.roller.js
- jcarousellite.js 基于Jquery的圖片無縫滾動插件
- 基于jQuery圖片平滑連續(xù)滾動插件
相關文章
jquery 實現(xiàn)滾動條下拉時無限加載的簡單實例
下面小編就為大家?guī)硪黄猨query 實現(xiàn)滾動條下拉時無限加載的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
jquery實現(xiàn)html頁面 div 假分頁有原理有代碼
大概原理就是填充后div的總高度 (1000px) 顯示高度(100px) 則頁面總數(shù)為10頁 。當查看第二頁時,顯示的div高度為100 - 200之間,以此類推2014-09-09
自編jQuery插件實現(xiàn)模擬alert和confirm
現(xiàn)在絕大多數(shù)網(wǎng)站都不用自帶的alert和confirm了,因為界面太生硬了。因此這個插件就這樣產(chǎn)生了...2014-09-09
jQuery 2.0.3 源碼分析之core(一)整體架構(gòu)
這篇文章主要介紹了jQuery 2.0.3 源碼分析之core(一)整體架構(gòu),需要的朋友可以參考下2014-05-05
jQuery EasyUI 折疊面板accordion的使用實例(分享)
下面小編就為大家分享一篇jQuery EasyUI 折疊面板accordion的使用實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12

