Analyse de l'utilisation du plug-in de défilement jQuery scrollable.js

Scrollable est un plug-in jQuery flexible et léger permettant de créer du contenu défilant. Tout contenu (HTML, vidéos, fichiers, images, etc...) peut être utilisé comme élément de défilement. Prend en charge les directions de défilement horizontales et verticales. Cet article présente principalement l'utilisation du plug-in de défilement jQuery scrollable.js et analyse brièvement les fonctions, méthodes et compétences d'utilisation associées de scrollable.js. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Objectif : effet de défilement, peut créer une page de vérification étape par étape

La description suivante de la méthode scrollable.js :

reload()

Nom de la méthode	Valeur de retour	Description
getConf()	Object	renvoie l'objet de configuration de scrollable et peut définir les propriétés associées de l'objet valeur pour modifier les propriétés de l’objet de configuration.
getIndex()	numéro	Obtenir Le numéro d'index de l'élément de défilement actuel, 0 représente le premier élément, 1 représente le deuxième élément, et ainsi de suite. De plus, il convient de noter que si plusieurs éléments de défilement sont obtenus, seul le numéro d'index du premier élément de défilement sera renvoyé.
getItems()	jQuery	Renvoyer tous les parchemins , le résultat est renvoyé sous forme d'objet jquery.
getItemWrap()	jQuery	Obtenir l'élément de défilement Nœud parent, le résultat est renvoyé sous forme d'objet jquery.
getPageAmount()	numéro	Obtenir le parchemin actuel barre du nombre de pages.
getPageIndex()	numéro	Renvoie la pagination actuelle Numéro d'index.Par exemple, si la pagination est définie sur 5 éléments de défilement/page et que la position actuelle de l'élément de défilement est 7, alors 1 (deuxième page) sera renvoyé
getRoot()	jQuery	Obtenir le nœud de niveau supérieur de l'élément de défilement.
getSize()	number	Renvoie l'élément de défilement quantité. Cette méthode est équivalente à getConf().size
getVisibleItems()	jQuery	Obtient une liste des éléments de défilement actuellement visibles. La liste est un objet jquery. Le nombre d'éléments de défilement visibles est défini par l'attribut size de l'objet de configuration.
		>
API	scrollable prend en charge la fonction d'ajout et de suppression dynamiques d'éléments de défilement. Après avoir ajouté ou supprimé dynamiquement des éléments de défilement, appelez cette méthode pour mettre automatiquement à jour les informations sur la navigation par pagination et le mouvement des éléments de défilement.
prev()	API	Aller à ceci élément précédent de l'élément de défilement (si l'élément de défilement n'est pas le premier élément de défilement)
suivant()	API	Sauter à l'élément suivant de cet élément de défilement (si cet élément de défilement n'est pas le dernier élément de défilement)
seekTo(index)	API	Sauter à l'élément de défilement à l'index spécifié.
move(offset)	API	sera à la position actuelle de l'élément de défilement dans l'état (activé) est avancée/reculée du décalage de l'élément de défilement actuel.Si Offset est positif, l'élément de défilement se déplace vers la droite/bas, sinon, il se déplace vers la gauche/haut. Par exemple : move(2), l'index de l'élément de défilement dans l'état actuel est transféré de l'élément de défilement i à l'élément de défilement i+2.
prevPage()	API	Aller à la précédente page (si ce n'est pas la première page).
nextPage()	API	Passer au suivant page (si ce n’est pas la dernière page).
setPage(index)	API	Aller à la page indice. Par exemple, index=2, alors il passera de la page actuelle à la page 3.
movePage(offset)	API	est utilisé pour move La position de la page affichée passe de la page actuelle à cette page/page de décalage suivante. D'autres explications de cette méthode sont similaires à (décalage).
begin()	API	Aller à la page A élément de défilement, équivalent à seekTo(0).
end()	API	Aller à la fin Un élément de défilement.
cliquez sur (index)	API	Faites en sorte que l'élément de défilement index soit sélectionné (activé).
onBeforeSeek(fn)	API	Voir les objets de configurationInstructions associées à onBeforeSeek
onSeek(fn)	API	Voir les instructions liées à onSeek de l'objet de configuration

Remarque : En plus des méthodes ci-dessous, la méthode prev() dans le tableau des méthodes ci-dessus En plus des paramètres portés dans le tableau, il contient également deux paramètres implicites : la vitesse et le rappel. Le paramètre speed est utilisé pour contrôler la durée de l'effet d'animation de l'élément de défilement, et le rappel est sa méthode de rappel. Pour une implémentation spécifique, veuillez vous référer à l'exemple d'utilisation de la méthode prev() de scrollable.

Utilisation spécifique :

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

De plus, si votre page de formulaire doit s'adapter à l'écran et être redimensionnée, la page de formulaire ne déviera pas . Cela peut être résolu en utilisant scrollable.seekTo(index).

Recommandations associées :

série d'outils jquery scrollable learning_jquery

série d'outils jquery scrollable (2)_jquery

Une analyse étape par étape de l'utilisation du plug-in ScrollableGridPlugin.js (en-tête fixe) dans jQuery_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!