jQuery UI exemplo - Slider (Slider)
Arraste a alça para selecionar um valor.
Para mais detalhes sobre o membro deslizante, consulte a documentação da API membro deslizante (o Slider Widget) .
A função padrão
O controle deslizante de base é horizontal e tem um identificador único, pode ser movido com o mouse ou as setas.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI Slider (Slider) - A função padrão </ 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>
<Body>
<Div id = "slider"> </ div>
</ Body>
</ Html>
Color Picker
Uma combinação de três controles deslizantes para criar um simples seletor de cores RGB.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI Slider (Slider) - Color Picker </ 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, #green, #blue {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#swatch {
width: 120px;
height: 100px;
margin-top: 18px;
margin-left: 350px;
background-image: none;
}
#red .ui-slider-range {background: # ef2929;}
#red .ui-slider-handle {border-color: # ef2929;}
#green .ui-slider-range {background: # 8ae234;}
#green .ui-slider-handle {border-color: # 8ae234;}
#blue .ui-slider-range {background: # 729fcf;}
#blue .ui-slider-handle {border-color: # 729fcf;}
</ Style>
<Script>
função hexFromRGB (r, g, b) {
var hex = [
r.toString (16),
g.toString (16),
b.toString (16)
];
$ .each (Hex, função (nr, val) {
Se (=== val.length 1) {
sextavadas [nr] = "0" + val;
}
});
regresso hex.join ( "") .toUpperCase ();
}
refreshSwatch function () {
var vermelho = $ ( "#red") .slider ( "value"),
verde = $ ( "#green") .slider ( "value"),
azul = $ ( "#blue") .slider ( "valor"),
hex = hexFromRGB (vermelho, verde, azul);
$ ( "#swatch") CSS ( "background-color", "#" + hex);
}
$ (Function () {
.slider $ ( "#red, #green, #blue") ({
Orientação: "horizontal",
intervalo: "min",
máx: 255,
Valor: 127,
deslize: refreshSwatch,
mudança: refreshSwatch
});
$ ( "#red") .slider ( "Valor", 255);
$ .slider ( "#green") ( "Valor", 140);
$ .slider ( "#blue") ( "Valor", 60);
});
</ Script>
</ Head>
<Class = Corpo "ui-widget-content" style = "border: 0;">
<P class = "-ui-ui-estado padrão de canto, tudo ui-helper-clearfix" style = "padding: 4px;">
<Span class = "ui-ui ícone-icon-lápis" style = "float: left; margin: 5px -2px 0 0;"> </ span>
Simples seletor de cores </ p>
<Div id = "red"> </ div>
<Div id = "green"> </ div>
<Div id = "blue"> </ div>
<Div id = "amostra" class = "-ui-widget conteúdo ui-canto-all"> </ div>
</ Body>
</ Html>
Uma pluralidade de controles deslizantes
Uma combinação de controles deslizantes horizontais e verticais, cada um com sua própria opção, para criar uma interface leitor de música.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI Slider (Slider) - sliders </ 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>
extensão #eq {
height: 120px; float: left; margin: 15px
}
</ Style>
<Script>
$ (Function () {
// Definir o Master Volume $ ( "#master") .slider ({
valor: 60,
Orientação: "horizontal",
intervalo: "min",
animar: true
});
// Definir o equalizador gráfico $ ( "#eq> span") .each (function () {
// Lê o valor inicial do tag e remover o valor var = parseInt ($ (this) .text (), 10);
$ (Este) .empty (). Slider ({
valor: valor,
intervalo: "min",
animar: true,
Orientação: "vertical"
});
});
});
</ Script>
</ Head>
<Body>
<P class = "-ui-ui-estado padrão de canto, tudo ui-helper-clearfix" style = "padding: 4px;">
<Span class = "ui ui-icon-icon-volume-on" style = "float: left; margin: 5px -2px 0 0;"> </ span>
Master Volume </ p>
<Div id = "mestre" style = "width: 260px; margin: 15px;"> </ div>
<P class = "-ui-ui-estado padrão de canto-all" style = "padding: 4px; margin-top: 4EM;">
<Span class = "ui ui-icon-icon-sinal" style = "float: left; margin: 5px -2px 0 0;"> </ span>
Equalizador 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>
Faixa Slider
Ambiente range opção é verdadeiro, para se obter uma gama de valores com duas alças de arrasto. Entre a alavanca de controle com uma cor diferente do fundo de preenchimento para indicar o valor do intervalo é opcional.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI Slider (Slider) - deslizante Faixa </ 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-range") .slider ({
intervalo: verdadeiro,
min: 0,
máx: 500,
valores: [75, 300],
slide: function (event, ui) {
$ ( "#amount") .val ( "$" + Ui.values [0] + "- $" + ui.values [1]);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider-range") .slider ( "valores", 0) +
"- $" + $ ( "# Slider-range") .slider ( "valores", 1));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "quantidade"> Faixa de preço: </ label>
<Input type = "text" id = "quantidade" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range"> </ div>
</ Body>
</ Html>
Com alcance máximo fixado
Que fixa o alcance máximo do controle deslizante, o usuário pode selecionar o mínimo. Definir range opção de "max".
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI Slider (Slider) - intervalo com um limite máximo fixado </ 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-gama max") .slider ({
intervalo: "max",
min: 1,
máx: 10,
valor: 2,
slide: function (event, ui) {
$ ( "#amount") .val (Ui.value);
}
});
$ ( "#amount") .val ($ ( "# Slider-gama max") .slider ( "value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "quantidade"> Número mínimo de quartos: </ label>
<Input type = "text" id = "quantidade" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range-max"> </ div>
</ Body>
</ Html>
Intervalo com mínima fixa
O controle deslizante mínimo fixado intervalo, o usuário pode selecionar o máximo. Definição range opção "min".
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI Slider (Slider) - intervalo com um mínimo fixo </ 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-range-min") .slider ({
intervalo: "min",
valor: 37,
min: 1,
máx: 700,
slide: function (event, ui) {
$ ( "#amount") .val ( "$" + Ui.value);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider-range-min") .slider ( "value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "quantidade"> Preço Máximo: </ label>
<Input type = "text" id = "quantidade" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range-min"> </ div>
</ Body>
</ Html>
Obrigado a selecionar um controle deslizante
Como ligar um controle deslizante para selecionar um elemento existente. Escolha permanece visível a fim de mostrar as mudanças. Quando a seleção muda, atualizar o controle deslizante.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI Slider (Slider) - é obrigado a selecionar um controle deslizante </ 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 escolha = $ ( "#minbeds");
var cursor = $ ( "<div id =" deslizante "> </ div>") .insertAfter (select) .slider ({
min: 1,
máx: 6,
intervalo: "min",
valor: selecione [0] .selectedIndex + 1,
slide: function (event, ui) {
selecione [0] = .selectedIndex ui.value - 1;
}
});
$ ( "#minbeds") .change (Function () {
slider.slider ( "value", this.selectedIndex + 1);
});
});
</ Script>
</ Head>
<Body>
<Form id = "reserva">
<Label for = ""> minbeds número mínimo de leitos </ label>
<select name = "minbeds" id = ""> minbeds
<Opção> 1 </ option>
<Opção> 2 </ option>
<Opção> 3 </ option>
<Opção> 4 </ option>
<Opção> 5 </ option>
<Opção> 6 </ option>
</ Select>
</ Form>
</ Body>
</ Html>
deslizante barra de rolagem
Use o controle deslizante para operar localizar o conteúdo da página. Neste exemplo, ele é capaz de obter o valor de uma barra de deslocamento.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI Slider (Slider) - deslizar a barra de rolagem </ 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-pane {overflow: auto; width: 99%; float: left;}
.scroll-content {width: 2440px; float: left;}
.scroll item de conteúdo {width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center;}
.scroll-bar-wrap {clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px;}
.scroll-bar-wrap .ui-slider {background: none; border: 0; height: 2em; margin: 0 auto;}
.scroll-bar-wrap .ui-handle-helper-parent {position: relative; width: 100%; height: 100%; margin: 0 auto;}
.scroll-bar-wrap .ui-slider-handle {top: .2em; height: 1.5em;}
.scroll-bar-wrap .ui-slider-handle .ui-icon {margin: auto -8px 0; position: relative; top: 50%;}
</ Style>
<Script>
$ (Function () {
// Scroll painel parte var scrollpane = $ ( "-pane .scroll"),
scrollContent = $ ( ".scroll-content");
// Cria um controle deslizante var barra de rolagem = $ ( ".scroll-bar") .slider ({
slide: function (event, ui) {
Se (scrollContent.width ()> scrollPane.width ()) {
scrollContent.css ( "margin-left", Math.round (
ui.value / 100 * (scrollPane.width () - scrollContent.width ())
) + "Px");
} Else {
scrollContent.css ( "margin-left", 0);
}
}
});
// Anexar ícone para processar var handleHelper = scrollbar.find ( ".ui-slider-handle")
.mousedown (function () {
scrollbar.width (handleHelper.width ());
})
.mouseup (function () {
scrollbar.width ( "100%");
})
.append ( "<span class = 'ui-ui ícone-icon-pontilhada-vertical-grip"> </ span> ")
.Wrap ( "<div class = 'ui-handle-helper-mãe"> </ div> ") .parent ();
// Uma vez que a alça de rolagem controle deslizante, altere para esconder a parte estouro scrollPane.css ( "overflow", "escondido");
// De acordo com a distância de deslocamento é definido pela razão entre o tamanho da barra de deslocamento e o sizeScrollbar função de pega () {
var restante scrollContent.width = () - scrollPane.width ();
var proporção = restante / scrollContent.width ();
var handleSize = scrollPane.width () - (proporção * scrollPane.width ());
scrollbar.find ( "-handle .ui-slider") .css ({
width: handleSize,
"Margin-left": -handleSize / 2
});
handleHelper.width ( "") .width (scrollbar.width () - handleSize);
}
// Baseado em conteúdo posição de rolagem, repor o valor do ResetValue função de cursor () {
var restante scrollPane.width = () - scrollContent.width ();
var LeftVal = scrollContent.css ( "margin-left") === "auto" 0 ?:
parseInt (scrollContent.css ( "margin-left"));
var percentual = Math.round (LeftVal / restante * 100);
scrollbar.slider ( "value", percentual);
}
// Se o controle deslizante é de 100%, e as janelas aumenta, a função de exibição reflowContent () {
var mostrando = scrollContent.width () + parseInt (scrollContent.css ( "margin-left"), 10);
var gap = scrollPane.width () - mostrando;
if (diferença> 0) {
scrollContent.css ( "margin-left", parseInt (scrollContent.css ( "margin-left"), 10) + gap);
}
}
// Mudança Handle quando o .Resize (function (posição da janela de zoom $ (janela)) {
ResetValue ();
sizeScrollbar ();
reflowContent ();
});
// Inicializar o setTimeout tamanho barra de rolagem (sizeScrollbar, 10); // tempo limite safari});
</ Script>
</ Head>
<Body>
<Div class = "scroll-pane ui ui-widget-widget-header-ui-corner todos">
<Div class = "scroll-content">
<Div class = "scroll item de conteúdo ui-widget-header"> 1 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 2 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 3 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 4 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 5 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 6 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 7 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 8 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 9 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 10 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 11 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 12 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 13 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 14 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 15 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 16 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 17 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 18 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 19 </ div>
<Div class = "scroll item de conteúdo ui-widget-header"> 20 </ div>
</ Div>
<Div class = "barra de rolagem-wrap ui-ui-widget conteúdo-canto inferior">
<Div class = "barra de rolagem"> </ div>
</ Div>
</ Div>
</ Body>
</ Html>
alinhar incremento
Ao step opção é definida como um controle deslizante inteiro para definir o valor do incremento é geralmente o controle deslizante máximo divisor. O incremento padrão é 1.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI Slider (Slider) - alinhados incrementais </ 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,
máx: 500,
etapa: 50,
slide: function (event, ui) {
$ ( "#amount") .val ( "$" + Ui.value);
}
});
$ ( "#amount") .val ( "$" + $ ( "#slider") .slider ( "Valor"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "quantidade"> montante da doação (US $ 50 incrementos): </ label>
<Input type = "text" id = "quantidade" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider"> </ div>
</ Body>
</ Html>
deslizante intervalo vertical
Mudar o âmbito da direcção perpendicular ao cursor. Por .height() atribuir um valor de altura, ou definir a altura de CSS, e definir orientation opções para o "vertical".
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI Slider (Slider) - controle deslizante intervalo 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 () {
$ ( "# Slider-range") .slider ({
Orientação: "vertical",
intervalo: verdadeiro,
valores: [17, 67],
slide: function (event, ui) {
$ ( "#amount") .val ( "$" + Ui.values [0] + "- $" + ui.values [1]);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider-range") .slider ( "valores", 0) +
"- $" + $ ( "# Slider-range") .slider ( "valores", 1));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "quantidade"> metas de vendas (em milhões): </ label>
<Input type = "text" id = "quantidade" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range" style = "height: 250px;"> </ div>
</ Body>
</ Html>
deslizante Vertical
Mudar a direção do cursor é vertical. Por .height() atribuir um valor de altura, ou definir a altura de CSS, e definir orientation opções para o "vertical".
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI Slider (Slider) - deslizante 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 () {
$ ( "# Slider-vertical") .slider ({
Orientação: "vertical",
intervalo: "min",
min: 0,
máx: 100,
valor: 60,
slide: function (event, ui) {
$ ( "#amount") .val (Ui.value);
}
});
$ ( "#amount") .val ($ ( "# Slider-vertical") .slider ( "value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "quantidade"> Volume: </ label>
<Input type = "text" id = "quantidade" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-vertical" style = "height: 200px;"> </ div>
</ Body>
</ Html>