jQuery UI par exemple - Curseur (curseur)
Faites glisser la poignée pour sélectionner une valeur.
Pour plus de détails sur l'élément coulissant, consultez la documentation de l' API élément coulissant (le curseur du Widget) .
La fonction par défaut
Le curseur de base est horizontale et a une seule poignée, peut être déplacé avec les touches de souris ou les flèches.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Curseur (curseur) - La fonction par défaut </ 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
Une combinaison de trois curseurs pour créer un simple sélecteur de couleur RVB.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Curseur (curseur) - 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>
#Salon Rouge, #green, #blue {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#swatch {
largeur: 120px;
hauteur: 100px;
margin-top: 18px;
margin-left: 350px;
background-image: none;
}
#Salon Rouge .ui-slider gamme {background: # ef2929;}
.ui-slider-poignée #Salon Rouge {border-color: # ef2929;}
#green .ui-slider gamme {background: # 8ae234;}
#green .ui-slider-handle {border-color: # 8ae234;}
#blue .ui-slider gamme {background: # 729fcf;}
#blue .ui-slider-handle {-couleur de la bordure: # 729fcf;}
</ Style>
<Script>
hexFromRGB fonction (r, g, b) {
var hex = [
r.toString (16),
g.toString (16),
b.toString (16)
];
$ .each (Hex, fonction (nr, val) {
if (val.length === 1) {
hex [nr] = "0" + val;
}
});
retour hex.join ( "") .toUpperCase ();
}
fonction refreshSwatch () {
var rouge = $ ( "#Salon Rouge") .slider ( "value"),
vert = $ ( "#green") .slider ( "value"),
bleu = $ ( "#blue") .slider ( "valeur"),
hex = hexFromRGB (rouge, vert, bleu);
$ ( "#swatch") Css ( "background-color", "#" + hex);
}
$ (Function () {
$ ( "#red, #green, #blue") .slider ({
orientation: «horizontale»,
plage: "min",
max: 255,
Valeur: 127,
glisser: refreshSwatch,
changement: refreshSwatch
});
$ ( "#red") .slider ( "Value", 255);
$ ( "#green") .slider ( "Value", 140);
$ ( "#blue") .slider ( "Value", 60);
});
</ Script>
</ Head>
<Class Body = "ui-widget-content" style = "border: 0;">
<P class = "ui-état par défaut ui-coin-all ui-helper-clearfix" style = "padding: 4px;">
<Span class = le style "ui-icon ui-icon-crayon" = "float: left; margin: -2px 5px 0 0;"> </ span>
Simple sélecteur de couleur </ p>
<Div id = "red"> </ div>
<Div id = "green"> </ div>
<Div id = "blue"> </ div>
<Div id = "swatch" class = "ui-widget-content ui-coin-all"> </ div>
</ Body>
</ Html>
Une pluralité de curseurs
Une combinaison de curseurs horizontaux et verticaux, chacun avec sa propre possibilité, pour créer une interface de lecteur de musique.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Curseur (curseur) - curseurs </ 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>
#eq durée {
hauteur: 120px; float: left; margin: 15px
}
</ Style>
<Script>
$ (Function () {
// Régler le volume principal $ ( "#MASTER") .slider ({
Valeur: 60,
orientation: «horizontale»,
plage: "min",
animer: true
});
// Régler le égaliseur graphique $ ( "#eq> span") .each (function () {
// Lit la valeur initiale de l'étiquette et de supprimer la valeur var = parseInt ($ (this) .text (), 10);
$ (Ce) .empty (). Curseur ({
: valeur,
plage: "min",
animer: true,
orientation: "vertical"
});
});
});
</ Script>
</ Head>
<Body>
<P class = "ui-état par défaut ui-coin-all ui-helper-clearfix" style = "padding: 4px;">
<Span class = "ui-icon ui-icon-volume sur" style = "float: left; margin: -2px 5px 0 0;"> </ span>
Master Volume </ p>
<Div id = style "maître" = "width: 260px; margin: 15px;"> </ div>
<P class = "-all-ui ui-coin état par défaut" style = "padding: 4px; margin-top: 4em;">
<Span class = "ui-icon ui-icon signal" style = "float: left; margin: -2px 5px 0 0;"> </ span>
Égaliseur graphique </ 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>
Range Slider
Réglage range option est vrai, pour obtenir une plage de valeurs avec deux poignées de déplacement. Entre la poignée de commande avec une couleur de fond différente remplir pour indiquer la valeur de l'intervalle est facultative.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Curseur (curseur) - Range curseur </ 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 ({
gamme: true,
min: 0,
max: 500,
valeurs: [75, 300],
diapositive: function (event, ui) {
$ ( "#amount") .VAL ( "$" + Ui.values [0] + "- $" + ui.values [1]);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider-range") .slider ( "valeurs", 0) +
"- $" + $ ( "# Slider-range") .slider ( "valeurs", 1));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "montant"> Fourchette de prix: </ label>
<Input type = "text" id = style "montant" = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "curseur de gamme"> </ div>
</ Body>
</ Html>
Avec une portée maximale fixée
Fixation de la portée maximale du curseur, l'utilisateur peut sélectionner le minimum. Réglage range option "max".
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Curseur (curseur) - plage avec un maximum fixe </ 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-plage-max") .slider ({
plage: "max",
min: 1,
max: 10,
Valeur: 2,
diapositive: function (event, ui) {
$ ( "#amount") .val (Ui.value);
}
});
$ ( "#amount") .val ($ ( "# Slider-plage-max") .slider ( "value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "montant"> Nombre minimum de chambres: </ label>
<Input type = "text" id = style "montant" = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range-max"> </ div>
</ Body>
</ Html>
Portée avec un minimum fixe
Le curseur de plage minimum fixe, l'utilisateur peut sélectionner le maximum. Réglage range option "min".
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Curseur (curseur) - plage avec un minimum fixe </ 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-plage-min") .slider ({
plage: "min",
valeur: 37,
min: 1,
max: 700,
diapositive: function (event, ui) {
$ ( "#amount") .val ( "$" + Ui.value);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider-plage-min") .slider ( "value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "montant"> Prix maximum: </ label>
<Input type = "text" id = style "montant" = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range-min"> </ div>
</ Body>
</ Html>
Bound pour sélectionner un curseur
Comment lier un curseur pour sélectionner un élément existant. Choisissez reste visible pour montrer les changements. Lorsque la sélection change, mettez à jour le curseur.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Curseur (curseur) - est lié à sélectionner un curseur </ 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 select = $ ( "#minbeds");
var curseur = $ ( "<div id = 'curseur'> </ div>") .insertAfter (sélection) .slider ({
min: 1,
max: 6,
plage: "min",
Valeur: sélectionnez [0] .selectedIndex + 1,
diapositive: function (event, ui) {
sélectionnez [0] = .selectedIndex ui.value - 1;
}
});
$ ( "#minbeds") .Modification (Function () {
slider.slider ( "valeur", this.selectedIndex + 1);
});
});
</ Script>
</ Head>
<Body>
<Form id = "réservation">
<Label for = ""> minbeds nombre minimum de lits </ label>
<select name = "minbeds" id = "minbeds">
<Option> 1 </ option>
<Option> 2 </ option>
<Option> 3 </ option>
<Option> 4 </ option>
<Option> 5 </ option>
<Option> 6 </ option>
</ Select>
</ Form>
</ Body>
</ Html>
curseur de défilement
Utilisez le curseur pour fonctionner localiser le contenu de la page. Dans ce cas, il est en mesure d'obtenir la valeur d'une barre de défilement.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Curseur (curseur) - faites glisser la barre de défilement </ 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 volet {overflow: auto; largeur: 99%; float: left;}
.scroll contenu {width: 2440px; float: left;}
.scroll-article de contenu {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; hauteur: 2em; margin: 0 auto;}
.scroll-bar-wrap .ui-poignée-helper-parent {position: relative; width: 100%; hauteur: 100%; margin: 0 auto;}
.scroll-bar-wrap .ui-slider-poignée {top: .2em; hauteur: 1.5em;}
.scroll-bar-wrap .ui-slider-poignée .ui-icon {margin: auto -8px 0; position: relative; top: 50%;}
</ Style>
<Script>
$ (Function () {
// Scroll panneau portion var scrollpane = $ ( ".scroll-volet"),
scrollContent = $ ( ".scroll-content");
// Création d'un curseur var scrollbar = $ ( ".scroll-bar") .slider ({
diapositive: function (event, ui) {
if (scrollContent.width ()> scrollPane.width ()) {
scrollContent.css ( "margin-left", Math.round (
ui.value / 100 * (scrollPane.width () - scrollContent.width ())
) + "Px");
} Else {
scrollContent.css ( "margin-left", 0);
}
}
});
// Append icône pour traiter var handleHelper = scrollbar.find ( ".ui-slider-manche")
.mousedown (function () {
scrollbar.width (handleHelper.width ());
})
.mouseup (function () {
scrollbar.width ( «100%»);
})
.append ( "<span class = 'ui-icon ui-icon-grip-pointillé vertical'> </ span>")
.wrap ( "<div class = 'ui-handle-helper-parent"> </ div> ") .parent ();
// Depuis le curseur poignée défilement, changer pour cacher la partie de débordement scrollPane.css ( "overflow", "caché");
// Selon la distance de défilement est définie par le rapport de la taille de la barre de défilement et la fonction de poignée sizeScrollbar () {
var reste = scrollContent.width () - scrollPane.width ();
var = proportion restante / scrollContent.width ();
var handleSize = scrollPane.width () - (proportion * scrollPane.width ());
scrollbar.find ( "poignée .ui-slider") Css ({
largeur: handleSize,
"Marge gauche": -handleSize / 2
});
handleHelper.width ( "") .width (scrollbar.width () - handleSize);
}
// Position de défilement basée sur le contenu, réinitialiser la valeur de la fonction de curseur ResetValue () {
var reste = scrollPane.width () - scrollContent.width ();
var LeftVal = scrollContent.css ( "margin-left") === "auto" 0 ?:
parseInt (scrollContent.css ( "margin-left"));
pourcentage var = Math.round (LeftVal / reste * 100);
scrollbar.slider ( «valeur», en pourcentage);
}
// Si le curseur est de 100%, et la fenêtre augmente, la fonction d'affichage reflowContent () {
var démontrant = scrollContent.width () + parseInt (scrollContent.css ( "margin-left"), 10);
écart var = scrollPane.width () - montrant;
if (écart> 0) {
scrollContent.css ( "margin-left", parseInt (scrollContent.css ( "margin-left"), 10) + espace);
}
}
// Changement poignée lorsque la position de la fenêtre de zoom $ (fenêtre) .resize (function () {
ResetValue ();
sizeScrollbar ();
reflowContent ();
});
// Initialisation de la taille de scrollbar setTimeout (sizeScrollbar, 10); // temporisation safari});
</ Script>
</ Head>
<Body>
<Class Div = "scroll-volet ui-widget ui-widget-tête ui-coin-all">
<Class Div = "scroll-content">
<Class Div = "scroll-content-élément ui-widget-tête"> 1 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 2 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 3 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 4 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 5 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 6 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 7 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 8 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 9 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 10 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 11 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 12 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 13 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 14 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 15 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 16 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 17 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 18 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 19 </ div>
<Class Div = "scroll-content-élément ui-widget-tête"> 20 </ div>
</ Div>
<Div class = "scroll-bar-wrap ui-widget-content ui-coin-bas»>
<Class Div = "barre de défilement"> </ div>
</ Div>
</ Div>
</ Body>
</ Html>
Alignez incrément
Par step option est réglée sur un curseur entier pour définir la valeur d'incrément est habituellement le curseur de diviseur maximale. L'incrément par défaut est 1.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Curseur (curseur) - aligné incrémental </ 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 ({
Valeur: 100,
min: 0,
max: 500,
étape: 50,
diapositive: function (event, ui) {
$ ( "#amount") .val ( "$" + Ui.value);
}
});
$ ( "#amount") .val ( "$" + $ ( "#slider") .slider ( "Value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "montant"> montant du don (50 $ par incréments): </ label>
<Input type = "text" id = style "montant" = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider"> </ div>
</ Body>
</ Html>
plage verticale curseur
Modifier la portée de la direction perpendiculaire à la glissière. Par .height() attribuer une valeur de hauteur, ou régler la hauteur par le CSS, et de définir l' orientation des options pour la «verticale».
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Curseur (curseur) - plage verticale curseur </ 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 ({
orientation: «verticale»,
gamme: true,
valeurs: [17, 67],
diapositive: function (event, ui) {
$ ( "#amount") .VAL ( "$" + Ui.values [0] + "- $" + ui.values [1]);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider-range") .slider ( "valeurs", 0) +
"- $" + $ ( "# Slider-range") .slider ( "valeurs", 1));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "montant"> objectifs de vente (en millions): </ label>
<Input type = "text" id = style "montant" = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = le style "curseur de gamme" = "height: 250px;"> </ div>
</ Body>
</ Html>
curseur vertical
Changer la direction du curseur est vertical. Par .height() attribuer une valeur de hauteur, ou régler la hauteur par le CSS, et de définir l' orientation des options pour la «verticale».
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Curseur (curseur) - Curseur 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 ({
orientation: «verticale»,
plage: "min",
min: 0,
max: 100,
Valeur: 60,
diapositive: function (event, ui) {
$ ( "#amount") .val (Ui.value);
}
});
$ ( "#amount") .val ($ ( "# Slider-vertical") .slider ( "value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "montant"> Volume: </ label>
<Input type = "text" id = style "montant" = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = style "curseur vertical" = "height: 200px;"> </ div>
</ Body>
</ Html>