Maison  >  Article  >  interface Web  >  jQuery jRange implémente une plage numérique de sélection coulissante effets spéciaux_jquery

jQuery jRange implémente une plage numérique de sélection coulissante effets spéciaux_jquery

WBOY
WBOYoriginal
2016-05-16 16:09:391816parcourir

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

Copier le code Le code est le suivant :




Mettez ensuite le code suivant à l'endroit où vous devez afficher le sélecteur de curseur :


Nous avons utilisé un champ de texte de type hiiden et défini la valeur par défaut, telle que 23.
jQuery

Appeler le plug-in jRange est très simple, il suffit d'utiliser le code suivant :

Copier le code

Le code est le suivant : $('.single-slider').jRange({ De : 0,
à : 100,
Étape : 1,
Échelle : [0,25,50,75,100],
format : '%s',
Largeur : 300,
showLabels : vrai,
showScale : vrai
});

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

以上就是本文的全部內容了,有需要的小夥伴參考下,希望大家能夠喜歡。

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn