一、样式 

 二、样式

/*开关示例*/.东方仙盟_灵颜妙手  {position: relative;display: inline-block;width: 60px;height: 34px;border-radius: 17px; /* 添加圆角效果，使开关看起来更圆润美观 */box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 添加淡淡的阴影效果，增强立体感 */}.东方仙盟_灵颜妙手 input {opacity: 0;width: 0;height: 0;}.东方仙盟_灵颜妙手_滑动开关 {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;transition: 0.4s;border-radius: 17px; /* 滑块也添加圆角效果，与开关整体匹配 */}.东方仙盟_灵颜妙手_滑动开关:before {position: absolute;content: "";height: 26px;width: 26px;left: 4px;bottom: 4px;background-color: white;transition: 0.4s;border-radius: 50%; /* 将滑块内部前置元素设置为圆形，视觉效果更好 */}.东方仙盟_灵颜妙手_滑动开关input:checked +.东方仙盟_灵颜妙手_滑动开关 {background-color: #2196F3;}.东方仙盟_灵颜妙手_滑动开关input:checked +.东方仙盟_灵颜妙手_滑动开关:before {transform: translateX(26px);}

 三、使用

<label class="东方仙盟_灵颜妙手"><input name="switch-field-1" class="东方仙盟_灵颜妙手_滑动开关input"  type="checkbox" data-id="{gfsoft{$list.ItemID}" /><div class="东方仙盟_灵颜妙手_滑动开关"></div></label>				

四、关联

function 东方仙盟_状态赋值(dom1, dom2, status1, status2, attribute){$(dom1).each(function(){}).click(function(){var 网关修改状态="{gfsoft{:U('update_itemmain_status_ajax')}";var _this = $(this),type = 'open',id = $(this).attr("data-id");if(_this.attr("checked")){	//开启type = 'open';}else{		//关闭type = 'close';}$.ajax({url:网关修改状态,type:"post",data:{"type":type,"id":id,"status1":status1,"status2":status2,"attribute":attribute},dataType:"json",success:function(d){console.log(d);if(d.status == 9 ){		//失败}}});});
}

五、赋能

东方仙盟_状态赋值(".东方仙盟_灵颜妙手_滑动开关input", ".statusSwitch", "OPEN", "CLOSED", "shopstatus");