utilisation du rangeslider jquery-Questions et réponses frontales-php.cn

utilisation du rangeslider jquery

王林

Libérer： 2023-05-28 15:49:08

original

414 Les gens l'ont consulté

jQuery Rangeslider est un plugin basé sur jQuery qui vous permet de créer facilement un contrôle de curseur déplaçable. Dans cet article, nous allons vous montrer comment utiliser jQuery Rangeslider.

Installer jQuery Rangeslider

jQuery Rangeslider peut être installé de plusieurs manières, telles que :

Introduit via un lien CDN

Vous pouvez obtenir jQuery Rangeslider en ajoutant un lien CDN. C'est le moyen le plus simple de l'installer :

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Rangeslider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
</head>
<body>
  <input type="range" min="0" max="100" value="50" id="myRange">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myRange').rangeslider();
    });
  </script>
</body>
</html>

Copier après la connexion

Installer via NPM

Vous pouvez également installer jQuery Rangeslider via NPM. Exécutez la commande suivante dans le terminal :

npm install rangeslider.js

Copier après la connexion

Ensuite, ajoutez le code suivant à votre fichier HTML :

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Rangeslider</title>
  <link rel="stylesheet" href="./node_modules/rangeslider.js/dist/rangeslider.min.css" />
</head>
<body>
  <input type="range" min="0" max="100" value="50" id="myRange">
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/rangeslider.js/dist/rangeslider.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myRange').rangeslider();
    });
  </script>
</body>
</html>

Copier après la connexion

Utilisation de jQuery Rangeslider

Une fois l'installation terminée, nous pouvons commencer à utiliser jQuery Rangeslider. Voici un exemple d'utilisation :

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Rangeslider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
</head>
<body>
  <input type="range" min="0" max="100" value="50" id="myRange">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myRange').rangeslider({
        polyfill: false,
        onSlide: function(position, value) {
          console.log('position: ' + position, ' value: ' + value);
        }
      });
    });
  </script>
</body>
</html>

Copier après la connexion

Cet exemple montre comment utiliser jQuery Rangeslider pour ajouter un contrôle de curseur d'entrée déplaçable à une page Web.

Dans le code, nous introduisons d'abord les fichiers CSS et JavaScript nécessaires.

Ensuite, dans un élément de zone de saisie HTML, nous ajoutons l'attribut type="range", qui créera un contrôle slider dans la page Web.

Ensuite, nous utilisons le sélecteur jQuery pour sélectionner la zone de saisie et appeler la méthode rangeslider(), qui la convertit en un contrôle de curseur déplaçable.

Lors de l'appel de la méthode rangeslider(), nous avons également passé certains paramètres :

polyfill : false. Ce paramètre indique à jQuery Rangeslider de ne pas utiliser la fonctionnalité polyfill. Polyfill active cette fonctionnalité à l'aide de JavaScript sur les anciens navigateurs qui ne prennent pas en charge le contrôle de curseur HTML5. Mais dans les navigateurs modernes, cette fonctionnalité polyfill est de peu d’utilité. Par conséquent, nous définissons ce paramètre sur false.
onSlide : fonction (position, valeur) {...}. Ce paramètre indique à jQuery Rangeslider ce qui se passe lorsque vous glissez sur le contrôle slider. Dans cet exemple, nous définissons une fonction qui sera appelée à chaque balayage. Cette fonction accepte deux paramètres : la position du curseur et sa valeur actuelle. Nous affichons cette fonction sur la console afin de pouvoir visualiser la sortie de cette fonction dans la console.

Résumé

jQuery Rangeslider est un plug-in jQuery très pratique qui vous permet d'ajouter facilement un contrôle de curseur d'entrée déplaçable à votre page Web. Dans cet article, nous vous avons montré comment installer jQuery Rangeslider et comment l'utiliser pour créer un contrôle slider et transmettre certains paramètres pour personnaliser sa configuration. Nous espérons que cet article vous aidera à démarrer rapidement avec jQuery Rangeslider.

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!