閱讀(18.6k) 書簽贊(1) 我要糾錯(cuò)

jQuery UI 實(shí)例 – 旋轉(zhuǎn)器（Spinner）

2022-06-07 15:45 更新

jQuery UI 實(shí)例 - 旋轉(zhuǎn)器（Spinner）

通過向上/向下按鈕和箭頭鍵處理，為輸入數(shù)值增強(qiáng)文本輸入功能。

如需了解更多有關(guān)spinner部件的細(xì)節(jié)，請查看API文檔旋轉(zhuǎn)器部件（Spinner Widget）。

默認(rèn)功能

默認(rèn)的旋轉(zhuǎn)器。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 旋轉(zhuǎn)器（Spinner） - 默認(rèn)功能</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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">選擇一個(gè)值：</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">設(shè)置值為 5</button>
</p>
 
 
</body>
</html>

貨幣

本實(shí)例是一個(gè)捐款表格，帶有貨幣選擇和數(shù)量旋轉(zhuǎn)器。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 旋轉(zhuǎn)器（Spinner） - 貨幣</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></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="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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 {#content}lt;/option>
    <option value="de-DE">EUR €</option>
    <option value="ja-JP">YEN ￥</option>
  </select>
</p>
<p>
  <label for="spinner">要捐款的數(shù)量：</label>
  <input id="spinner" name="spinner" value="5">
</p>
</body>
</html>

小數(shù)

本實(shí)例是一個(gè)小數(shù)旋轉(zhuǎn)器。增量設(shè)置為0.01。處理文化變化的代碼會(huì)讀取當(dāng)前的選擇器的值，當(dāng)改變文化時(shí)，會(huì)基于新的文化重新設(shè)置值的樣式。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 旋轉(zhuǎn)器（Spinner） - 小數(shù)</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></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="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script>
  $(function() {
    $( "#spinner" ).spinner({
      step: 0.01,
      numberFormat: "n"
    });
 
    $( "#culture" ).change(function() {
      var current = $( "#spinner" ).spinner( "value" );
      Globalize.culture( $(this).val() );
      $( "#spinner" ).spinner( "value", current );
    });
  });
  </script>
</head>
<body>
 
<p>
  <label for="spinner">小數(shù)旋轉(zhuǎn)器：</label>
  <input id="spinner" name="spinner" value="5.06">
</p>
<p>
  <label for="culture">選擇一種用于格式化的文化：</label>
  <select id="culture">
    <option value="en-EN" selected="selected">English</option>
    <option value="de-DE">German</option>
    <option value="ja-JP">Japanese</option>
  </select>
</p>
</body>
</html>

地圖

谷歌地圖集成，使用旋轉(zhuǎn)器來改變緯度和經(jīng)度。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 旋轉(zhuǎn)器（Spinner） - 地圖</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://maps.google.com/maps/api/js?sensor=false" rel="external nofollow" ></script>
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script>
  $(function() {
    function latlong() {
      return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
    }
    function position() {
      map.setCenter( latlong() );
    }
    $( "#lat, #lng" ).spinner({
      step: .001,
      change: position,
      stop: position
    });
 
    var map = new google.maps.Map( $("#map")[0], {
      zoom: 8,
      center: latlong(),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  });
  </script>
  <style>
  #map {
    width:500px;
    height:500px;
  }
  </style>
</head>
<body>
 
<label for="lat">緯度</label>
<input id="lat" name="lat" value="44.797">
<br>
<label for="lng">經(jīng)度</label>
<input id="lng" name="lng" value="-93.278">
 
<div id="map"></div>
</body>
</html>

溢出

溢出旋轉(zhuǎn)器限制范圍從-10到10。對于10以上的值，會(huì)溢出到-10，反之亦然。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 旋轉(zhuǎn)器（Spinner） - 溢出</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script>
  $(function() {
    $( "#spinner" ).spinner({
      spin: function( event, ui ) {
        if ( ui.value > 10 ) {
          $( this ).spinner( "value", -10 );
          return false;
        } else if ( ui.value < -10 ) {           
          $( this ).spinner( "value", 10 );           
          return false;         
        }       
      }     
    });   
  });   
  </script>
</head>
<body>
 
<p>
  <label for="spinner">選擇一個(gè)值：</label>
  <input id="spinner" name="value">
</p>
</body>
</html>

時(shí)間

一個(gè)擴(kuò)展自旋轉(zhuǎn)器的自定義部件。使用全球化（Globalization）插件來解析和輸出時(shí)間戳，帶有自定義的step和page選項(xiàng)。向上/向下光標(biāo)用于分鐘的遞增/遞減，向上/向下翻頁用于小時(shí)的遞增/遞減。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 旋轉(zhuǎn)器（Spinner） - 時(shí)間</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></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="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script>
  $.widget( "ui.timespinner", $.ui.spinner, {
    options: {
      // 秒
      step: 60 * 1000,
      // 小時(shí)
      page: 60
    },
 
    _parse: function( value ) {
      if ( typeof value === "string" ) {
        // 已經(jīng)是一個(gè)時(shí)間戳
        if ( Number( value ) == value ) {
          return Number( value );
        }
        return +Globalize.parseDate( value );
      }
      return value;
    },
 
    _format: function( value ) {
      return Globalize.format( new Date(value), "t" );
    }
  });
 
  $(function() {
    $( "#spinner" ).timespinner();
 
    $( "#culture" ).change(function() {
      var current = $( "#spinner" ).timespinner( "value" );
      Globalize.culture( $(this).val() );
      $( "#spinner" ).timespinner( "value", current );
    });
  });
  </script>
</head>
<body>
 
<p>
  <label for="spinner">時(shí)間旋轉(zhuǎn)器：</label>
  <input id="spinner" name="spinner" value="08:30 PM">
</p>
<p>
  <label for="culture">選擇一種用于格式化的文化：</label>
  <select id="culture">
    <option value="en-EN" selected="selected">English</option>
    <option value="de-DE">German</option>
  </select>
</p>
</body>
</html>

以上內(nèi)容是否對您有幫助：

← jQuery UI 實(shí)例 – 滑塊（Slider）

jQuery UI 實(shí)例 – 標(biāo)簽頁（Tabs） →

寫筆記

我要補(bǔ)充

jQuery UI 實(shí)例 – 旋轉(zhuǎn)器（Spinner）

jQuery UI 實(shí)例 - 旋轉(zhuǎn)器（Spinner）

默認(rèn)功能

貨幣

小數(shù)

地圖

溢出

時(shí)間

推薦文章

推薦教程

推薦課程