自己实现简单的switch开关插件
本文由 小茗同学 发表于 2016-06-25 浏览(9133)
最后修改 2017-03-18 标签:jquery simple switch plugin

效果

最终效果就是这个样子:

HTML代码

HTML代码结构如下:

<div class="simple-switch">
	<span class="switch-handler"></span>
</div>

其中,文字采用:before来实现,switch-handler就是那个圆圈,通过active样式来区分是否选中,还是来看完整代码吧。

CSS代码

以下代码放在名为jquery.simpleSwitch.css的文件中:

/**
 * 简单的开关插件
 * @date 2016-06-25
 */
.simple-switch {
	width: 70px;
	height: 32px;
	border: solid 2px #ddd;
	border-radius: 30px;
	background-color: #FFF;
	position: relative;
	padding-left: 28px;
	-webkit-transition: background-color 0.3s;
	transition: background-color 0.3s;
	-webkit-user-select: none;
	font-size: 14px;
}
.simple-switch > input[type="checkbox"] {
	display: none;
}
.simple-switch:before {
	content: '关';
	text-align: center;
	display: block;
	width: 100%;
	height: 100%;
	line-height: 28px;
	color: #999;
}
.simple-switch > .switch-handler {
	position: absolute;
	left: 2px;
	top: 0px;
	width: 28px;
	height: 28px;
	background-color: #FFF;
	border-radius: 50%;
	-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.52);
	box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.52);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.simple-switch.active {
	border-color: #4cd964;
	background-color: #4cd964;
	padding-left: 0;
	padding-right: 28px;
}
.simple-switch.active:before {
	content: '开';
	color: #FFF;
}
.simple-switch.active > .switch-handler {
	left: 38px;
}

JS代码

有了CSS,再写个简单的JS插件配合它(jquery.simpleSwitch.js):

/**
 * 简单的开关插件<br>
 * 切换开关状态:$('#switchId').simpleSwitch('toggle');
 * 打开开关:$('#switchId').simpleSwitch('toggle', true);
 * 关闭开关:$('#switchId').simpleSwitch('toggle', false);
 * 获取开关状态:$('#switchId').simpleSwitch('state');
 * 事件监听:$('#switchId').on('switch-change', function(e){console.log(e.detail);});
 * @date 2016-06-25
 * @author lxa
 */
;(function($)
{
	$.fn.extend(
	{
		simpleSwitch: function(method, value)
		{
			var that = this;
			method = method || 'init';
			function toggle(flag)
			{
				that.each(function()
				{
					var isActive = $(this).hasClass('active');
					if(flag != undefined && flag == isActive) return;
					var value = flag == undefined ? !isActive : flag;
					$(this).toggleClass('active', value);
					$(this).children('input[type="checkbox"]').prop('checked', value);
					var event = document.createEvent("CustomEvent");
					event.initCustomEvent("switch-change", true, true, value);
					this.dispatchEvent(event);
				});
			}
			if(method == 'state') return this.children('input[type="checkbox"]').prop('checked');
			else if(method == 'toggle') toggle(value);
			else if(method == 'init') // 初始化
			{
				this.each(function()
				{
					var checked = $(this).children('input[type="checkbox"]').prop('checked');
					$(this).toggleClass('active', checked)
						.append('<span class="switch-handler"></span>');
				})
			}
			else if(method == 'bindEvent') // 绑定事件
			{
				this.on('click', function()
				{
					$(this).simpleSwitch('toggle');
				});
			}
			return this;
		}
	});
	$(function()
	{
		// 由于初始化效果不太好,暂时屏蔽
		//$('.simple-switch').simpleSwitch('init');
		$('.simple-switch').simpleSwitch('bindEvent');
	});
})(jQuery);

示例代码

由于比较简单,就不作过多介绍,直接上完整代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>simpleSwitch演示</title>
	<link rel="stylesheet" type="text/css" href="jquery.simpleSwitch.css">
	<style type="text/css">
	/*设置盒模型*/
	*
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box
	}
	:before,:after
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box
	}
	body{font-family: 'Microsoft Yahei'; font-size: 16px; background: white; margin: 10px; padding: 0;}
	input[type="button"] {
		background-color: #FFF;
		border: solid 1px #8E8E8E;
		padding: 10px 15px;
		border-radius: 5px;
		margin: 5px;
		font-size: 14px;
	}
	</style>
</head>
<body>
	<h1>simpleSwitch示例:</h1>
	<h2>开关1:</h2>

	<div id="switch1" class="simple-switch">
		<input type="checkbox" />
		<span class="switch-handler"></span>
	</div>


	<h2>开关2:</h2>

	<div id="switch2" class="simple-switch active">
		<input type="checkbox" checked/>
		<span class="switch-handler"></span>
	</div>

	<input type="button" value="切换所有开关状态" onclick="$('.simple-switch').simpleSwitch('toggle');"/>
	<input type="button" value="打开开关一" onclick="$('#switch1').simpleSwitch('toggle', true);"/>
	<input type="button" value="关闭开关一" onclick="$('#switch1').simpleSwitch('toggle', false);"/>
	<input type="button" value="获取开关一状态" onclick="alert('是否打开:'+$('#switch1').simpleSwitch('state'));"/>

	<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.simpleSwitch.js"></script>
	<script type="text/javascript">

	// 监听开关2的状态
	$('#switch2').on('switch-change', function(e)
	{
		console.log('开关2的状态:'+e.detail);
	});
	</script>
</body>
</html>

演示地址

http://demo.liuxianan.com/2016/06/25-simple-switch-plugin/