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)前可見滾動(dòng)項(xiàng)組成列表,該列表為一個(gè)jquery對(duì)象,可見滾動(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 | 參見配置對(duì)象的onBeforeSeek相關(guān)說(shuō)明 |
| onSeek(fn) | API | 參見配置對(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)可參見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)前可見滾動(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常見經(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 jqPlot API 中文使用教程(非常強(qiáng)大的圖表工具)
這里貢獻(xiàn)上中文教程,基本上所有的api都很齊全,供有需要的童鞋們瞧瞧,更重要的是作為自己滴收藏2011-08-08
jquery中實(shí)現(xiàn)時(shí)間戳與日期相互轉(zhuǎn)換
本文主要利用jquery擴(kuò)展寫了一個(gè)myTime對(duì)象,并寫了2個(gè)函數(shù)分別處理日期和時(shí)間戳之間的相互轉(zhuǎn)換。2016-04-04
jQuery插件ImageDrawer.js實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫(附源碼下載)
ImageDrawer.js是一款可以實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫的jQuery插件,接下來(lái)通過(guò)本文給大家介紹jQuery插件ImageDrawer.js實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫(附源碼下載),需要的朋友參考下2016-02-02
使用jQuery 操作table 完成單元格合并的實(shí)例
下面小編就為大家分享一篇使用jQuery 操作table 完成單元格合并的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
jQuery動(dòng)態(tài)地獲取系統(tǒng)時(shí)間實(shí)現(xiàn)代碼
jquery獲取當(dāng)前年份、獲取當(dāng)前月份(0——11),具體思路及代碼如下,感興趣的朋友可以參考下哈,希望可以幫助到你2013-05-05

