JScrollPane. Faire un beau défilement
Malgré le fait que le Web est plein de recommandations ne changent pas l'utilisateur habituelle pour afficher les contrôleurs, ont de plus en plus pour faire face à la volonté du client de voir sur le site scrollbar inhabituel, beau, et parfois tout simplement repeint.
Par exemple, comme suit:
tâche
Mettre en place une barre de défilement vertical, répond aux exigences suivantes:
- * Le respect de la conception;
* Compatibilité inter-navigateur;
* La possibilité de faire défiler la molette de la souris.
décision
Nous allons pas réinventer la roue, au profit des gens intelligents ont travaillé pour nous. Utilisez gratuitement plugin JScrollPane - il répond parfaitement à ces exigences.
Avec elle, vous pouvez le faire ici est un parchemin ou ici tel.
Testé:
- * IE 6-8 * Firefox 3 * Opera 9,5-10 * Safari 3
Ce petit, vous pouvez voir d' autres exemples sur la page officielle du plugin.
Qu'est-ce que le rock?
- bibliothèque jquery
- jquery.mousewheel.min.js (2,6 Kb) pour soutenir une souris à molette de défilement.
- jScrollPane.js (22.62 Kb) de plug - in approprié.
- jScrollPane.css tableau Plugin styles.
- images.rar arhivchik avec exemples d' images pour le défilement.
démarrage rapide
Connectez la bibliothèque et ne pas oublier CSS:
<link type=text/css rel=stylesheet href=css/jScrollPane.css /><script type=text/javascript src=js/jquery-1.4.2.min.js></script><script type=text/javascript src=js/jquery.mousewheel.min.js></script><script type=text/javascript src=js/jScrollPane.js></script>
Créer un conteneur HTML pour le défilement:
<div class=scrollBox><div id=pane class=scroll-pane>Хочу себе необычный скролл! </div></div>
En CSS, une conception de conteneurs:
.scroll-pane { width: 700px; /* Ширина видимой области*/ height: 275px; /* Высота видимой области*/ overflow: auto; /* Если отключены скрипты это правило позволит отобразить обычный скролл */ }
styles personnalisables de jScrollPane.css et de dessiner des images (voir plus bas).
La dernière étape - initialiser le script de défilement:
<script type=text/javascript>jQuery(function() { jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true}); }); </script>
Maintenant, tous les détails
En savoir plus sur HTML
Dans l'exemple ci-dessus crée deux conteneurs: rouleau-vitrage et Scrollbox, et effectivement utilisés seulement scroll-volet. Ce qui est nécessaire est un conteneur Scrollbox externe? Il est utile pour le positionnement d'une zone de défilement, de se positionner comme le défilement volet assez difficile, parce que le script se terminera et encore son propre conteneur. D'une manière générale, utiliser un divas externes (nous Scrollbox) à la position - ce qui est l'avis du site officiel de plugin.
En savoir plus sur CSS
La promesse d'une analyse jScrollPane.css détaillée:
.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; } /* Трек - полоса по которой бегает ползунок */ .jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: url(../images/scrollTrak.gif) repeat-y; /* задаем фоновую картинку или просто цвет фона */ } /* Средняя часть ползунка (резиновая, т.к. ползунок меняет высоту в зависимости от количества содержимого) */ .jScrollPaneDrag { position: absolute; background: url(../images/scrollDrag.gif) repeat-y; /* задаем фоновую картинку или просто цвет фона */ cursor: pointer; overflow: hidden; left:1px; } /* верхушка ползунка (можно задать height:0, если ползунок не имеет выраженной верхушки) */ .jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; background: url(../images/scrollDragTop.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ height:3px; /* высота верхушки */ } /* низ ползунка (можно задать height:0, если ползунок не имеет выраженного низа) */ .jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; background: url(../images/scrollDragBot.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ height:3px; /* высота низа */ } /* стрелка вверх (правило можно исключить, если скролл по дизайну без стрелок) */ a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 18px; /* высота стрелки (ширина определяется шириной скролла при инициализации скрипта) */ background: url(../images/arrow_up.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ } /* стрелка ввниз (правило можно исключить, если скролл по дизайну без стрелок)*/ a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 18px; /* высота стрелки (ширина определяется шириной скролла при инициализации скрипта) */ background: url(../images/arrow_down.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ }
En savoir plus sur js
Défini deux fonctions:
JScrollPane | initialise le défilement en fonction des paramètres définis (voir la liste. dans le tableau ci-dessous). |
---|---|
jScrollPaneRemove | "Désinitialisation" - un parchemin élégant supprime et restaure la norme. |
Prarametry JScrollPane ()
nom de la fonction | fonction description | type de données |
---|---|---|
scrollbarWidth | largeur nonstandard scrollbar en pixels. La valeur par défaut est 10 | int |
scrollbarMargin | indentation sur la gauche de la barre de défilement, en pixels. La valeur par défaut est 5 | int |
wheelSpeed | Il indique à quelle vitesse la molette de la souris pour faire défiler à rendre le contenu en pixels. La valeur par défaut est 18 | int |
showArrows | Indique si vous souhaitez afficher la flèche sur la barre de défilement. La valeur par défaut est false | booléen |
arrowSize | la hauteur du tireur si showArrows = true (si non spécifié, est calculé à partir de la CSS) | int |
animateTo | si l'animation est nécessaire lors de l'appel scrollTo et scrollBy. La valeur par défaut est false | booléen |
dragMinHeight | la hauteur minimale à laquelle vous pouvez faire glisser le curseur. La valeur par défaut 0 | int |
animateInterval | Intervalle en millisecondes pour mettre à jour le scrollpane d'animation. La valeur par défaut est de 100 | int |
animateStep | Distance parcourue par le curseur d'une animation étape. La valeur par défaut est 3 | int |
maintainPosition | Si vous voulez que la barre de défilement maintient sa position lors d'une remise à zéro, alors il ne défile pas avec l'ajout de plus de contenu. La valeur par défaut est true | booléen |
scrollbarOnLeft | Il précise que la barre de défilement doit apparaître à gauche du contenu (assurez-vous que le CSS reflète également ce point) | booléen |
reinitialiseOnImageLoad | Si le script réinitialise automatiquement lorsque télécharger des images dans le contenu. La valeur par défaut est false | booléen |
Un peu sur la dynamique de
Si la largeur (hauteur) change de défilement dynamique, vous devez appeler la fonction cohérente et jScrollPaneRemove JScrollPane.
Supposons que nous ayons un CSS:
.scrollBox{ width:200px; } .scroll-pane { width: 100%; height: 100px; overflow: auto; }
Le script modifie la largeur Scrollbox, changeant ainsi automatiquement le .scroll volet largeur:
<script type=text/javascript>jQuery('#more').click(function() { jQuery('.scrollBox').css('width','300px'); jQuery('#pane').jScrollPaneRemove(); jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true}); }); </script>
à carreaux
- * IE 6-8 * Firefox 3 * Opera 9,5-10 * Safari 3
Nuance défilement de la molette de la souris
Dans JScrollPane il y a une caractéristique intéressante. Si vous tournez la molette de défilement de la souris, puis après tout le contenu de la proskrollitsya de conteneur, il commence à tourner la page scrollbar principale (bien sûr le cas échéant).
A en juger par les jScrollPane.js de code, il est fait sur le but (et est donc pas un bug mais une caractéristique). Mais si cette fonction empêche, il peut facilement être désactivé.
Nous montons dans le code jScrollPane.js et trouver la ligne il y a:
$container.bind( 'mousewheel', function (event, delta) { ...тра-та-та многабукофф... return !dragOccured; } );
Changer le retour dragOccured !; à return false;
Tout! Maintenant, la roue se comporte plus logique et ne fonctionne pas la page défile principale jusqu'à ce que le curseur de la souris ne va pas au-delà des limites du conteneur.
Faites défiler jusqu'à la position désirée (mise à jour 08/01/10)
Parfois, il est nécessaire immédiatement (ou sur une action) pour faire défiler un bloc avec le défilement à une certaine position. Pour ce plug-in a deux (pourquoi quelque chose mal décrit) caractéristiques:
scrollTo - faire défiler le contenu à la position spécifiée. La position peut être spécifiée en px (vue de la limite supérieure de ce même bloc avec défilement) ou un ensemble id - Scroll de bloc à l'élément avec l'id spécifié
scrollBy - unité de défilement pour un nombre déterminé de pixels à partir de la position actuelle
Fonctions accrocher au bloc sur lequel pendait le défilement d'initialisation.
<script type=text/javascript>jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true}); jQuery('#pane')[0].scrollTo(500); </script>
Permettez-moi de noter que "[0]" - est nécessaire. Qu'est-ce qu'il est - je ne sais pas (qui veulent apprendre à creuser le code de plugin), mais sans que cela ne fonctionne pas.
avantages:
- * Fonctionne adéquatement dans tous les navigateurs populaires;
* Il permet la flexibilité de personnaliser l'apparence et le comportement de la spirale;
* Pour faire défiler la molette de la souris.
Moins:
- * Non implémenté le défilement horizontal.
Commentaires
Commentant, gardez à l' esprit que le contenu et le ton de vos messages peuvent blesser les sentiments des gens réels, montrer du respect et de la tolérance à ses interlocuteurs, même si vous ne partagez pas leur avis, votre comportement en termes de liberté d'expression et de l' anonymat offert par Internet, est en train de changer non seulement virtuel, mais dans le monde réel. Tous les commentaires sont cachés à l'index, le contrôle anti - spam.