Latest web development tutorials

jQuery UI API - anggota rotator (Spinner Widget)

kategori

Widget (widget)

pemakaian

Keterangan: atas / bawah tombol panah dan pengolahan kunci, nilai input teks ditingkatkan fungsi input.

Versi baru: 1.9

Rotator (Spinner), atau mengendalikan jumlah langkah (jumlah stepper widget), digunakan untuk memproses berbagai masukan digital kontrol yang sempurna. Hal ini memungkinkan pengguna untuk memasukkan nilai secara langsung, atau memutar untuk mengubah nilai yang ada melalui keyboard, mouse wheel. Ketika dikombinasikan dengan globalisasi (globalisasi), Anda bahkan dapat memutar mata uang layar dan tanggal di berbagai daerah.

Rotator (Spinner) menggunakan dua tombol untuk memasukkan cakupan teks untuk peningkatan dan pengurangan nilai saat ini. Rotator menambahkan peristiwa penting sehingga Anda dapat menggunakan keyboard untuk melakukan kenaikan dan pengurangan yang sama. Rotator perwakilan Globalisasi (globalisasi) format digital dan resolusi.

interaksi keyboard

  • UP: untuk meningkatkan nilai satu langkah.
  • BAWAH: untuk mengurangi langkah nilai.
  • PAGE UP: untuk meningkatkan nilai.
  • PAGE DOWN: untuk mengurangi nilai.

Klik pada tombol rotasi dengan mouse, fokus tetap di bidang teks.

Ketika rotator yang tidak dibaca ( <input readonly> ), pengguna dapat memasukkan nilai, yang dapat mengakibatkan nilai yang tidak valid (kurang dari minimum, lebih besar dari maksimum, menambah atau mengurangi mismatch, masukan non-numerik). Ketika kenaikan atau penurunan, baik pemrograman atau dengan cara tombol putar, nilai akan dipaksa untuk nilai yang valid (Untuk informasi lebih lanjut, silakan lihat stepUp() dan stepDown() akan dijelaskan.

theming

anggota rotator (Spinner Widget) menggunakan framework jQuery UI CSS untuk menentukan tampilan dan nuansa dari gaya. Jika Anda perlu menggunakan gaya spinner yang ditentukan, Anda dapat menggunakan berikut nama kelas CSS:

  • ui-spinner : rotator wadah luar.
    • ui-spinner-input : anggota rotator (Spinner Widget) dipakai <input> elemen.
    • ui-spinner-button : rotator digunakan untuk kenaikan atau penurunan nilai kontrol tombol. Tombol Up tambahan akan disediakan dengan ui-spinner-up , kelas, turun tombol dengan tambahan ui-spinner-down , 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.
  • Komponen untuk pemrograman memanipulasi nilai dari elemen, sehingga ketika nilai perubahan elemen tidak memicu asli change acara.
  • Tidak mendukung <input type="number"> Buat pemilih, karena akan menimbulkan konflik dengan rotator UI lokal.

contoh

pemilih digital umum. 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> anggota rotator (Spinner Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <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>
 
<Input id = "spinner">
 
<Script>
$ ( "#spinner") .spinner ();
</ Script>
 
</ Body>
</ Html>