jQuery 스크롤 플러그인 scrollable.js의 사용 분석

Scrollable은 스크롤 콘텐츠를 생성하기 위한 유연하고 가벼운 jQuery 플러그인입니다. 모든 콘텐츠(HTML, 비디오, 파일, 이미지 등)를 스크롤 항목으로 사용할 수 있습니다. 가로 및 세로 스크롤 방향을 모두 지원합니다. 이번 글은 주로 jQuery 스크롤 플러그인인 scrollable.js의 사용법을 소개하고, scrollable.js의 기능과 방법, 관련 사용법을 간략하게 분석해 놓았으니 도움이 필요한 친구들에게 참고가 되었으면 좋겠습니다.

용도: 스크롤 효과, 단계별 확인 페이지 생성 가능

다음 scrollable.js 메소드 설명:

구성 개체의 onSeek 보기 구성 객체 관련 지침또한 양식 페이지가 화면에 맞게 조정되고 양식 페이지가 벗어나지 않도록 크기를 조정해야 하는 경우 스크롤 가능한 .seekTo(index)를 사용하여 문제를 해결하세요. 관련 추천:

메소드 이름	반환 값	Description
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	과 동일합니다. 목록은 표시되는 스크롤 항목 수입니다. 구성 객체의 크기 속성 정의에 의해 제공됩니다.
		rollable은 스크롤 항목을 동적으로 추가하고 제거하는 기능을 지원합니다. 스크롤 항목을 동적으로 추가하거나 제거한 후 이 메서드를 호출하여 페이징 탐색 및 스크롤 항목 이동에 대한 정보를 자동으로 업데이트합니다.
prev()	API	이 스크롤 항목의 이전 항목으로 이동합니다(스크롤 항목이 첫 번째 스크롤 항목이 아닌 경우)
next()	API	이 스크롤 항목의 다음 항목으로 이동합니다(이 스크롤 항목이 마지막 스크롤 항목이 아닌 경우)
seekTo(index)	API	점프 스크롤 항목 지정된 인덱스로.
move(offset)	API	은 현재 상태(활성화)의 스크롤 항목 위치를 현재 스크롤 항목 오프셋만큼 앞/뒤로 이동합니다.Offset이 양수이면 스크롤 항목이 오른쪽/아래로 이동하고, 그렇지 않으면 왼쪽/위로 이동합니다. 예: move(2), 현재 상태의 스크롤 항목 인덱스가 i 스크롤 항목에서 i+2 스크롤 항목으로 전송됩니다.
prevPage()	API	이전 페이지로 이동합니다(페이지가 첫 번째 페이지가 아닌 경우).
nextPage()	API	다음 페이지로 이동합니다(페이지가 마지막 페이지가 아닌 경우).
setPage(index)	API	인덱스 페이지로 이동합니다. 예를 들어 index=2이면 현재 페이지에서 3페이지로 이동합니다.
movePage(offset)	API	은 표시된 페이지의 위치를 ​​현재 페이지에서 이 페이지/다음 오프셋 페이지로 전환하는 데 사용됩니다. (오프셋).
begin()	API	첫 번째 스크롤 항목으로 이동합니다. 이는eekTo(0)에 해당합니다.
end()	API	마지막 스크롤 항목으로 이동합니다.
click(index)	API	은 index번째 스크롤 항목을 선택(활성화)시킵니다.
onBeforeSeek 관련 지침을 확인하세요	onSeek(fn)	API
	참고: 위 메소드 표의 prev() 메소드 아래 메소드 외에도 에 포함된 매개변수 외에도 속도와 콜백이라는 두 가지 암시적 매개변수가 포함되어 있습니다. 속도 매개변수는 스크롤 항목의 애니메이션 효과 지속 시간을 제어하는 ​​데 사용되며 콜백은 해당 콜백 메소드입니다. 구체적인 구현에 대해서는 스크롤 가능의 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();//自动更新相关配置信息，并跳转到被删除滚动项的前一项 });

jquery 도구 시리즈 스크롤 가능 learning_jqueryprev()方法以下的方法除了表中携带的参数外，还包含两个隐含参数：speed和callback。其中speed参数是用于控制滚动项的动画效果持续时间的，而callback为其回调方法。具体实现可参见scrollable的prev()方法使用示例。

具体使用方法：

rrreee

另外，如果你的表单页面要自适应屏幕并且resize的话能让表单页面不至于偏离，可以使用 scrollable.seekTo(index)

jquery 도구 시리즈 스크롤 가능 (2)_jquery

ScrollableGridPlugin.js(고정 테이블 헤더) 플러그인 사용에 대한 단계별 분석 jQuery_jquery

위 내용은 jQuery 스크롤 플러그인 scrollable.js의 사용 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!