jQuery UI ejemplo - Deslizador (control deslizante)
Arrastre el controlador para seleccionar un valor.
Para más detalles sobre la corredera, consulte la documentación de la API elemento deslizante (Slider Widget) .
La función predeterminada
El control deslizante de base es horizontal y tiene una sola asa, se puede mover con las teclas de flecha o el ratón.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> Deslizador jQuery UI (control deslizante) - La función por defecto </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#slider") .slider ();
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "cursor"> </ div>
</ Body>
</ Html>
color Picker
Una combinación de tres controles deslizantes para crear un sencillo selector de color RGB.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> Deslizador jQuery UI (control deslizante) - Selector de color </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#Red, #verde, #blue {
float: left;
clear: left;
Anchura: 300px;
margen: 15px;
}
#swatch {
Anchura: 120px;
altura: 100px;
margin-top: 18px;
margin-left: 350px;
Imagen de fondo: ninguno;
}
#Red .ui-slider-gama {background: # ef2929;}
#Red .ui-slider-asa {border-color: # ef2929;}
#verde .ui-slider-gama {background: # 8ae234;}
#verde .ui-slider-asa {border-color: # 8ae234;}
#blue .ui-slider-gama {background: # 729fcf;}
#blue .ui-slider-asa {border-color: # 729fcf;}
</ Style>
<Script>
función hexFromRGB (r, g, b) {
hexagonal var = [
r.toString (16),
g.toString (16),
b.toString (16)
];
$ Each (Hex, la función (nr, val) {
si (=== val.length 1) {
hexagonales [NR] = "0" + Val;
}
});
volver hex.join ( "") .toUpperCase ();
}
refreshSwatch función () {
var rojo = $ ( "#Red") .slider ( "valor"),
verde = $ ( "#verde") .slider ( "valor"),
azul = $ ( "#blue") .slider ( "valor"),
hex = hexFromRGB (rojo, verde, azul);
$ ( "#swatch") .css ( "Background-color", "#" + hexadecimal);
}
$ (Function () {
$ ( "#rojo, #verde, #blue") .slider ({
Orientación: «horizontal»,
rango: "min",
max: 255,
Valor: 127,
deslice: refreshSwatch,
cambio: refreshSwatch
});
$ ( "#rojo") .slider ( "Valor", 255);
$ ( "#verde") .slider ( "Valor", 140);
$ ( "#blue") .slider ( "Valor", 60);
});
</ Script>
</ Head>
<Clase de cuerpo = "ui-widget de contenido" style = "border: 0;">
<P class = "ui-estado predeterminado de ui-ui esquina todo-helper-clearfix" style = "padding: 4 píxeles;">
<Class = estilo "ui-ui-icono icono de lápiz" Span = "float: left; margen: -2px 5px 0 0;"> </ span>
Sencillo selector de color </ p>
<Div id = "red"> </ div>
<Div id = "green"> </ div>
<Div id = "blue"> </ div>
<Div id = "muestra" class = "ui-ui widget de-contenido-esquina-all"> </ div>
</ Body>
</ Html>
Una pluralidad de correderas
Una combinación de barras de desplazamiento horizontal y vertical, cada una con su propia opción, para crear una interfaz de usuario del reproductor de música.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> Deslizador jQuery UI (control deslizante) - deslizadores </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
{lapso #eq
altura: 120px; float: left; margen: 15px
}
</ Style>
<Script>
$ (Function () {
// Establecer el volumen maestro $ ( "#MASTER") .slider ({
Valor: 60,
Orientación: «horizontal»,
rango: "min",
animar: true
});
// Establecer el ecualizador gráfico de $ ( "#eq> palmo") .Cada (function () {
// Lee el valor inicial de la etiqueta y retire el valor var = parseInt ($ (this) .text (), 10);
$ (Este) .empty (). Deslizador ({
Valor: valor,
rango: "min",
animar: true,
Orientación: "vertical"
});
});
});
</ Script>
</ Head>
<Cuerpo>
<P class = "ui-estado predeterminado de ui-ui esquina todo-helper-clearfix" style = "padding: 4 píxeles;">
<Span class = "ui ui-icon-icono-volumen-en" style = "float: left; margen: -2px 5px 0 0;"> </ span>
Volumen principal </ p>
<Id = estilo de "maestro" Div = "width: 260px; margen: 15px;"> </ div>
<P class = "ui-toda-esquina-ui estado predeterminado de" style = "padding: 4 píxeles; margin-top: 4em;">
<Span class = "ui ui-icon-icono-señal" style = "float: left; margen: -2px 5px 0 0;"> </ span>
Ecualizador gráfico </ p>
<Div id = "eq">
<Span> 88 </ span>
<Span> 77 </ span>
<Span> 55 </ span>
<Span> 33 </ span>
<Span> 40 </ span>
<Span> 45 </ span>
<Span> 70 </ span>
</ Div>
</ Body>
</ Html>
rango deslizante
Marco range opción es verdad, para obtener un rango de valores con dos asas de arrastre. Entre la palanca de control con un color de fondo diferente llenar para indicar el valor del intervalo es opcional.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> Deslizador jQuery UI (control deslizante) - regulador de rango </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Deslizante de rango") .slider ({
rango: true,
min: 0,
max: 500,
valores: [75, 300],
diapositiva: function (event, ui) {
$ ( "#amount") .val ( "$" + Ui.values [0] + "-" + $ ui.values [1]);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Deslizante de rango") ( "valores" .slider, 0) +
"- $" + $ ( "# Deslizante de rango") .slider ( "valores", 1));
});
</ Script>
</ Head>
<Cuerpo>
<P>
<Label for = "cantidad"> Rango de precios: </ label>
<Input type = "text" id = estilo de "cantidad" = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "control deslizante de rango"> </ div>
</ Body>
</ Html>
Con rango máximo fijado
La fijación del alcance máximo del control deslizante, el usuario puede seleccionar el mínimo. Ajuste de range opción de "max".
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> Deslizador jQuery UI (control deslizante) - gama, con un máximo fijo </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Deslizante-gama-max") .slider ({
rango: "máx",
min: 1,
max: 10,
Valor: 2,
diapositiva: function (event, ui) {
$ ( "#amount") .val (Ui.value);
}
});
$ ( "#amount") .val ($ ( "# Deslizante-gama-max") .slider ( "valor"));
});
</ Script>
</ Head>
<Cuerpo>
<P>
<Label for = "cantidad"> Número mínimo de habitaciones: </ label>
<Input type = "text" id = estilo de "cantidad" = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "control deslizante de rango-max"> </ div>
</ Body>
</ Html>
Serie compuesta mínimo fijo
El control deslizante de intervalo mínimo fijado, el usuario puede seleccionar el máximo. Ajuste de range opción "min".
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> Deslizador jQuery UI (control deslizante) - gama con un mínimo fijo </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Deslizante-gama-min") .slider ({
rango: "min",
Valor: 37,
min: 1,
max: 700,
diapositiva: function (event, ui) {
$ ( "#amount") .val ( "$" + Ui.value);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Deslizante-gama-min") .slider ( "valor"));
});
</ Script>
</ Head>
<Cuerpo>
<P>
<Label for = "cantidad"> Precio máximo: </ label>
<Input type = "text" id = estilo de "cantidad" = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "control deslizante de rango-min"> </ div>
</ Body>
</ Html>
Bound para seleccionar un cursor
Cómo enlazar un control deslizante para seleccionar un elemento existente. Elija permanece visible con el fin de mostrar los cambios. Cuando la selección cambia, actualizar el control deslizante.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> Deslizador jQuery UI (control deslizante) - está obligado a seleccionar un deslizador </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
var seleccione = $ ( "#minbeds");
var deslizador = $ ( "<div id =" cursor "> </ div>") .insertAfter (seleccionar) .slider ({
min: 1,
max: 6,
rango: "min",
Valor: seleccione [0] .selectedIndex + 1,
diapositiva: function (event, ui) {
seleccione [0] = .selectedIndex ui.value - 1;
}
});
$ ( "#minbeds") .Cambiar (Function () {
slider.slider ( "valor", this.selectedIndex + 1);
});
});
</ Script>
</ Head>
<Cuerpo>
<Form id = "reserva">
<Label for = ""> minbeds número mínimo de camas </ label>
<select name = "minbeds" id = ""> minbeds
<Opción> 1 </ option>
<Opción> 2 </ option>
<Opción> 3 </ option>
<Opción> 4 </ option>
<Opción> 5 </ option>
<Opción> 6 </ option>
</ Select>
</ Form>
</ Body>
</ Html>
deslizador barra de desplazamiento
Utilice el control deslizante para operar localizar el contenido de la página. En este ejemplo, es capaz de obtener el valor de una barra de desplazamiento.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> Deslizador jQuery UI (control deslizante) - deslizar la barra de desplazamiento </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.scroll-panel {overflow: auto; width: 99%; float: left;}
.scroll contenido {width: 2440px; float: left;}
.scroll-contenido-elemento {width: 100px; altura: 100px; float: left; margen: 10px; font-size: 3em; line-height: 96px; text-align: center;}
.scroll-bar-wrap {clear: left; padding: 0 0 4 píxeles 2px; margin: 0 1px 1px 1px;}
.scroll-bar-wrap .ui-deslizador {background: none; border: 0; altura: 2em; margin: 0 auto;}
.scroll-bar-wrap .ui-mango-helper-matriz {position: relative; width: 100%; altura: 100%; margin: 0 auto;}
.scroll-bar-wrap .ui-slider-asa {top: .2em; altura: 1.5em;}
.scroll-bar-wrap .ui-slider-mango-.ui icono {margin: auto -8px 0; position: relative; la parte superior: 50%;}
</ Style>
<Script>
$ (Function () {
// Desplazar el panel parte var scrollPane = $ ( ".scroll-panel"),
scrollContent = $ ( ".scroll en contenido");
// Crear un slider var barra de desplazamiento = $ ( ".scroll-bar") .slider ({
diapositiva: function (event, ui) {
si (scrollContent.width ()> scrollPane.width ()) {
scrollContent.css ( "margin-left", Math.round (
ui.value / 100 * (scrollPane.width () - scrollContent.width ())
) + "Px");
} Else {
scrollContent.css ( "margin-left", 0);
}
}
});
// Icono Anexar a procesar var = handleHelper scrollbar.find ( ".ui-slider-asa")
.mousedown (function () {
scrollbar.width (handleHelper.width ());
})
.mouseup (function () {
scrollbar.width ( "100%");
})
.Append ( "<span class =" ui ui-icon-icono-apretón de puntos y rayas verticales "> </ span>")
.Wrap ( "<div class =" ui-mango-helper-padre '> </ div> ") .parent ();
// Dado que el desplazamiento tirador del mando, cambiar para ocultar la parte de rebosamiento scrollPane.css ( "desbordamiento", "oculto");
// De acuerdo con la distancia de desplazamiento se define por la relación del tamaño de la barra de desplazamiento y la sizeScrollbar función mango () {
var resto = scrollContent.width () - scrollPane.width ();
var = proporción restante / scrollContent.width ();
var = handleSize scrollPane.width () - (proporción * scrollPane.width ());
scrollbar.find ( "-mango .ui-deslizador") .css ({
anchura: handleSize,
"Margin-left": -handleSize / 2
});
handleHelper.width ( "") .width (scrollbar.width () - handleSize);
}
// Posición de desplazamiento basado en el contenido, restablecer el valor de la función de control deslizante ResetValue () {
var resto = scrollPane.width () - scrollContent.width ();
var = LeftVal scrollContent.css ( "margin-left") === "auto" 0 ?:
parseInt (scrollContent.css ( "margin-left"));
porcentaje var = Math.round (LeftVal / resto * 100);
scrollbar.slider ( "valor", porcentaje);
}
// Si el regulador es de 100%, y los aumentos de la ventana, el reflowContent función de visualización () {
var = muestra scrollContent.width () + parseInt ( "-margen izquierdo" scrollContent.css (), 10);
brecha var = scrollPane.width () - muestra;
si (gap> 0) {
scrollContent.css ( "margin-left", parseInt (scrollContent.css ( "margin-left"), 10) + hueco);
}
}
// Cambio manija cuando la posición de la ventana de zoom $ (ventana) .resize (function () {
ResetValue ();
sizeScrollbar ();
reflowContent ();
});
// Inicializar el tamaño de la barra de desplazamiento setTimeout (sizeScrollbar, 10); // tiempo de espera Safari});
</ Script>
</ Head>
<Cuerpo>
<Div class = "scroll-panel-ui ui-widget de widget de cabecera-ui-esquina-all">
<Div class = "scroll-content">
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 1 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 2 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 3 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 4 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 5 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 6 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 7 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 8 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 9 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 10 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 11 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 12 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 13 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 14 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 15 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 16 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 17 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 18 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 19 </ div>
<Div class = "scroll-contenido-elemento ui-Reproductor-header"> 20 </ div>
</ Div>
<Div class = "scroll-bar-wrap-ui-widget de contenido ui-esquina inferior">
<Div class = "barra de desplazamiento"> </ div>
</ Div>
</ Div>
</ Body>
</ Html>
alinear la subasta
Por step opción se establece en un control deslizante para establecer el número entero valor de incremento es por lo general el control deslizante máximo divisor. El incremento predeterminado es 1.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> Deslizador jQuery UI (control deslizante) - alineado incrementales </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#slider") .slider ({
Valor: 100,
min: 0,
max: 500,
paso: 50,
diapositiva: function (event, ui) {
$ ( "#amount") .val ( "$" + Ui.value);
}
});
$ ( "#amount") .val ( "$" + $ ( "#slider") .slider ( "Valor"));
});
</ Script>
</ Head>
<Cuerpo>
<P>
<Label for = "cantidad"> cantidad de la donación ($ 50 incrementos): </ label>
<Input type = "text" id = estilo de "cantidad" = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "cursor"> </ div>
</ Body>
</ Html>
deslizador rango vertical
Cambiar el alcance de la dirección perpendicular a la barra deslizante. Por .height() asignar un valor de altura, o establecer la altura de CSS, y establecer orientation opciones para la "vertical".
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> Deslizador jQuery UI (control deslizante) - deslizador rango vertical </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Deslizante de rango") .slider ({
Orientación: "vertical",
rango: true,
valores: [17, 67],
diapositiva: function (event, ui) {
$ ( "#amount") .val ( "$" + Ui.values [0] + "-" + $ ui.values [1]);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Deslizante de rango") ( "valores" .slider, 0) +
"- $" + $ ( "# Deslizante de rango") .slider ( "valores", 1));
});
</ Script>
</ Head>
<Cuerpo>
<P>
<Label for = "cantidad"> los objetivos de ventas (en millones): </ label>
<Input type = "text" id = estilo de "cantidad" = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Id = estilo de "control deslizante de rango" Div = "height: 250px;"> </ div>
</ Body>
</ Html>
deslizador vertical
Cambiar la dirección de la corredera está en posición vertical. Por .height() asignar un valor de altura, o establecer la altura de CSS, y establecer orientation opciones para la "vertical".
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> Deslizador jQuery UI (control deslizante) - deslizador vertical </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Deslizante vertical") .slider ({
Orientación: "vertical",
rango: "min",
min: 0,
max: 100,
Valor: 60,
diapositiva: function (event, ui) {
$ ( "#amount") .val (Ui.value);
}
});
$ ( "#amount") .val ($ ( "# Deslizante vertical") .slider ( "valor"));
});
</ Script>
</ Head>
<Cuerpo>
<P>
<Label for = "cantidad"> Volumen: </ label>
<Input type = "text" id = estilo de "cantidad" = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Id = Div estilo de "control deslizante vertical" = "height: 200px;"> </ div>
</ Body>
</ Html>