jQuery UI przykład - rotatorów (Spinner)

Poprzedni: przykładem jQuery UI - Slider (suwak)

Dalej: jQuery UI przykład - wypustki (Tabs)

Przez górę / w dół przycisków strzałek i przetwarzania klucza, funkcje wejściowe wzmocnione tekstowych wartości wejściowych.

Aby uzyskać więcej informacji na temat członka spinner, należy przejrzeć dokumentację API członek rotatorów (Spinner Widget) .

Domyślną funkcją

Domyślną rotatorów.

<!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>

waluta

Ten przykład jest formą darowizny, z liczbą opcji walutowych i rotatora.

<!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>

dziesiętny

Ten przykład jest rotator dziesiętnym. Przyrosty 0,01. Kodeks postępowania w przypadku zmian kulturowych odczytuje bieżącą wartość selektora przy zmianie kultury, to wyzerować wartość na podstawie stylu nowej kultury.

<! DOCTYPE html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI rotatorów (Prządka) - dziesiętny </ 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 = "/ statyczne / js / jqueryui / Resources / demos / zewnętrzne / jquery.mousewheel.js"> </ script>
  <script src = "/ statyczne / js / jqueryui / Resources / demos / zewnętrzne / globalize.js"> </ script>
  <Script src = "/ / statyczne js / jqueryui / resources / demos / zewnętrzna / globalize.culture.de-DE.js"> </ script>
  <Script src = "/ / statyczne js / jqueryui / resources / demos / zewnętrzna / 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 () {
    $ ( "#spinner") .spinner ({
      krok: 0,01,
      numberFormat: "n"
    });
 
    $ ( "#culture") .change (Function () {
      var prądu = $ ( "#spinner") .spinner ( "value");
      Globalize.culture ($ (this) .val ());
      $ ( "#spinner") .spinner ( "Value", prąd);
    });
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Label for = "spinner"> dziesiętny rotator: </ label>
  <Id = "spinner" nazwa = wartość "spinner" Input = "5.06">
</ P>
<P>
  <Label for = "kultury"> Wybierz format dla kultury: </ label>
  <Select id = "kultura">
    <Wartość Option = "pl-PL" selected = "wybrany"> angielski </ option>
    <Wartość Option = "de-DE"> niemiecki </ option>
    <Wartość Option = "ja-JP"> japoński </ option>
  </ Select>
</ P>
</ Body>
</ Html>

mapa

Integracja z Google Maps, za pomocą pokrętła, aby zmienić szerokość i długość geograficzną.

<! DOCTYPE html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI rotatorów (Prządka) - mapa </ 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 = "/ statyczne / js / jqueryui / Resources / demos / zewnętrzne / 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 () {
    Funkcja LatLong () {
      powrót nowa google.maps.LatLng ($ ( "# lat") val (), $ ( "# LNG") val () ..);
    }
    Stanowisko function () {
      map.setCenter (LatLong ());
    }
    $ ( "#lat, #lng") .spinner ({
      krok: 0,001,
      zmiany: pozycja,
      stop: stanowisko
    });
 
    var map = new google.maps.Map ($ ( "# map") [0] {
      Powiększenie: 8,
      Centrum: LatLong ()
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  });
  </ Script>
  <Style>
  #map {
    width: 500px;
    height: 500px;
  }
  </ Style>
</ Head>
<Body>
 
<Label for = "ac"> szerokości </ label>
<Id = Wejście "ac" name = "ac" value = "44,797">
Największa
<Label for = "LNG"> Długość </ label>
<Id = Wejście "LNG" nazwa = wartość "LNG" = "- 93,278">
 
<Div id = "map"> </ div>
</ Body>
</ Html>

przelewowy

Przelewowe limity rotator od -10 do 10. O wartości 10 lub więcej, zbiorniki do -10 ° C, i vice versa.

<! DOCTYPE html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI rotatorów (Prządka) - przelewowy </ 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 = "/ statyczne / js / jqueryui / Resources / demos / zewnętrzne / 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 () {
    $ ( "#spinner") .spinner ({
      wirowania: function (event, ui) {
        if (ui.value> 10) {
          $ (This) .spinner ( "wartość", -10);
          return false;
        } Else if (ui.value <-10) {
          $ (This) .spinner ( "wartość", 10);
          return false;
        }
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Label for = "spinner"> wybierz wartość: </ label>
  <Wejście id = "spinner" name = "wartość">
</ P>
</ Body>
</ Html>

czas

Rozciąga się z rotatorem niestandardowych części. Użyj Globalization (globalizacja) plug-in do analizowania i datownik wyjście z niestandardowym kroku i opcje strony. Góra / dół kursor przez kilka minut w górę / w dół, strona w górę / w dół w odstępach godzin / ubytek.

<! DOCTYPE html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI rotatorów (Prządka) - Time </ 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 = "/ statyczne / js / jqueryui / Resources / demos / zewnętrzne / jquery.mousewheel.js"> </ script>
  <script src = "/ statyczne / js / jqueryui / Resources / demos / zewnętrzne / globalize.js"> </ script>
  <Script src = "/ / statyczne js / jqueryui / resources / demos / zewnętrzna / 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 {
    Opcje: {
      // Drugi etap: 60 * 1000,
      // H Strona: 60
    }
 
    _parse: function (value) {
      if (typeof wartość === "string") {
        Posiada znacznik czasu // if (Number (value) == value) {
          powrót Ilość (wartość);
        }
        powrotu + Globalize.parseDate (value);
      }
      wartość powrotu;
    }
 
    _format: function (value) {
      powrót Globalize.format (new Date (wartość), "T");
    }
  });
 
  $ (Function () {
    $ ( "#spinner") .timespinner ();
 
    $ ( "#culture") .change (Function () {
      var prądu = $ ( "#spinner") .timespinner ( "value");
      Globalize.culture ($ (this) .val ());
      $ ( "#spinner") .timespinner ( "Value", prąd);
    });
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Label for = "spinner"> rotator Czas: </ label>
  <Wejście id = "spinner" name = "spinner" value = "20:30">
</ P>
<P>
  <Label for = "kultury"> Wybierz format dla kultury: </ label>
  <Select id = "kultura">
    <Wartość Option = "pl-PL" selected = "wybrany"> angielski </ option>
    <Wartość Option = "de-DE"> niemiecki </ option>
  </ Select>
</ P>
</ Body>
</ Html>

Poprzedni: przykładem jQuery UI - Slider (suwak)

Dalej: jQuery UI przykład - wypustki (Tabs)

jQuery UI kurs

jQuery UI motyw

jQuery UI Component Library

jQuery UI Reference Manual