Nutzungsanalyse des jQuery-Scrolling-Plugins scrollable.js

Scrollable ist ein flexibles, leichtes jQuery-Plug-in zum Erstellen von scrollenden Inhalten. Als Scroll-Element können beliebige Inhalte (HTML, Videos, Dateien, Bilder usw.) verwendet werden. Unterstützt sowohl horizontale als auch vertikale Scrollrichtungen. In diesem Artikel wird hauptsächlich die Verwendung des jQuery-Scrolling-Plugins scrollable.js vorgestellt und die Funktionen, Methoden und zugehörigen Verwendungsfähigkeiten von scrollable.js kurz analysiert. Ich hoffe, dass es allen helfen kann.

Zweck: Scrolleffekt, kann eine Schritt-für-Schritt-Überprüfungsseite erstellen

Die folgende Beschreibung der scrollable.js-Methode:

API

Methodenname	Rückgabewert	Beschreibung
getConf()	Object	gibt das Konfigurationsobjekt von scrollbar zurück und kann die zugehörigen Eigenschaften des Objekts festlegen Wert, um die Eigenschaften des Konfigurationsobjekts zu ändern.
getIndex()	Nummer	Get Die Indexnummer des aktuellen Bildlaufelements, 0 steht für das erste Element, 1 steht für das zweite Element und so weiter. Darüber hinaus ist zu beachten, dass beim Abrufen mehrerer Bildlaufelemente nur die Indexnummer des ersten Bildlaufelements zurückgegeben wird.
getItems()	jQuery	Alle Scroll-Elemente zurückgeben , das Ergebnis wird als JQuery-Objekt zurückgegeben.
getItemWrap()	jQuery	Ruft das Bildlaufelement ab Übergeordneter Knoten, das Ergebnis wird als JQuery-Objekt zurückgegeben.
getPageAmount()	Nummer	Holen Sie sich die aktuelle Schriftrolle Balkenanzahl der Seiten.
getPageIndex()	Nummer	Gibt die aktuelle Page zurück Indexnummer.Wenn das Paging beispielsweise auf 5 Bildlaufelemente/Seite eingestellt ist und die aktuelle Position des Bildlaufelements 7 ist, wird 1 (zweite Seite) zurückgegeben
getRoot()	jQuery	Ruft den Knoten der oberen Ebene des Bildlaufelements ab.
getSize()	Nummer	Gibt das Bildlaufelement zurück Menge. Diese Methode entspricht getConf().size
getVisibleItems()	jQuery	Ruft eine Liste der aktuell sichtbaren Scroll-Elemente ab. Die Liste ist ein JQuery-Objekt. Die Anzahl der sichtbaren Scroll-Elemente wird durch das Größenattribut des Konfigurationsobjekts definiert.
	>	reload()
scrollable unterstützt die Funktion des dynamischen Hinzufügens und Entfernens von Bildlaufelementen. Nach dem dynamischen Hinzufügen oder Entfernen von Bildlaufelementen rufen Sie diese Methode auf, um Informationen zur Seitennavigation und zur Bewegung von Bildlaufelementen automatisch zu aktualisieren.
prev()	API	Springe zu diesem The vorheriges Element des Scroll-Elements (wenn das Scroll-Element nicht das erste Scroll-Element ist)
next()	API	Zum nächsten Element dieses Scroll-Elements springen (wenn dieses Scroll-Element nicht das letzte Scroll-Element ist)
seekTo(index)	API	Springe zum Bildlaufelement am angegebenen Index.
move(offset)	API	wird sein Die aktuelle Position des Bildlaufelements im Status (aktiviert) wird um den Offset des aktuellen Bildlaufelements vorwärts/rückwärts verschoben.Wenn Offset positiv ist, bewegt sich das Bildlaufelement nach rechts/unten, andernfalls nach links/oben. Beispiel: move(2), der Index des Bildlaufelements im aktuellen Zustand wird vom i-Bildlaufelement zum i+2-Bildlaufelement übertragen.
prevPage()	API	Zur vorherigen Seite springen Seite (falls es nicht die erste Seite ist).
nextPage()	API	Zum nächsten springen Seite (sofern es nicht die letzte Seite ist).
setPage(index)	API	Zur Seite springen Index. Wenn beispielsweise index=2 ist, wird von der aktuellen Seite auf Seite 3 gesprungen.
movePage(offset)	API	wird verwendet move Die Position der angezeigten Seite wird von der aktuellen Seite auf diese Seite/nächste Offset-Seite geändert. Andere Erklärungen dieser Methode ähneln (Offset).
begin()	API	Zu Seite A springen Bildlaufelement, äquivalent zu seeTo(0).
end()	API	Zum Ende springen Ein Scroll-Element.
click(index)	API	Machen Sie das Bildlaufelement Index ausgewählt (aktiviert).
onBeforeSeek(fn)	API	Siehe KonfigurationsobjekteonBeforeSeek-bezogene Anweisungen
onSeek(fn)	API	Siehe die onSeek-bezogenen Anweisungen des Konfigurationsobjekts

Hinweis: Zusätzlich zu den Methoden unten die Methode prev() In der obigen Methodentabelle enthält sie zusätzlich zu den in der Tabelle enthaltenen Parametern auch zwei implizite Parameter: Geschwindigkeit und Rückruf. Der Geschwindigkeitsparameter wird verwendet, um die Dauer des Animationseffekts des Bildlaufelements zu steuern, und Rückruf ist seine Rückrufmethode. Informationen zur spezifischen Implementierung finden Sie im Beispiel zur Verwendung der prev()-Methode von scrollable.

Spezifische Verwendung:

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

Außerdem wird die Formularseite nicht abweichen, wenn sie an den Bildschirm angepasst und in der Größe geändert werden muss . Dies kann mit scrollable.seekTo(index) gelöst werden.

Verwandte Empfehlungen:

jquery tools series scrollable learning_jquery

jquery tools series scrollable (2)_jquery

Eine Schritt-für-Schritt-Analyse der Verwendung des ScrollableGridPlugin.js-Plug-Ins (fester Header) in jQuery_jquery

Das obige ist der detaillierte Inhalt vonNutzungsanalyse des jQuery-Scrolling-Plugins scrollable.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!