openElement

jquery-mousewheel-master

   Créer un sélecteur de nombre avec jQuery-ui Spinner Widget
Voici comment mettre un sélecteur de nombre avec incrément par souris dans un champ de saisie de texte.

Note: HTML5 propose une solution intégrée mais avec moins d'options:

<input type="number" min="0" max="20" step="1" /> 

Étape 1

Télécharger jQuery-ui Spinner sur https://github.com/jquery/jquery-mousewheel

Extraire le dossier jquery-mousewheel-master et le renommer jquery-mousewheel

Ajouter ce dossier à la racine du dossier de votre projet

Étape 2

Ajouter un bloc de code HTML en position header et insérer le code suivant:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/jquery-mousewheel/jquery.mousewheel.js"></script>

Étape 3

Insérez un élément "Champ de saisie de texte" sur votre page

Ajoutez une classe CSS "roulette" à la zone "Champ de saisie de texte" de votre élément

Étape 4 

Ajouter un bloc de code javascript en position header et insérer le code suivant:

// sélection de nombre dans un champ
$( function() {var spinner = $( ".roulette" ).spinner({
"max":100,                                  // maximum permis pour ce champ
"min":0,                                      // minimum permis pour ce champ
"step":5,                                     // incrément de souris
"page":4                                     // multiplicateur d'incrément de souris pour boutons pageUp et pageDown
});
} );

D'autres options sont disponibles, voir: http://api.jqueryui.com/spinner/

Edité par Hobby001 - 18 Jan 2018 à 15:02

openElement

[Tuto] sélecteur de nombre avec Spinner Widget