表单
开关样式
<div class="box"> <div class="openOne"> <span>NO</span> <div class="openTwo"></div> </div> </div><!-- 开关 -->
js代码(点击box产生效果)
$('.box').each(function(i){ $(this).click(function(){ $(this).toggleClass('active'); text=$(this).find('.openOne span').text(); if(text=="NO"){ $(this).find('.openOne span').text('YES'); }else{ $(this).find('.openOne span').text('NO'); } }) });
css样式
.box{display: inline-block;}
.openOne{width: 60px;height: 20px;border-radius: 25px;position: relative;background:#4D90F6; transition: all .3s ease-in-out;}
.openOne span{line-height: 20px;color: #fff;padding-left: 15px;font-family: "微软雅黑";font-size: 14px;}//文字
.openTwo{width: 20px;height: 20px;border-radius: 10px;position: absolute;box-shadow: 0px 2px 4px rgba(0,0,0,0.4);background: #fff;top: 0px;left:40px;cursor: pointer;transition: left .3s ease-in-out;}//圆
.box.active .openOne{box-shadow: 0px 0px 4px rgba(0,0,0,0.4);background: #fff;}
.box.active .openTwo{left: 0px;}
.box.active .openOne span{color: #666;padding-left: 20px;}

p{font: 12px/1.5em Arial;color: #000;}
img{
width:5px;height:5px;
background:green;
vertical-align: middle;
}
<p><img src="" >1111</p>
提示框
(使用layer插件,注意:图片写在css里的)
function func1() {
//提示框
var message = '是否删除?';
layer.confirm(message, {icon:7, title:false,btnAlign: 'c',closeBtn:0},
//icon样式,取消头部,按钮居中,取消右上角按钮
function(index){
//点击确定do sth
layer.close(index);
});
};
模态框插件
function func2() {
//模态框
var height ="360px";
var width="630px";
layer.open({
type: 1,
skin: 'layui-layer-demo', //样式类名
closeBtn: 1, //不显示关闭按钮
anim: 2,
btnAlign: 'c',//按钮居中
fix:true,//层是否固定在可视区域
shadeClose:false, //开启遮罩
area: [width, height],//宽高
btn:['保存','取消'],
content: ''//内容
});

浙公网安备 33010602011771号