jQueryスクロールプラグインscrollable.jsの利用状況分析

Scrollable は、スクロール コンテンツを作成するための柔軟で軽量な jQuery プラグインです。任意のコンテンツ (HTML、ビデオ、ファイル、画像など) をスクロール アイテムとして使用できます。水平スクロール方向と垂直スクロール方向の両方をサポートします。この記事では、jQuery のスクロール プラグインであるscrollable.jsの使い方を主に紹介し、scrollable.jsの機能、メソッド、および関連する使用スキルを簡単に分析します。必要な友人が参考になれば幸いです。

目的: スクロール効果、段階的な検証ページを作成できます

以下のscrollable.jsメソッドの説明:

BeforeSeekで設定オブジェクトの onSeek を参照構成オブジェクトの関連命令 さらに、フォーム ページが画面に合わせてサイズ変更され、フォーム ページがずれないようにする必要がある場合は、scrollable .seekTo(index) を使用して解決します。 関連する推奨事項:

メソッド名	戻り値	説明
getConf()	Object	scrollableの設定オブジェクトを返します、関連するプロパティ値を設定できます構成オブジェクトのプロパティを変更するオブジェクトの。
getIndex()	number	現在のスクロール項目のインデックス番号を取得します。0 は最初の要素を表し、1 は 2 番目の要素を表します。また、複数のスクロール項目を取得した場合は、最初のスクロール項目のインデックス番号のみが返されることに注意してください。
getItems()	jQuery	はすべてのスクロールアイテムを返し、結果はjqueryオブジェクトとして返されます。
getItemWrap()	jQuery	スクロールアイテムの親ノードを取得し、結果はjqueryオブジェクトとして返されます。
getPageAmount()	number	現在のスクロールバーのページ数を取得します。
getPageIndex()	number	現在のページングインデックス番号を返します。たとえば、ページングが 5 スクロール アイテム/ページに設定されており、現在のスクロール アイテムの位置が 7 の場合、1 (2 ページ目) が返されます
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	最初のスクロール項目にジャンプします。seekTo(0) と同等です。
end()	API	最後のスクロール項目にジャンプします。
click(index)	API	は、index番目のスクロールアイテムを選択（アクティブ化）します。
を参照してください	onSeek(fn)	API
	注: 上記のメソッド表の prev() メソッドの下にあるメソッドに加えて、 で運ばれるパラメータに加えて、には、speed と callback という 2 つの暗黙的なパラメータが含まれています。 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();//自动更新相关配置信息，并跳转到被删除滚动项的前一项 });

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 中国語 Web サイトの他の関連記事を参照してください。