表单
开关样式
<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: ''//内容 });