關於jQuery滾動插件scrollable.js用法分析-js教程-PHP中文網

Scrollable是一個靈活、輕量級用於創建滾動內容的jQuery插件。任何內容（HTML、影片、文件、圖片等...）都可以作為一個滾動項目。支援水平與垂直兩種滾動方向。本文主要介紹了jQuery滾動外掛scrollable.js用法,簡單分析了scrollable.js的功能、方法及相關使用技巧,需要的朋友可以參考下，希望能幫助到大家。

用途：捲動效果，可製作逐步驗證頁面

以下scrollable.js方法說明說明：

##取得目前捲動列的分頁數。 getPageIndex()#number

方法名稱 #	傳回值	說明
getConf()	Object	返回scrollable的配置對象，並且可透過設定該對象的相關屬性值來修改該配置物件的屬性。
getIndex()	#number	##取得目前滾動項的索引號，0代表第一個元素，1代表第二個元素，以此類推。此外，需要注意的是，如果取得到多個滾動項，那麼將會只傳回第一個滾動項的索引號。
getItems()	#jQuery	傳回所有的捲動項，結果以jquery物件的方式傳回。
getItemWrap()	#jQuery	##取得捲動項目的父節點，結果以jquery物件的方式傳回。
getPageAmount()	#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)		#使第index個滾動項處於選取（啟動）狀態。
#
onBeforeSeek(fn)	#API	參考設定物件的onBeforeSeek相關說明
onSeek(fn)	API	#請參考配置物件的onSeek相關說明

#注意：上面方法表中prev()方法以下的方法除了表中攜帶的參數外，還包含兩個隱含參數：speed和callback。其中speed參數是用來控制滾動項的動畫效果持續時間的，而callback為其回呼方法。具體實作可參考scrollable的prev()方法使用範例。

具體使用方法：

var scrollable=$("p.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 tools 系列 scrollable學習_jquery

jquery tools 系列 scrollable（2）_jquery

#jquery tools 系列 scrollable（2）_jquery

jQuery中關於ScrollableGridPlugin.js（固定表頭）外掛程式的使用逐步解析_jquery#######

以上是關於jQuery滾動插件scrollable.js用法分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！