Latest web development tutorials

jQuery UI API - componenti di scorrimento (slider Widget)

categoria

Widget (Widget)

uso

Descrizione: Trascinare la maniglia per selezionare un valore.

Nuova versione: 1.5

jQuery UI Slider (Slider) plug-in consente selezionata tramite un cursore. Ci sono varie opzioni, ad esempio più maniglie e gamma. La maniglia può essere spostato utilizzando i tasti freccia del mouse o.

componenti Slider (Slider Widget) verranno creati con la classe durante l'inizializzazione ui-slider-handle elemento maniglia. È possibile creare e aggiungere elemento prima inizializzazione, mentre l'aggiunta all'elemento ui-slider-handle , classe per specificare un elemento di manico personalizzato. E 'solo creare un corrispondente value / values lunghezza del numero maniglia desiderati. Ad esempio, se si specifica values: [ 1, 5, 18 ] , e creare una maniglia su misura, plug-in creerà gli altri due.

tematizzazione

componenti Slider (Slider Widget) utilizzando jQuery UI framework CSS per definire l'aspetto del suo stile. Se è necessario utilizzare il cursore per specificare lo stile, è possibile utilizzare il seguente nome della classe CSS:

  • ui-slider : Slider traccia di controllo. Questo elemento si baserà sul cursore orientation in aggiunta con un ui-slider-horizontal o ui-slider-vertical classe.
    • ui-slider-handle : maniglia di scorrimento.
    • ui-slider-range : Quando si imposta range quando l'opzione per utilizzare l'intervallo selezionato. Se il range opzione è impostata su "min" o "max" , con gli elementi aggiuntivi sono rispettivamente un ui-slider-range-min o ui-slider-range-max , di classe.

fare affidamento

Ulteriori informazioni

  • La parte richiede un po 'di CSS funzionale, altrimenti non funzionerà. Se si crea un tema personalizzato, utilizzare il file CSS widget di specificato come punto di partenza.

Esempi

Un semplice jQuery UI Slider (cursore). 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> membro cursore (Slider Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Style> #slider {margin: 10px;} </ style>
  <Src = "script // code.jquery.com/jquery-1.10.2.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Div id = "slider"> </ div>
 
<Script>
$ ( "#slider") .slider ();
</ Script>
 
</ Corpo>
</ Html>