在网页上制作一个UISwitch

作者：BerenCamlost

绪论

• 苹果的开关按钮UISwitch（如下图所示）是一个非常棒的UI设计，很适合用于各种开关的场合。
• 
• 下面我将演式如何用Javascript和jQuery制作一个UISwitch按钮，首先讲解JavaScript的制作方法。

1 利用JavaScript制作UISwitch

1.1 盒模型

首先根据盒模型的设计思路，我将开关按钮分成背景（以下称switchBase）和可以拨动的圆球（以下称switchThumb）两部分，HTML代码如下：

<div id="switchBase" class="switchBase" onclick="switchBox()">
	<div id="switchThumb" class="switchThumb"></div>
</div>

我对外围的switchBase这个div加入了点击事件，鼠标点击之后会做出相应的动作，如让switchThumb改变位置，switchBase改变背景颜色等。

1.2 CSS样式

• 【注意】以下样式不太完美（因为本人的技术原因），小伙伴们可以根据需求修改。
• 【switchBase样式】：

.switchBase{
	width: 53px;
	height: 32px;
	vertical-align: middle;
	float: right;
	border-radius: 16px;/*圆角半径设置为height的一半即可*/
	border: 1px solid darkgray;
	background-color: darkgray;/*这个背景在苹果中是白色，在这里我设置成了暗灰色*/
	position: relative;
}

• 【switchThumb样式】：

.switchBase>.switchThumb{
	margin: 1px;
	width: 30px;
	height: 30px;
	vertical-align: middle;
	/* float: left;*/
	/* float: right; */
	position: absolute;
	left: 0;
	/* right: 0; */
	border-radius: 15px;
	background-color: white;
	box-shadow: 0 0 0.1625rem 0.0125rem gray;
}

• 可以看出，此时开关的状态是关闭状态，其样式如下图所示（忽略蓝绿色的背景颜色）：
  

1.3 js代码

• 下面就是我们的重头戏——JavaScript代码。
• 【需求】：
  1. 要根据点击，切换switchThumb位置和switchBase的背景颜色，并且switchThumb的位置切换还要有动画效果，慢慢的移动过去
  2. 根据点击，切换开关的状态，并且给一个flag变量赋值，来表示目前开关的状态。
• 【js代码】：

var switch_num = -1;
function switchBox(){
	switch_num = -switch_num;
	var switchBase = document.getElementById("switchBase");
	var switchThumb = document.getElementById("switchThumb");
	if (switch_num == 1){
		switchThumbMoveRight = setInterval(function(){
			switchThumb.style.left = switchThumb.offsetLeft+1+"px";
			if (switchThumb.offsetLeft >= (switchBase.offsetWidth-switchThumb.offsetWidth-2)){
				clearInterval(switchThumbMoveRight);
			}
		},15);
		switchBase.style.backgroundColor = "#00FF00";
		switchBase.style.borderColor = "#00FF00";
	}
	else if (switch_num == -1){
		switchThumbMoveLeft = setInterval(function(){
			switchThumb.style.left = switchThumb.offsetLeft-2+"px";
			if (switchThumb.offsetLeft <= 1){
				clearInterval(switchThumbMoveLeft);
			}
		},10);
		switchBase.style.backgroundColor = "darkgray";
		switchBase.style.borderColor = "darkgray";
	}
}

2 利用jQuery制作UISwitch

• 【注意】jQuery只是JavaScript的一个库，非常好用，所以在下面的说明中，HTML和CSS的代码和上面相同，我们利用jQuery的简单代码实现上述效果。

2.1 HTML和CSS代码再次粘贴在这里：

<div id="switchBase" class="switchBase" onclick="switchBox()">
	<div id="switchThumb" class="switchThumb"></div>
</div>

.switchBase{
	width: 53px;
	height: 32px;
	vertical-align: middle;
	float: right;
	border-radius: 16px;/*圆角半径设置为height的一半即可*/
	border: 1px solid darkgray;
	background-color: darkgray;/*这个背景在苹果中是白色，在这里我设置成了暗灰色*/
	position: relative;
}
.switchBase>.switchThumb{
	margin: 1px;
	width: 30px;
	height: 30px;
	vertical-align: middle;
	/* float: left;*/
	/* float: right; */
	position: absolute;
	left: 0;
	/* right: 0; */
	border-radius: 15px;
	background-color: white;
	box-shadow: 0 0 0.1625rem 0.0125rem gray;
}

2.2 jQuery代码

思路和需求和上边的完全相同，但是代码减少了很多。

$(document).ready(function(){
	var switch_num = false;
	$("#switchBase").click(function(){
		if(switch_num == false){
			$("#switchThumb").animate({left:"21px"},"fast")
			$("#switchBase").css({
				"background-color":"#00ff00",
				"border-color":"#00ff00"});
			switch_num = true;
		}
		else{
			$("#switchThumb").animate({left:"0"},"fast")
			$("#switchBase").css({
				"background-color":"darkgray",
				"border-color":"darkgray"});
			switch_num = false;
		}
	});
});