表单

开关样式

 <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: ''//内容
            });

 

posted @ 2017-08-02 09:57  cindy—hmy  阅读(146)  评论(0编辑  收藏  举报