Latest web development tutorials

jQuery UI API - composants Curseur (Curseur Widget)

catégorie

Widgets (Widgets)

usage

Description: Faites glisser la poignée pour sélectionner une valeur.

Nouvelle version: 1.5

jQuery UI Curseur (curseur) plug-in permet sélectionné via un curseur. Il existe différentes options, telles que de multiples poignées et la gamme. La poignée peut être déplacé à l'aide les touches fléchées ou la souris.

composants Slider (Curseur Widget) seront créés avec la classe lors de l' initialisation ui-slider-handle élément de poignée. Vous pouvez créer et ajouter des éléments avant l' initialisation, tout en ajoutant à l'élément ui-slider-handle , classe pour spécifier un élément de poignée personnalisée. Il ne fera que créer une correspondance value / values longueur du numéro de poignée souhaités. Par exemple, si vous spécifiez des values: [ 1, 5, 18 ] , et de créer une poignée personnalisée, plug-in va créer les deux autres.

theming

composants Slider (Curseur Widget) en utilisant le cadre UI CSS jQuery pour définir l'aspect et la convivialité de son style. Si vous avez besoin d'utiliser le curseur pour définir le style, vous pouvez utiliser le nom de la classe CSS suivante:

  • ui-slider : piste de contrôle Slider. Cet élément sera basé sur le curseur orientation en outre avec un ui-slider-horizontal ou ui-slider-vertical classe.
    • ui-slider-handle : poignée du curseur.
    • ui-slider-range : Lors du réglage de range lorsque l'option d'utiliser la plage sélectionnée. Si la range option est réglée sur "min" ou "max" , avec les éléments supplémentaires sont respectivement un ui-slider-range-min ou ui-slider-range-max , classe.

Fiez

informations complémentaires

  • La partie exige une certaine CSS fonctionnelle, sinon cela ne fonctionnera pas. Si vous créez un thème personnalisé, utilisez le fichier CSS widget spécifié comme un point de départ.

Exemples

Une simple jQuery UI Curseur (curseur). 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> élément coulissant (Curseur Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Style> #slider {margin: 10px;} </ style>
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Div id = "slider"> </ div>
 
<Script>
$ ( "#slider") .slider ();
</ Script>
 
</ Body>
</ Html>

la