zoukankan      html  css  js  c++  java
  • 表单

    开关样式

     <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{ 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{ 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{
                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: ''//内容
                });
    
  • 相关阅读:
    2019.01.06-dtoj-2437: [Noi2011]兔兔与蛋蛋
    2019.01.03-bzoj-1443-[JSOI2009]游戏Game
    2019.01.03-dtoj-4104-yjqaa
    2019.01.03-sg函数模板
    2019.01.02-bzoj-4550: 小奇的博弈
    2019.01.02-dtoj2293-幻想乡开店(shop)
    OCP 071中文考试题库(cuug内部资料)第5题
    OCP 063中文考试题库(cuug内部资料)第4题
    OCP 063中文考试题库(cuug内部资料)第3题
    OCP 062中文考试题库(cuug内部资料)第4题
  • 原文地址:https://www.cnblogs.com/cindy-hmy/p/7272314.html
Copyright © 2011-2022 走看看