jQuery UI contoh - Slider (Slider)
Tarik pegangan untuk memilih nilai.
Untuk rincian lebih lanjut tentang anggota slider, lihat dokumentasi API anggota slider (Slider Widget) .
Fungsi standar
Slider dasar adalah horizontal dan memiliki pegangan tunggal, dapat dipindahkan dengan mouse atau tombol panah.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (Slider) - Fungsi standar </ 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>
$ (Fungsi () {
$ ( "#slider") .slider ();
});
</ Script>
</ Kepala>
<Body>
<Div id = "slider"> </ div>
</ Body>
</ Html>
Color Picker
Kombinasi dari tiga slider untuk membuat warna RGB picker sederhana.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "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">
<Gaya>
#red, #green, #blue {
float: kiri;
jelas: kiri;
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>
Fungsi hexFromRGB (r, g, b) {
var hex = [
r.toString (16),
g.toString (16),
b.toString (16)
];
$ .each (Hex, fungsi (nr, val) {
jika (val.length === 1) {
hex [nr] = "0" + val;
}
});
kembali hex.join ( "") .toUpperCase ();
}
Fungsi refreshSwatch () {
var merah = $ ( "#red") .slider ( "value"),
hijau = $ ( "#green") .slider ( "value"),
biru = $ ( "#blue") .slider ( "value"),
hex = hexFromRGB (merah, hijau, biru);
$ ( "#swatch") Css ( "Background-color", "#" + hex);
}
$ (Fungsi () {
$ ( "#red, #green, #blue") .slider ({
Orientasi: "horisontal",
Kisaran: "min",
max: 255,
Nilai: 127,
geser: refreshSwatch,
Perubahan: refreshSwatch
});
$ ( "#red") .slider ( "Nilai", 255);
$ ( "#green") .slider ( "Nilai", 140);
$ ( "#blue") .slider ( "Nilai", 60);
});
</ Script>
</ Kepala>
<Class Tubuh = "ui-widget-content" style = "border: 0;">
<P class = "ui negara-default-ui-sudut-semua ui-helper-clearfix" style = "padding: 4px;">
<Span class = "ui-icon ui-icon-pensil" style = "float: left; margin: -2px 5px 0 0;"> </ span>
Sederhana color picker </ p>
<Div id = "red"> </ div>
<Div id = "green"> </ div>
<Div id = "blue"> </ div>
<Div id = "swatch" class = "ui-widget-konten ui-sudut-semua"> </ div>
</ Body>
</ Html>
Sebuah pluralitas slider
Kombinasi slider horisontal dan vertikal, masing-masing dengan pilihan sendiri, untuk membuat UI pemutar musik.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (Slider) - slider </ 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">
<Gaya>
rentang #eq {
height: 120px; float: left; margin: 15px
}
</ Style>
<Script>
$ (Fungsi () {
// Set Master Volume $ ( "#master") .slider ({
Nilai: 60,
Orientasi: "horisontal",
Kisaran: "min",
bernyawa: true
});
// Mengatur equalizer $ grafis ( "#eq> span") .each (function () {
// Membaca nilai awal dari tag dan menghapus nilai var = parseInt ($ (ini) .text (), 10);
$ (Ini) .empty (). Slider ({
Nilai: nilai,
Kisaran: "min",
bernyawa: benar,
Orientasi: "vertikal"
});
});
});
</ Script>
</ Kepala>
<Body>
<P class = "ui negara-default-ui-sudut-semua ui-helper-clearfix" style = "padding: 4px;">
<Span class = "ui-icon ui-icon volume-on" style = "float: left; margin: -2px 5px 0 0;"> </ span>
Guru Volume </ p>
<Div id = "master" style = "width: 260px; margin: 15px;"> </ div>
<P class = "ui negara-default-ui-sudut-semua" style = "padding: 4px; margin-top: 4em;">
<Span class = "ui-icon ui-icon-sinyal" style = "float: left; margin: -2px 5px 0 0;"> </ span>
Graphic Equalizer </ 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>
kisaran Slider
Pengaturan range pilihan adalah benar, untuk mendapatkan rentang nilai dengan dua pegangan drag. Antara menangani kontrol dengan warna latar belakang yang berbeda mengisi untuk menunjukkan nilai dari interval adalah opsional.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (Slider) - Rentang slider </ 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>
$ (Fungsi () {
$ ( "# Slider-range") .slider ({
Kisaran: benar,
min: 0,
max: 500,
nilai-nilai: [75, 300],
slide: function (event, ui) {
$ ( "#amount") Val ( "$" + Ui.values [0] + "- $" + ui.values [1]);
}
});
$ ( "#amount") Val ( "$" + $ ( "# Slider-range") .slider ( "nilai", 0) +
"- $" + $ ( "# Slider-range") .slider ( "nilai", 1));
});
</ Script>
</ Kepala>
<Body>
<P>
<Label untuk = "jumlah"> Kisaran Harga: </ label>
<Input type = "text" id = "jumlah" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range"> </ div>
</ Body>
</ Html>
Dengan jangkauan maksimum tetap
Memperbaiki jangkauan maksimum slider, pengguna dapat memilih minimum. Pengaturan range pilihan untuk "max".
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (Slider) - range dengan maksimal tetap </ 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>
$ (Fungsi () {
$ ( "# Slider-range-max") .slider ({
Kisaran: "max",
min: 1,
max: 10,
Nilai: 2,
slide: function (event, ui) {
$ ( "#amount") Val (Ui.value);
}
});
$ ( "#amount") Val ($ ( "# Slider-range-max") .slider ( "value"));
});
</ Script>
</ Kepala>
<Body>
<P>
<Label untuk = "jumlah"> Minimum jumlah kamar: </ label>
<Input type = "text" id = "jumlah" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range-max"> </ div>
</ Body>
</ Html>
Kisaran dengan minimum tetap
Minimum tetap Kisaran slider, pengguna dapat memilih maksimal. Pengaturan range pilihan "min".
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (Slider) - range dengan minimal tetap </ 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>
$ (Fungsi () {
$ ( "# Slider-range-min") .slider ({
Kisaran: "min",
Nilai: 37,
min: 1,
max: 700,
slide: function (event, ui) {
$ ( "#amount") Val ( "$" + Ui.value);
}
});
$ ( "#amount") Val ( "$" + $ ( "# Slider-range-min") .slider ( "value"));
});
</ Script>
</ Kepala>
<Body>
<P>
<Label untuk = "jumlah"> Harga maksimum: </ label>
<Input type = "text" id = "jumlah" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range-min"> </ div>
</ Body>
</ Html>
Terikat untuk memilih slider
Cara mengikat slider untuk memilih elemen yang ada. Pilih tetap terlihat untuk menunjukkan perubahan. Ketika seleksi berubah, memperbarui slider.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (Slider) - terikat untuk memilih slider </ 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>
$ (Fungsi () {
var pilih = $ ( "#minbeds");
var slider = $ ( "<div id = 'slider'> </ div>") .insertAfter (pilih) .slider ({
min: 1,
max: 6,
Kisaran: "min",
Nilai: pilih [0] .selectedIndex + 1,
slide: function (event, ui) {
pilih [0] .selectedIndex = ui.value - 1;
}
});
$ ( "#minbeds") .change (Fungsi () {
slider.slider ( "value", this.selectedIndex + 1);
});
});
</ Script>
</ Kepala>
<Body>
<Form id = "reservasi">
<Label untuk = "minbeds"> jumlah minimum tidur </ label>
<Pilih name = "minbeds" id = "minbeds">
<Option> 1 </ option>
<Pilihan> 2 </ option>
<Pilihan> 3 </ option>
<Pilihan> 4 </ option>
<Pilihan> 5 </ option>
<Pilihan> 6 </ option>
</ Pilih>
</ Form>
</ Body>
</ Html>
slider scrollbar
Gunakan slider untuk mengoperasikan menemukan konten halaman. Dalam hal ini, ia mampu mendapatkan nilai scroll bar.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (Slider) - geser scroll bar </ 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">
<Gaya>
.scroll-pane {overflow: auto; width: 99%; float: left;}
.scroll-konten {width: 2440px; float: left;}
.scroll-konten-item {width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: kali 96px; text-align: center;}
.scroll-bar-wrap {jelas: kiri; 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-orang tua {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: -8px auto 0; position: relative; top: 50%;}
</ Style>
<Script>
$ (Fungsi () {
// Geser panel bagian var scrollpane = $ ( ".scroll-pane"),
scrollContent = $ ( ".scroll-konten");
// Buat slider var scrollbar = $ ( ".scroll-bar") .slider ({
slide: function (event, ui) {
jika (scrollContent.width ()> scrollPane.width ()) {
scrollContent.css ( "margin-left", Math.round (
ui.value / 100 * (scrollPane.width () - scrollContent.width ())
) + "Px");
} Lain {
scrollContent.css ( "margin-left", 0);
}
}
});
// Menambahkan ikon untuk memproses var handleHelper = scrollbar.find ( "Ui-slider-handle")
.mousedown (function () {
scrollbar.width (handleHelper.width ());
})
.mouseup (function () {
scrollbar.width ( "100%");
})
Append ( "<span class = 'ui-icon ui-icon-grip-putus-putus-vertikal'> </ span>")
.wrap ( "<div class = 'ui-handle-helper-parent'> </ div>") .parent ();
// Karena geser scroll, mengubah untuk menyembunyikan bagian melimpah scrollPane.css ( "overflow", "hidden");
// Menurut jarak bergulir didefinisikan oleh rasio ukuran scroll bar dan fungsi handle sizeScrollbar () {
var sisanya = scrollContent.width () - scrollPane.width ();
Proporsi var = sisa / scrollContent.width ();
var handleSize = scrollPane.width () - (proporsi * scrollPane.width ());
scrollbar.find ( "Ui-slider-handle") Css ({
width: handleSize,
"Margin-kiri": -handleSize / 2
});
handleHelper.width ( "") .width (scrollbar.width () - handleSize);
}
// Konten berbasis posisi scroll, ulang nilai fungsi slider resetValue () {
var sisanya = scrollPane.width () - scrollContent.width ();
var leftVal = scrollContent.css ( "margin-left") === "auto" 0 ?:
parseInt (scrollContent.css ( "margin-left"));
var persentase = Math.round (leftVal / sisa * 100);
scrollbar.slider ( "value", persentase);
}
// Jika slider adalah 100%, dan meningkat jendela, fungsi display reflowContent () {
var menunjukkan = scrollContent.width () + parseInt (scrollContent.css ( "margin-left"), 10);
gap var = scrollPane.width () - menampilkan;
jika (gap> 0) {
scrollContent.css ( "margin-left", parseInt (scrollContent.css ( "margin-left"), 10) + gap);
}
}
// Perubahan Handle ketika posisi jendela zoom $ (window) .resize (function () {
resetValue ();
sizeScrollbar ();
reflowContent ();
});
// Inisialisasi setTimeout ukuran scrollbar (sizeScrollbar, 10); // safari batas waktu});
</ Script>
</ Kepala>
<Body>
<Class Div = "scroll-pane ui-widget ui-widget-header ui-sudut-semua">
<Div class = "scroll-content">
<Class Div = "scroll-konten-item ui-widget-header"> 1 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 2 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 3 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 4 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 5 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 6 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 7 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 8 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 9 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 10 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 11 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 12 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 13 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 14 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 15 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 16 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 17 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 18 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 19 </ div>
<Class Div = "scroll-konten-item ui-widget-header"> 20 </ div>
</ Div>
<Div class = "scroll-bar-wrap ui-widget-konten ui-sudut-bottom">
<Class Div = "scroll-bar"> </ div>
</ Div>
</ Div>
</ Body>
</ Html>
menyelaraskan kenaikan
Dengan step opsi disetel ke slider integer untuk menetapkan nilai kenaikan biasanya pembagi slider maksimal. Peningkatan default adalah 1.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (Slider) - selaras tambahan </ 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>
$ (Fungsi () {
$ ( "#slider") .slider ({
Nilai: 100,
min: 0,
max: 500,
Langkah: 50,
slide: function (event, ui) {
$ ( "#amount") Val ( "$" + Ui.value);
}
});
$ ( "#amount") Val ( "$" + $ ( "#slider") .slider ( "Nilai"));
});
</ Script>
</ Kepala>
<Body>
<P>
<Label untuk = "jumlah"> sumbangan sebesar ($ 50 increment): </ label>
<Input type = "text" id = "jumlah" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider"> </ div>
</ Body>
</ Html>
Kisaran vertikal slider
Mengubah lingkup arah tegak lurus ke slider. Dengan .height() menetapkan nilai tinggi, atau mengatur tinggi oleh CSS, dan mengatur orientation pilihan untuk "vertikal".
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (Slider) - rentang vertikal slider </ 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>
$ (Fungsi () {
$ ( "# Slider-range") .slider ({
Orientasi: "vertikal",
Kisaran: benar,
nilai-nilai: [17, 67],
slide: function (event, ui) {
$ ( "#amount") Val ( "$" + Ui.values [0] + "- $" + ui.values [1]);
}
});
$ ( "#amount") Val ( "$" + $ ( "# Slider-range") .slider ( "nilai", 0) +
"- $" + $ ( "# Slider-range") .slider ( "nilai", 1));
});
</ Script>
</ Kepala>
<Body>
<P>
<Label untuk = "jumlah"> target penjualan (dalam jutaan): </ label>
<Input type = "text" id = "jumlah" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range" style = "height: 250px;"> </ div>
</ Body>
</ Html>
slider vertikal
Mengubah arah slider vertikal. Dengan .height() menetapkan nilai tinggi, atau mengatur tinggi oleh CSS, dan mengatur orientation pilihan untuk "vertikal".
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (Slider) - slider vertikal </ 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>
$ (Fungsi () {
$ ( "# Slider-vertikal") .slider ({
Orientasi: "vertikal",
Kisaran: "min",
min: 0,
max: 100,
Nilai: 60,
slide: function (event, ui) {
$ ( "#amount") Val (Ui.value);
}
});
$ ( "#amount") Val ($ ( "# Slider-vertikal") .slider ( "value"));
});
</ Script>
</ Kepala>
<Body>
<P>
<Label untuk = "jumlah"> Volume: </ label>
<Input type = "text" id = "jumlah" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-vertikal" style = "height: 200px;"> </ div>
</ Body>
</ Html>