Latest web development tutorials

jQuery UI API - komponen slider (Slider Widget)

kategori

Widget (widget)

pemakaian

Keterangan: Tarik pegangan untuk memilih nilai.

Versi baru: 1.5

jQuery UI Slider (Slider) plug-in memungkinkan dipilih melalui slider. Ada berbagai pilihan, seperti multiple menangani dan jangkauan. pegangan dapat dipindahkan dengan menggunakan mouse atau tombol panah.

komponen slider (geser Widget) akan dibuat dengan kelas selama inisialisasi ui-slider-handle pegangan elemen. Anda dapat membuat dan menambahkan elemen sebelum inisialisasi, sambil menambahkan untuk unsur ui-slider-handle , kelas untuk menentukan elemen pegangan kustom. Ini hanya akan membuat pencocokan value / values yang diinginkan panjang jumlah pegangan. Misalnya, jika Anda menetapkan values: [ 1, 5, 18 ] , dan membuat pegangan kustom, plug-in akan menciptakan dua lainnya.

theming

komponen slider (geser Widget) menggunakan jQuery framework UI CSS untuk menentukan tampilan dan nuansa dari gaya. Jika Anda perlu menggunakan slider untuk menentukan gaya, Anda dapat menggunakan berikut nama kelas CSS:

  • ui-slider : Slider kontrol track. Elemen ini akan didasarkan pada slider orientation tambahan dengan ui-slider-horizontal atau ui-slider-vertical , kelas.
    • ui-slider-handle : geser.
    • ui-slider-range : Ketika menetapkan range ketika pilihan untuk menggunakan kisaran yang dipilih. Jika range opsi disetel ke "min" atau "max" , dengan unsur-unsur tambahan masing-masing satu ui-slider-range-min atau ui-slider-range-max , kelas.

mengandalkan

informasi tambahan

  • bagian membutuhkan beberapa CSS fungsional, jika tidak maka tidak akan bekerja. Jika Anda membuat tema kustom, menggunakan widget yang ditentukan file CSS sebagai titik awal.

contoh

Sebuah sederhana jQuery UI Slider (Slider). 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> anggota slider (Slider Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Gaya> #slider {margin: 10px;} </ style>
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Kepala>
<Body>
 
<Div id = "slider"> </ div>
 
<Script>
$ ( "#slider") .slider ();
</ Script>
 
</ Body>
</ Html>