小ネタ：ON/OFFボタンを作る

スマートフォンのアプリ等の設定メニューを見ていると、ON/OFFを切り替えるボタンを見かけます。アニメーションするものも有り、ラジオボタンやチェックボックスよりも格好良いし、視覚的にも良い感じです。

おそらくCSSのみで実装出来るサンプルコードが有るでしょうが、HTML５辺りは怠けて学習していないので、独自に出来ないかちょっと試してみました。

サンプル

jQuery+CSSです。

やる事は割と単純で、枠の中の●を左右にアニメーションさせるだけですね。

CSS

  .onoff{
    position: relative;
    line-height: 1em;
    width: 60px;
    height: 30px;
    background-color: #DDD;
    border-radius: 15px;         
    -moz-border-radius: 15px;    
    -webkit-border-radius: 15px;
    box-shadow: 1px 1px 3px #808080;
  }
  .onoff .maru{
    display: inline-block;
    background-color: #888;
    height: 26px;
    width: 26px;
    position: absolute;
    top: 2px;
    left: 2px;
    cursor: pointer;
    border-radius: 13px;         
    -moz-border-radius: 13px;    
    -webkit-border-radius: 13px;
  }
  .onoff .str{
    display: inline-block;
    font-size: 9px;
    line-height: 30px;
    position: absolute;
    left: 35px;
  }

幅60px、高さ30pxの枠を作り、その中に少し小さい●を配置します。

jQuery

$(function() {
  $('.maru').on('click', function() {
    if($(this).data('state') == 'off'){
      $(this).animate({'left': '32px','background-color':'#FFEB00'}, 150).data('state','on');
      $(this).parent("div").animate({'background-color':'#B3D39B'}, 150);
      $(this).prev("span").css({'left':'10px'}).text('ON'); 
    }else if($(this).data('state') == 'on'){
      $(this).animate({'left': '2px','background-color':'#888'}, 150).data('state','off');
      $(this).parent("div").animate({'background-color':'#DDD'}, 150);
      $(this).prev("span").css({'left':'35px'}).text('OFF');
    }
  });
});

何のことは無い、押す度にボタンを左右に移動させるだけ。後は背景色を変更したりなど。

<span class="maru" data-state="off"></span>

状態は●にjQuery.dataで記述しておき、押す度に更新します。

$(this).animate({'left': '32px','background-color':'#FFEB00'}, 150).data('state','on');

OFFの状態で押したので、左から32pxの位置にアニメーションしながら移動し、ステータスをonにする、という感じで。逆も然り。

ただ、ラジオボタンやチェックボックスを加工しているものでは無いので、ON/OFFをinput type=”hidden”で記述したフォームに入れてやる形になるかと思います。

その他にもっと良い方法があるでしょうが、いつものごとく自分の材料だけで挑戦してみないと気が済まない人間なので、色々探して一番簡単な方法を見つけて下さい。