jQuery-UI スピナー

jQuery-UI スピナー

基本




<input id="price1" type="text" value="1000" />
<script type="text/javascript">
  $(function() {
    $('#price1').spinner();
  });
</script>

上限下限/単位設定




<input id="price2" type="text" value="1000" />
<script type="text/javascript">
  $(function() {
    $('#price2').spinner({
      max: 1500,  ※上限
      min: 100,  ※下限
      step: 10  ※変更単位
    });
  });
</script>

通貨、桁区切り






<input id="price3" type="text" value="1000" />
※通貨、桁区切りを設定するためのJavaScriptを参照
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/0.1.1/globalize.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/0.1.1/cultures/globalize.culture.ja-JP.js"></script>
<script type="text/javascript">
  $(function() {
    $('#price3').spinner({
      culture: 'ja-JP',  ※通貨
      numberFormat: 'c',  ※桁区切り
      max: 1500,
      min: 100,
      step: 10
  
    });
  });
</script>

前の記事

jQuery-UI ボタン

次の記事

jQuery-UI タブ