jq switch 滑动开关插件

很久之前做的一个小JQ插件了，用CSS3做的SWITCH滑动开关支持页面中多个显示与操作

1，CSS

.kg{ height:25px; line-height:25px; background:#6bde5d;; width:60px; border-radius:20px; border:1px solid rgb(76, 217, 100); position:relative; float:right;}
.hk{  height:25px; width:25px; border-radius:25px; background:#fff; display: block; margin-left:35px; transition: margin-left 0.3s}
.kg label{ height:25px; line-height:25px; width:35px; text-align:center; color:#fff; position:absolute; left:0px; top:0px; font-size:12px;}
.move1{ margin-left:0px;}
.move2{ margin-left:35px;}

2，JS(保存为单独文件)

// JavaScript Document
(function ($)
{
	$.fn.kg=function(opi)
	{
		var self=
		{
			kgzt:'',
			obj:'',
			inputObj:'',
		}
		var kg=$.extend(self,opi);
		init()
		function init(){if(kg.kgzt){kgk()}else{kgg()}}
		function kgk()
		{
			
			kg.obj.firstChild.style.marginLeft="35px"
				kg.obj.style.backgroundColor="#6bde5d";
				kg.obj.style.border="1px solid #6bde5d"
				kg.obj.lastChild.style.left="0px";
				kg.obj.lastChild.innerHTML="开"
				document.getElementById(kg.inputObj).value="1"
				return true;
		}
		function kgg()
		{
			kg.obj.firstChild.style.marginLeft="0px"
				kg.obj.firstChild.style.marginLeft="0px"
				kg.obj.style.backgroundColor="gray";
				kg.obj.style.border="1px solid gray";
				kg.obj.lastChild.style.left="25px"
				kg.obj.lastChild.innerHTML="关"
				document.getElementById(kg.inputObj).value="0"
		}
		$(kg.obj).click(function(event)
		{
			var e=event
			if(e.target.nodeName=="SPAN"||e.target.nodeName=="LABEL")
			{
				kg.obj=e.target.parentNode
			}
			else
			{
				kg.obj=e.target
			}
			var x=kg.obj.firstChild.style.marginLeft
			if(x=="0px")
			{
				kgk()
			}
			else
			{
			   kgg()
			}
		})
	}
	
})(jQuery);

3，HTML（引入JQ及上面的JS文件）

<div>
					<i>短信提醒</i>
					<span class="kg wmcaozuo"><span class="hk"></span><label>开</label></span>
                    <input type="hidden" value="1" name="kg0" id="tel"  /><!--[状态]0关-->
				</div>
			    <div>
					<i>微信提醒</i>
					<span class="kg wmcaozuo"><span class="hk"></span><label>开</label></span>
                    <input type="hidden" value="1" name="kg1" id="wx"  /><!--[状态]0关-->
				</div>

4，页面内调用插件

$("#tel").kg
({
	      kgzt:document.getElementById('tel').value=="0"?false:true,//0关1开,置开关初始状态，ID为TEL的VALUE=0、则开关显示为关，否则显示为开
			obj:document.getElementsByClassName("kg")[0],  //实际操 作的开关DOM
			inputObj:'tel',//开关点击后ID为TEL的INPUT值改变
			
})
$("#wx").kg
({
	      kgzt:document.getElementById('wx').value=="0"?false:true,//0关1开
			obj:document.getElementsByClassName("kg")[1],
			inputObj:'wx',
			
})

如有BUG或其它问题，QQ:837927397（问题答案：CSDN）

jq switch 滑动开关插件

猜你喜欢