Interface Elements の Slider で郵便番号を入力してみたが・・・

デモを見る

Interface elements for jQuery の Slider を使って郵便番号を入力します。

7つある Slider は郵便番号の桁に対応しています。最も上の Slider が郵便番号の1桁目で、下に向かって2桁目、3桁目と続きます。そして、最も下の Slider が7桁目です。

Slider がとり得る値は 0 から 100 の相対値か、Slider 要素の幅の 0px から style.width のピクセル値です。ですので、郵便番号の7桁のように大きな値の幅持ち、かつ1刻みで入力を必要とするケースには Slider は適しません。Slider を使おうとするとき、その用途ととり得る値が期待どおりなのか検討が必要になるでしょう。

<style type="text/css">
<!--

.slider {
  background-image: url(/postal/images/slider_resize_back.jpg);
  margin: 0.5em auto;
  width: 300px;
  height: 20px;
  position: relative;
}

.handle {
  background-color: #fff;
  border: 1px solid #ccc;
  height: 20px;
  width: 10px;
  cursor: move;
}

#f {
  text-align: center;
}

#c {
  width: 7em;
}

-->
</style>

<script type="text/javascript">
//<![CDATA[

jQuery(function($) {

$('.slider').each(function(i) {
  $(this).Slider({
    accept: $('.handle', this),
    onSlide: function(cordx) {
        var x = Math.floor(Math.max(0, cordx - 1) / 10);
        var c = $('#c').val();
        while (c.length < 7)
          c = '0' + c;
        $('#c').val(c.substr(0, i) + x + c.substr(i + 1)
        );
      }
  });
});

}); //jQuery

//]]>
</script>

<form id="f">
〒
<input id="c" type="text" name="c" value="" maxlength="7"/>
</form>

<div id="s1" class="slider"><div class="handle"></div></div>
<div id="s2" class="slider"><div class="handle"></div></div>
<div id="s3" class="slider"><div class="handle"></div></div>
<div id="s4" class="slider"><div class="handle"></div></div>
<div id="s5" class="slider"><div class="handle"></div></div>
<div id="s6" class="slider"><div class="handle"></div></div>
<div id="s7" class="slider"><div class="handle"></div></div>

となりのトトロ SG-047A 郵便番号 by G-Tools