jquery 도구 系列 스크롤 가능(2)_jquery-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jquery 도구 系列 스크롤 가능(2)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:47 PM

jquery

scrollable提供的一系列获取scrollable对象的方法具体使用方式如下：

复制代码代码如下:

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();//自动更新相关配置信息，并跳转到被删除滚动项的前一项 
    });

以下是scrollable对象的方法说明描述：
와 동일합니다.

方法名称	반환값	설명
getConf()	객체	은 scrollable의 구성 객체를 반환하며, 구성 객체의 속성은 객체의 해당 속성값을 설정하여 수정할 수 있습니다.
getIndex()	번호	현재 스크롤 항목의 인덱스 번호를 가져옵니다. 0은 첫 번째 요소를 나타내고 1은 두 번째 요소를 나타냅니다. 또한 여러 스크롤 항목을 얻은 경우 첫 번째 스크롤 항목의 인덱스 번호만 반환된다는 점에 유의해야 합니다.
getItems()	jQuery	모든 스크롤 항목을 반환하고, 결과는 jquery 객체로 반환됩니다.
getItemWrap()	jQuery	스크롤 항목의 상위 노드를 가져오고 결과가 jquery 객체로 반환됩니다.
getPageAmount()	번호	현재 스크롤 막대의 페이지 수를 가져옵니다.
getPageIndex()	번호	현재 페이징 색인 번호를 반환합니다. 예를 들어 페이징이 페이지당 스크롤 항목 5개로 설정되어 있고 현재 스크롤 항목 위치가 7이면 1(두 번째 페이지)이 반환됩니다.
getRoot()	jQuery	스크롤 항목의 상위 노드를 가져옵니다.
getSize()	번호	스크롤 항목 수를 반환합니다. 이 메소드는 getConf().size
getVisibleItems()	jQuery	현재 표시되는 스크롤 항목의 목록을 가져옵니다. 목록은 jquery 객체입니다. 표시되는 스크롤 항목의 수는 구성 객체의 크기 속성에 의해 정의됩니다.

다시 로드()	API	scrollable은 스크롤 항목을 동적으로 추가하고 제거하는 기능을 지원합니다. 스크롤 항목을 동적으로 추가하거나 제거한 후 이 메서드를 호출하여 페이징 탐색 및 스크롤 항목 이동에 대한 정보를 자동으로 업데이트합니다.
이전()	API	이 스크롤 항목의 이전 항목으로 이동합니다(이 스크롤 항목이 첫 번째 스크롤 항목이 아닌 경우)
다음()	API	이 스크롤 항목의 다음 항목으로 이동합니다(이 스크롤 항목이 마지막 스크롤 항목이 아닌 경우)
seekTo(색인)	API	지정된 인덱스의 스크롤 항목으로 이동합니다.
이동(오프셋)	API	현재 상태(활성화)의 스크롤 항목 위치를 현재 스크롤 항목의 오프셋만큼 앞/뒤로 이동합니다. Offset이 양수이면 스크롤 항목이 오른쪽/아래로 이동하고, 그렇지 않으면 왼쪽/위로 이동합니다. 예: move(2), 현재 상태의 스크롤 항목 인덱스가 i 스크롤 항목에서 i 2 스크롤 항목으로 전송됩니다.
prevPage()	API	이전 페이지로 이동합니다(첫 번째 페이지가 아닌 경우).
다음페이지()	API	다음 페이지로 이동합니다(마지막 페이지가 아닌 경우).
setPage(색인)	API	페이지 색인으로 이동합니다. 예를 들어 index=2이면 현재 페이지에서 3페이지로 이동합니다.
페이지 이동(오프셋)	API	은 표시된 페이지의 위치를 현재 페이지에서 이 페이지/다음 오프셋 페이지로 전환하는 데 사용됩니다. 이 방법에 대한 다른 설명은 (오프셋)과 유사합니다.
시작()	API	eekTo(0)에 해당하는 첫 번째 스크롤 항목으로 이동합니다.
끝()	API	마지막 스크롤 항목으로 이동합니다.
클릭(색인)	API	index 스크롤 항목을 선택(활성화)시킵니다.

onBeforeSeek(fn)	API	参见配置对象的onBeforeSeek相关说明
onSeek(fn)	API	参见配置对象的onSeek相关说明

참고: 표에 있는 매개변수 외에도 위 메소드 표의 prev() 메소드 아래 메소드에는 속도와 콜백이라는 두 가지 암시적 매개변수도 포함되어 있습니다. 속도 매개변수는 스크롤 항목의 애니메이션 효과 지속 시간을 제어하는 데 사용되며 콜백은 해당 콜백 메소드입니다. 구체적인 구현에 대해서는 스크롤 가능 prev() 메서드의 사용 예를 참조하세요.

마지막으로 이 스크롤 가능 시리즈의 전체 샘플 코드가 제공됩니다.

코드 복사 코드는 다음과 같습니다. 다음:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">