jQuery スライドスイッチ

スマホの設定などでよく見かけるスライドしてスイッチをON/OFFするUIのサンプルです。

右にスライドするとON、左に戻すとOFFになるデザインをCSSだけで形と動きを実装しています。

以下のスワイプではなく、スイッチ全体をタップするだけで、切り替わる簡単実装です。

おまけでキーボードの←ボタン、→ボタンでも動くよう実装でしています。

OFF

切り替えをクラスの付け外しで実装しているので、連動して動く部分はhasClassメソッドで連動しています。

JSのサンプルはこちら

$(document).ready(function(){
	val();

	$("#demo_stage").click(function(){
		$(this).toggleClass("act");
		val();
	});

	$(window).keydown(function (e) {
		if(e.keyCode=='39'){
			$("#demo_stage").addClass("act");
		}else if(e.keyCode=='37'){
			$("#demo_stage").removeClass("act");
		}
		val();
	});

	function val(){
		if($("#demo_stage").hasClass("act")){
			$("#demo_val").text('ON');
			$("#demo_val").addClass("act");
		}else{
			$("#demo_val").text('OFF');
			$("#demo_val").removeClass("act");
		}
	}
});

CSSはこちら

#demo_stage{
	border: solid 1px #CCC;
	width: 300px;
	height: 60px;
	border-radius: 30px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.4) inset;
    background-color: #FEE;
    transition: all 300ms 0s ease;
}
#demo_stage.act{
    background-color: #EEF;
    transition: all 300ms 0s ease;    
}
#demo_stage.act .block{
	left:240px;
    transition: all 300ms 0s ease;
}

.block { 
    transition: all 300ms 0s ease;
    position: relative; 
    background-color: #CCC;
	border: solid 1px #EEE;
	box-sizing: border-box;
    left: 0px;
    width: 60px; 
    height: 60px;
	border-radius: 30px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

#demo_val{
	clear: both;
	position: relative;
	border-radius: 10px;
    background-color: #CCC;
    width: 100px;
	margin: 10px 100px;
	text-align: center;
	line-height: 20px;
	height: 20px;
	font-size: 12px;
	color: #666;
}
#demo_val.act{
    background-color: #CFC;
	color: #6C6;
}

よくスマホの設定画面で採用されるUIなので、ユーザーフレンドリーな表現と判断してもよさそうです。