ホームページ > 記事 > ウェブフロントエンド > jqueryツール系列scrollable（2）_jquery

jqueryツール系列scrollable（2）_jquery

WBOYオリジナル: 2016-05-16 18:47:061177ブラウズ

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 は 2 番目の要素を表します。また、複数のスクロール項目を取得した場合は、最初のスクロール項目のインデックス番号のみが返されることに注意してください。
getItems()	jQuery	すべてのスクロール項目を返し、結果は jquery オブジェクトとして返されます。
getItemWrap()	jQuery	スクロール項目の親ノードを取得し、結果は jquery オブジェクトとして返されます。
getPageAmount()	番号	現在のスクロールバーのページ数を取得します。
getPageIndex()	番号	現在のページングインデックス番号を返します。たとえば、ページングが 5 スクロール項目/ページに設定されており、現在のスクロール項目の位置が 7 の場合、1 (2 ページ目) が返されます
getRoot()	jQuery	スクロール項目の上位ノードを取得します。
getSize()	番号	スクロール項目の数を返します。このメソッドは getConf().size
getVisibleItems()	jQuery	現在表示されているスクロール項目のリストを取得します。リストは、構成オブジェクトの size 属性によって定義される jquery オブジェクトです。

リロード()	API	scrollable は、スクロール項目を動的に追加および削除する機能をサポートします。スクロール項目を動的に追加または削除した後、このメソッドを呼び出して、ページングナビゲーションとスクロール項目の移動に関する情報を自動的に更新します。
前()	API	このスクロール項目の前の項目にジャンプします (このスクロール項目が最初のスクロール項目ではない場合)
次()	API	このスクロール項目の次の項目にジャンプします (このスクロール項目が最後のスクロール項目ではない場合)
seekTo(インデックス)	API	指定したインデックスのスクロール項目にジャンプします。
移動(オフセット)	API	現在の状態(アクティブ)のスクロール項目の位置を、現在のスクロール項目のオフセット分だけ前後に移動します。 Offset が正の場合、スクロール項目は右/下に移動し、それ以外の場合は左/上に移動します。例: move(2)、現在の状態のスクロール項目のインデックスが i スクロール項目から i2 スクロール項目に転送されます。
prevPage()	API	前のページにジャンプします (最初のページでない場合)。
nextPage()	API	次のページにジャンプします (最後のページでない場合)。
setPage(index)	API	ページインデックスにジャンプします。たとえば、index=2 の場合、現在のページから 3 ページにジャンプします。
movePage(オフセット)	API	は、表示ページの位置を現在のページからこのページ/次のオフセットページに切り替えるために使用されます。このメソッドのその他の説明は (オフセット) と同様です。
begin()	API	最初のスクロール項目にジャンプします。seekTo(0) と同等です。
end()	API	最後のスクロール項目にジャンプします。
クリック(インデックス)	API	は、index スクロール項目を選択 (アクティブ化) します。

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

注: 表に含まれるパラメータに加えて、上記のメソッド表の prev() メソッドの下にあるメソッドには、speed と callback という 2 つの暗黙的なパラメータも含まれています。 Speed パラメータはスクロール項目のアニメーション効果の持続時間を制御するために使用され、callback はそのコールバックメソッドです。具体的な実装については、scrollableのprev()メソッドの使用例を参照してください。

最後に、このスクロール可能なシリーズの完全なサンプルコードを示します。

コードをコピーしますコードは次のとおりです。以下:

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