RESOLUTutoriel : Comment customiser sa "scrollbar" avec slimScroll en jQuery
Hello les amis !
Aujourd'hui, je vais vous faire un petit tutoriel pour pouvoir customiser vos scrollbars !
Tout d'abord, vous avez besoin d'installer jQuery qui est un ficher javaScript à ajouter à vos sources, comme ceci dans votre header :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
(Prenez une version supérieure ou égale à la 1.9)
Ensuite, il nous faut le fichier "jquery.slimscroll.min.js" pour pouvoir créer notre scrollbar. Je vous invite à le télécharger ici
Dans le fichier zip, vous n'aurez besoin que du fichier "jquery.slimscroll.min.js" pour ce que nous allons faire. N'oubliez de mettre dans votre header :
<script type="text/javascript" src="jquery.slimscroll.min.js"></script>
Une fois cela terminé, on peut commencer. Voici un code source que je vous invite à essayer ensuite chez vous.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Ma nouvelle scrollbar</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.slimscroll.min.js"></script> </head> <body> <div class="some-content-related-div"> <div id="maDiv"> <p> METTEZ UN GROS TEXTE ICI POUR POUVOIR UN JOLIE EFFET DE SCROLLING, PARCE QU'AVEC CETTE PHRASE CA VA ETRE POURRI ! </p> </div> </div> <script> $(function(){ $('#maDiv').slimScroll({ width: 'auto', height: '300px', color: "#3662C2", railVisible: true, allowPageScroll: true, }); }); </script> </body> </html>
Le plus important, c'est donc le script en fin de code. Il est important de spécifier l'id de la div sur lequel on veut appliquer notre scrollbar et en dessous, c'est une suite d'attribut que vous pouvez setter aux valeurs que vous voulez. Rajouter alwaysVisible : true, est la scroll restera afficher en permanence, changer la couleur de la barre. Bref, éclater vous pour la styliser.
Si vous avez d'autres questions, n'hésitez pas !HTML / DHTML / XHTMLJavaScriptjQueryScrollbarSlimScroll
DalanirPosté le : 6 Septembre à 15:2233 327 vues
⇒ Si vous êtes ici c'est que le sujet vous intéresse ^^
Inscrivez-vous sur Oyant, apportez votre contribution sur ce sujet et gagnez de l'argent :
Inscription
Répondre
Inscrivez-vous sur Oyant, apportez votre contribution sur ce sujet et gagnez de l'argent :
Inscription
 | L'administration d'une société anonymeSalutQui s'occupe de l'administration d'une société anonyme? |
Gestion d'entreprise | |
Administration Société anonyme Société |
 | Les royaltiesBonjourA quoi correspondent les royalties ? |
Entreprise | |
Les royalties Entreprise |
 RESOLU | Installer l'environnement de développement Android.BonjourS'il vous plaît je suis besoin de savoir comment Installer l'environnement de développement Android? Merci |
Android | |
Installer Environnement Développement Android |
| Les principes d'un contrat de franchiseBonjourPouvez-vous m’expliquer les principes d'un contrat de franchise? |
Entreprise | |
Principes Contrat de franchise Entreprise |
RESOLU | Cycle de vie d'une application AndroidBonsoirS'il vous plaît qu'elle est le cycle de vie d'une application Android? Merci d'avance. |
Android | |
Cycle de vie Application Android |
RESOLU | Composantes d'une application AndroidBonjourQuelles sont les composantes de base d'une application Android? |
Android | |
Composantes Application Android |
RESOLU | L'image de Drawable du projet dans AndroidBonjourComment obtenez l'image de Drawable du projet dans Android? |
Android | |
Android Drawable Image Projet |
| Création d'entreprise : démissionner ou non?BonjourJe suis en train de créer ma propre entreprise, dois-je démissionner? |
Entreprise | |
Entreprise Démissionner |
 | Créer un groupement d'intérêt économiqueBonjourQuels sont les critères suivis pour créer un groupement d'intérêt économique? |
Partenariat et investissement | |
Critères Groupement Intérêt économique |
| SCOPBonjourC'est quoi une SCOP, s'il vous plaît? |
Entreprise | |
SCOP Société |
 | Le statut juridique de ma sociétéSalutJ'ai besoin de savoir comment choisir le statut juridique de ma société? Merci de répondre. |
Création d'entreprise | |
Statut juridique Société |
RESOLU | Android et le premier mobile commercialiséBonjourQuel est le premier mobile commercialisé sous Android? |
Android | |
Android Mobile Commercialisé |
| Les ressources financières pour mon entrepriseBonjourComment trouver les ressources financières adaptées au bon développement de mon future entreprise? |
Entreprise | |
Ressources financières Entreprise |
| Les risques d'une entreprise individuelleBonjourQuels sont les risques d'une entreprise individuelle? |
Entreprise | |
Les risques Entreprise individuelle |
 | Les charges sociales d'une entrepriseBonjourQuelles sont les charges sociales d'une entreprise? |
Charge | |
Charge sociale Entreprise |
| Les charges et la création d'une entrepriseBonjourQuelles sont les charges à prévoir lors de la création d'une entreprise? |
Charge | |
Création Entreprise Les charges |
RESOLU | Android et machine virtuelleSalutEst-ce qu'android comporte une machine virtuelle? |
Android | |
Android Machine virtuelle |
| Veuillez vous connecter pour profiter pleinement de toutes les fonctionnalités de Oyant. | ||
Connexion |
Inscription |
|
|
Poster une question |
||
