Latest web development tutorials

jQuery UI contoh - rotator (Spinner)

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

Untuk rincian lebih lanjut tentang anggota spinner, lihat dokumentasi API anggota rotator (Spinner Widget) .

Fungsi standar

Default rotator.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 旋转器(Spinner) - 默认功能</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="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.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 spinner = $( "#spinner" ).spinner();
 
    $( "#disable" ).click(function() {
      if ( spinner.spinner( "option", "disabled" ) ) {
        spinner.spinner( "enable" );
      } else {
        spinner.spinner( "disable" );
      }
    });
    $( "#destroy" ).click(function() {
      if ( spinner.data( "ui-spinner" ) ) {
        spinner.spinner( "destroy" );
      } else {
        spinner.spinner();
      }
    });
    $( "#getvalue" ).click(function() {
      alert( spinner.spinner( "value" ) );
    });
    $( "#setvalue" ).click(function() {
      spinner.spinner( "value", 5 );
    });
 
    $( "button" ).button();
  });
  </script>
</head>
<body>
 
<p>
  <label for="spinner">选择一个值:</label>
  <input id="spinner" name="value">
</p>
 
<p>
  <button id="disable">切换禁用/启用</button>
  <button id="destroy">切换部件</button>
</p>
 
<p>
  <button id="getvalue">获取值</button>
  <button id="setvalue">设置值为 5</button>
</p>
 
 
</body>
</html>


mata uang

Contoh ini adalah bentuk sumbangan, dengan jumlah pilihan mata uang dan rotator.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 旋转器(Spinner) - 货币</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="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
  <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script>
  <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script>
  <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.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() {
    $( "#currency" ).change(function() {
      $( "#spinner" ).spinner( "option", "culture", $( this ).val() );
    });
 
    $( "#spinner" ).spinner({
      min: 5,
      max: 2500,
      step: 25,
      start: 1000,
      numberFormat: "C"
    });
  });
  </script>
</head>
<body>
 
<p>
  <label for="currency">要捐款的货币</label>
  <select id="currency" name="currency">
    <option value="en-US">US $</option>
    <option value="de-DE">EUR €</option>
    <option value="ja-JP">YEN ¥</option>
  </select>
</p>
<p>
  <label for="spinner">要捐款的数量:</label>
  <input id="spinner" name="spinner" value="5">
</p>
</body>
</html>


desimal

Contoh ini adalah rotator desimal. Peningkatan dari 0,01. Kode berurusan dengan perubahan budaya akan membaca nilai saat ini dari pemilih ketika mengubah budaya, itu akan mengatur ulang nilai berdasarkan gaya budaya baru.

<! DOCTYPE html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI rotator (Spinner) - Decimal </ 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 = "/ static / js / jQueryUI / sumber / demo / eksternal / jquery.mousewheel.js"> </ script>
  <Script src = "/ static / js / jQueryUI / sumber / demo / eksternal / globalize.js"> </ script>
  <Script src = "/ / static js / jQueryUI / sumber / demo / eksternal / globalize.culture.de-DE.js"> </ script>
  <Script src = "/ / static js / jQueryUI / sumber / demo / eksternal / globalize.culture.ja-JP.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 () {
    $ ( "#spinner") .spinner ({
      Langkah: 0,01,
      NumberFormat: "n"
    });
 
    $ ( "#culture") .change (Fungsi () {
      var saat = $ ( "#spinner") .spinner ( "value");
      Globalize.culture ($ (ini) val ());
      $ ( "#spinner") .spinner ( "Nilai", saat ini);
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<P>
  <Label untuk = "spinner"> desimal rotator: </ label>
  <Input id = "spinner" name = "spinner" value = "5.06">
</ P>
<P>
  <Label untuk = "budaya"> Pilih format untuk budaya: </ label>
  <Pilih id = "budaya">
    <Value Option = "en-EN" dipilih = "dipilih"> English </ option>
    <Value Option = "de-DE"> Jerman </ option>
    <Value Option = "ja-JP"> Jepang </ option>
  </ Pilih>
</ P>
</ Body>
</ Html>


peta

integrasi Google Maps, menggunakan spinner untuk mengubah garis lintang dan bujur.

<! DOCTYPE html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI rotator (Spinner) - Peta </ ​​title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "http://maps.google.com/maps/api/js?sensor=false"> </ script>
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "/ static / js / jQueryUI / sumber / demo / eksternal / jquery.mousewheel.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 () {
    Fungsi LatLong () {
      kembali google.maps.LatLng baru ($ ( "# lat") val (), $ ( "# lng") val () ..);
    }
    Posisi function () {
      map.setCenter (LatLong ());
    }
    $ ( "#lat, #lng") .spinner ({
      Langkah: 0,001,
      mengubah: posisi,
      berhenti: Posisi
    });
 
    Peta var = google.maps.Map baru ($ ( "# peta") [0], {
      zoom: 8,
      center: LatLong (),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  });
  </ Script>
  <Gaya>
  #map {
    width: 500px;
    height: 500px;
  }
  </ Style>
</ Kepala>
<Body>
 
<Label untuk = "lat"> lintang </ label>
<Input id = "lat" name = "lat" value = "44,797">
Situs
<Label untuk = "lng"> Bujur </ label>
<Input id = "lng" name = "lng" value = "- 93,278">
 
<Div id = "peta"> </ div>
</ Body>
</ Html>


melimpah

Batas rotator melimpah dari -10 sampai 10. Untuk nilai 10 atau lebih, meluap ke -10, dan sebaliknya.

<! DOCTYPE html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI rotator (Spinner) - Overflow </ 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 = "/ static / js / jQueryUI / sumber / demo / eksternal / jquery.mousewheel.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 () {
    $ ( "#spinner") .spinner ({
      Spin: function (event, ui) {
        jika (ui.value> 10) {
          $ (Ini) .spinner ( "value", -10);
          return false;
        } Lain jika (ui.value <-10) {
          $ (Ini) .spinner ( "value", 10);
          return false;
        }
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<P>
  <Label untuk = "spinner"> memilih nilai: </ label>
  <Input id = "spinner" name = "value">
</ P>
</ Body>
</ Html>


waktu

Ia meluas dari bagian rotator kustom. Gunakan Globalisasi (Globalisasi) plug-in untuk mengurai dan waktu keluaran cap dengan langkah kustom dan pilihan halaman. Atas / bawah kursor untuk menit atas / bawah, halaman atas / bawah untuk jam increment / decrement.

<! DOCTYPE html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI rotator (Spinner) - Waktu </ 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 = "/ static / js / jQueryUI / sumber / demo / eksternal / jquery.mousewheel.js"> </ script>
  <Script src = "/ static / js / jQueryUI / sumber / demo / eksternal / globalize.js"> </ script>
  <Script src = "/ / static js / jQueryUI / sumber / demo / eksternal / globalize.culture.de-DE.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>
  $ .widget ( "Ui.timespinner", $ .ui.spinner, {
    Pilihan: {
      // Langkah kedua: 60 * 1000,
      // Halaman H: 60
    },
 
    _parse: function (value) {
      if (nilai typeof === "string") {
        Memiliki waktu yang tertera // if (Number (value) == value) {
          kembali Number (nilai);
        }
        kembali + Globalize.parseDate (nilai);
      }
      Nilai kembali;
    },
 
    _format: function (value) {
      kembali Globalize.format (new Date (value), "t");
    }
  });
 
  $ (Fungsi () {
    $ ( "#spinner") .timespinner ();
 
    $ ( "#culture") .change (Fungsi () {
      var saat = $ ( "#spinner") .timespinner ( "value");
      Globalize.culture ($ (ini) val ());
      $ ( "#spinner") .timespinner ( "Nilai", saat ini);
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<P>
  <Label untuk = "spinner"> Waktu rotator: </ label>
  <Input id = "spinner" name = "spinner" value = "08:30">
</ P>
<P>
  <Label untuk = "budaya"> Pilih format untuk budaya: </ label>
  <Pilih id = "budaya">
    <Value Option = "en-EN" dipilih = "dipilih"> English </ option>
    <Value Option = "de-DE"> Jerman </ option>
  </ Pilih>
</ P>
</ Body>
</ Html>