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>