您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關如何在jQuery中使用scrollable.js滾動插件,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據這篇文章可以有所收獲。
以下scrollable.js方法說明描述:
方法名稱 | 返回值 | 說明 |
getConf() | Object | 返回scrollable的配置對象,并且可通過設置該對象的相關屬性值來修改該配置對象的屬性。 |
getIndex() | number | 獲取當前滾動項的索引號,0代表第一個元素,1代表第二個元素,以此類推。此外,需注意的是,如果獲取到多個滾動項,那么將會只返回第一個滾動項的索引號。 |
getItems() | jQuery | 返回所有的滾動項,結果以jquery對象的方式返回。 |
getItemWrap() | jQuery | 獲取滾動項的父節點,結果以jquery對象的方式返回。 |
getPageAmount() | number | 獲取當前滾動欄的分頁數。 |
getPageIndex() | number | 返回當前分頁索引號。比如說,如果分頁設置為5個滾動項/頁,并且當前滾動項位置為7的話,那么將會返回1(第二頁) |
getRoot() | jQuery | 獲取滾動項的上一級節點。 |
getSize() | number | 返回滾動項的數量。該方法等同于getConf().size |
getVisibleItems() | jQuery | 獲取一個由當前可見滾動項組成列表,該列表為一個jquery對象,可見滾動項的數量由配置對象的size屬性定義。 |
reload() | API | scrollable支持動態添加和刪除滾動項的功能。在動態添加或刪除滾動項以后,調用此方法來自動更新分頁導航以及滾動項移動的相關信息。 |
prev() | API | 跳轉到該滾動項的前一項(如果該滾動項不是第一個滾動項) |
next() | API | 跳轉到該滾動項的下一項(如果該滾動項不是最后一個滾動項) |
seekTo(index) | API | 跳轉到指定索引處的滾動項。 |
move(offset) | API | 將處于當前狀態(激活)的滾動項位置由當前滾動項向前/后移動offset。Offset為正,則滾動項向右/下移動,否則,向左/上移動。比如:move(2),則處于當前狀態的滾動項的索引由i滾動項轉移至i+2滾動項。 |
prevPage() | API | 跳轉到前一頁(如果該頁不是第一頁)。 |
nextPage() | API | 跳轉到后一頁(如果該頁不是最后一頁)。 |
setPage(index) | API | 跳轉到第index頁。比如,index=2,那么會從當前頁跳轉到第3頁。 |
movePage(offset) | API | 用于將顯示頁的位置由當前頁切換到該頁/后offset頁,該方法其他解釋類似于(offset)。 |
begin() | API | 跳轉到第一個滾動項,相當于seekTo(0)。 |
end() | API | 跳轉到最后一個滾動項。 |
click(index) | API | 使第index個滾動項處于選中(激活)狀態。 |
onBeforeSeek(fn) | API | 參見配置對象的onBeforeSeek相關說明 |
onSeek(fn) | API | 參見配置對象的onSeek相關說明 |
注意:上面方法表中prev()
方法以下的方法除了表中攜帶的參數外,還包含兩個隱含參數:speed和callback。其中speed參數是用于控制滾動項的動畫效果持續時間的,而callback為其回調方法。具體實現可參見scrollable的prev()
方法使用示例。
具體使用方法:
var scrollable=$("div.scrollable").scrollable(); //alert(scrollable.getConf().prev);//獲取配置對象中的prev屬性 scrollable.getConf().speed=200;//設置配置對象的speed屬性 //alert(scrollable.getIndex());//獲取當前滾動項的索引 //alert(scrollable.getItems().length);//獲取當前滾動項的數量 //alert(scrollable.getItemWrap().html());//獲取包含滾動項的節點(class=scrollable),并將所有滾動項顯示出來 //alert(scrollable.getPageAmount());//獲取當前滾動欄分頁數 //alert(scrollable.getPageIndex());//獲取當前所在分頁 //alert(scrollable.getRoot().html());//獲取滾動項的上一級節點(id=thumbs) //alert(scrollable.getSize()); //alert(scrollable.getVisibleItems().length);//獲取當前可見滾動項數量 scrollable.next();//如果有下一個滾動項,則跳轉到下一個滾動項 scrollable.prev(3000,function(){return true});//跳轉到前一滾動項 //var seekTo= scrollable.click(0).seekTo(2,1000,function(){ //alert(this.getIndex()); //}); //scrollable.move(2); //scrollable.prevPage();//跳轉到前一頁 //scrollable.nextPage();//跳轉到下一頁 //scrollable.setPage(1);//跳轉到下一頁 //scrollable.begin();//跳轉到第一個滾動項 //scrollable.end();//跳轉到最后一個滾動項 scrollable.click(3);//使第四個滾動項處于選中狀態 scrollable.onBeforeSeek(function(){ alert("you click the "+this.getIndex()+"st scrollable item!"); }); $("#remove").click(function(){ scrollable.getItems().filter(":last").remove();//刪除最后一個滾動項 scrollable.reload().prev();//自動更新相關配置信息,并跳轉到被刪除滾動項的前一項 });
另外,如果你的表單頁面要自適應屏幕并且resize的話能讓表單頁面不至于偏離,可以使用 scrollable.seekTo(index)
來解決。
看完上述內容,你們對如何在jQuery中使用scrollable.js滾動插件有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注億速云行業資訊頻道,感謝大家的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。