jQuery EasyUI Form Plugin -Slider

jQuery EasyUI 插件jQuery EasyUI Plugin

Remplacez les valeurs par défaut via $.fn.slider.defaults.

Le slider permet aux utilisateurs de sélectionner une valeur dans une plage finie. Lorsque le contrôle slider est déplacé le long de la piste, une info-bulle affichant la valeur actuelle s'affiche. Les utilisateurs peuvent personnaliser le slider en définissant ses propriétés.

Dépendances

  • draggable

Utilisation

Créez un slider à partir d'une balise <input> lorsqu'il est utilisé comme champ de formulaire.

<input class="easyui-slider" value="12" style="width:300px"
    data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]">

Il est également possible de créer un slider à partir d'une <div>, mais l'attribut 'value' n'est pas valide.

<div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>

Cela crée un curseur.

<div id="ss" style="height:200px"></div>

$('#ss').slider({
    mode: 'v',
    tipFormatter: function(value){
        return value + '%';
    }
});

Propriétés

Name Type Description Valeur par défaut
width nombre La largeur du curseur. auto
height nombre La hauteur du curseur. auto
mode string Le type du curseur. Valeurs possibles : 'h' (horizontal), 'v' (vertical). h
reversed booléen Lorsqu'il est défini sur true, les positions des valeurs minimale et maximale seront échangées. Cette propriété est disponible depuis la version 1.3.2. false
showTip booléen Définit s'il faut afficher l'infobulle de valeur. false
disabled booléen Définit s'il faut désactiver le curseur. false
value nombre Valeur par défaut. 0
min nombre La valeur minimale autorisée. 0
max nombre La valeur maximale autorisée. 100
Pas nombre La valeur à augmenter ou à diminuer. 1
rule array Affiche des étiquettes à côté du curseur, '|' — ligne d'affichage de la valeur. []
tipFormatter fonction Fonction pour formater la valeur du curseur. Renvoie une chaîne de caractères affichée comme infobulle.

Événements

Name Parameters Description
onChange newValue,oldValue Déclenché lorsque la valeur du champ change.
onSlideStart value Déclenché lorsque le glissement du curseur commence.
onSlideEnd value Déclenché lorsque le glissement du curseur s'arrête.
onComplete value Déclenché lorsque la valeur du curseur est modifiée par l'utilisateur, que ce soit en faisant glisser le curseur ou en cliquant sur celui-ci. Cet événement est disponible depuis la version 1.3.4.

Méthodes

Name Parameters Description
options none Renvoie les options du curseur.
destroy none Détruit l'objet curseur.
resize param Définit la taille du curseur. Le paramètre 'param' contient les propriétés suivantes :
width: la nouvelle largeur du curseur
height : la nouvelle hauteur du slider
getValue none Obtient la valeur du slider.
setValue value Définit la valeur du slider.
clear none Efface la valeur du slider. Cette méthode est disponible depuis la version 1.3.5.
réinitialiser none Réinitialise la valeur du slider. Cette méthode est disponible depuis la version 1.3.5.
enable none Active le composant slider.
disable none Désactive le composant slider.
jQuery EasyUI 插件jQuery EasyUI Plugin Autres extensions