Maison > Article > interface Web > jQuery jRange implémente une plage numérique de sélection coulissante effets spéciaux_jquery
Parfois, nous devons sélectionner une plage de valeurs sur la page, comme la sélection d'une plage de prix lors de l'achat, la sélection du processeur, la configuration de la taille de la mémoire, etc. lors de l'achat d'un hôte. Vous pouvez utiliser la barre coulissante intuitive pour sélectionner directement le. valeur souhaitée sans travail manuel. La saisie de valeurs numériques est simple et pratique.
HTML
Chargez d'abord le fichier de la bibliothèque jQuery et les fichiers CSS liés à jRange : jquery.range.css et le plug-in : jquery.range.js
Appeler le plug-in jRange est très simple, il suffit d'utiliser le code suivant :
Copier le code
Ensuite, lancez votre page Web et vous verrez l'effet dans la DÉMO.
Paramètres des options
Le plug-in jRange fournit également certains paramètres d'options nécessaires pour répondre à divers besoins.
Options | Description | Valeur par défaut |
de | La valeur minimale de la plage mobile, un nombre, tel que 0 | |
à | La valeur maximale de la plage mobile, un nombre tel que 100 | |
étape | Valeur du pas, taille de chaque diapositive | 1 |
échelle | Étiquette d'échelle sous le curseur, type de tableau, tel que [0,50,100] | [de,à] |
showLabels | Type booléen, s'il faut afficher l'étiquette de taille sous le curseur | vrai |
showScale | Type booléen, s'il faut afficher l'étiquette numérique au-dessus du curseur | vrai |
format | Format numérique | "%s" |
width | 滑動條寬度 | 300 |
isRange | 是否為選取範圍。 | false |
更多資訊請參閱jRange專案官網:https://github.com/nitinhayaran/jRange
以上就是本文的全部內容了,有需要的小夥伴參考下,希望大家能夠喜歡。