自己封装的tc

封装弹窗 html

<head>
<script src="jquery.js"></script>
<script src="tc.js"></script>
<title>tc</title>
<link href="tc.css" rel=“stylesheet” type=“text/css”/>
</head>
<body>
<div><input id='tc' type='button' value='弹窗'</div>
</body>
</html>
<script type='text/javascript'>
$(document).ready(function(e){
var button="<input id='qd' type='button' value='确定'/>";
  $("#tc").click(function(){
      var tc= new Window({
         width:400,
         height:300,
         left:150,
         top:200,
         buttons:button,
         title:'tc',
         content:'hello world',
         isMask:true,
         isDrag:true,
      })
        
  })
})

</script>

css 文件

#zhuti{
position:absolute;
background-color:#999999;
overflow:hidden;
z-index:4;
border-radius:5px;
}

.title
{
 padding:1px;
 background-color:#6699FF;
 vertical-align:middle;
 heigth：35px；
 width:100%;
 line-heigth:35px;
 text-indent:1 em;
}

.close
{
 float:right;
 width:35px;
 heigth:35px;
 font-weight:bold;
 line-height:35px;
 vertical-align:middle;
 color:#FFFFFF;
 font-size:18px;
}

.close:hover
{
  cursor:pointer;
}

.content
{
  padding:3px;
  text-indent:1 em;
  padding-top:10px;
  background-color:#fff;
}

.btnx{
  height:40px;
  width:100%;
  text-indent:1 em;
  background-color:#0066cc;
}

#zz{
 width:100%;
 heigth:100%
 opacity:0.4;
 display:block;
 background-color:#333333;
 z-index:1;
 position:absolute;
 top:0px;
 left:0px;
}

 

 

 

 

tc.js文件   红色字体 中英混淆

var Window = function(config)//js封装类的一种方式 var Window = function(){}  config 参数 jason 数据类型常用作封装类的配置参数
{
    //初始化接受参数  json取值方式  config.width
    this.config={
           width:config.width||300,
           height:config.heigth||200,
           left:config.left||300，
           top:config.top||300， 
           buttons:config.buttons ||"",
           title:config.title||"标题"，
           content：config.content||"内容"，
           isMask:config.isMask==false?false:config.isMask ||true,
           isDrag:config.isDrag==false?false:config.isDrag ||true,        
    }
   // 加载弹出窗体   造div 注意里面变量连接方式
    var zhuti = "<div class='zhuti' id='zhuti' style='width:"+this.config.width+"px; height:"+this.config.heigth+"px; left:"+this.config.left+"px; top:"+this.config.top+"px;'></div>";
  
   //找到body对象追加主体div
   $("body").append(zhuti);
   //加载弹窗标题
   var content="<div id='title' class='title'>"+this.config.title+"<div id='close' class='close'>X</div></div>";
  //加载弹窗内容
   var nrh =this.config.heigth-80;
   content = content+"<div id='content' class='content' style='width:100%; heigth:"+nrh+"px'>"+this.config.content+"</div>"; 
  //加载按钮
   content = content+"<div id='btnx' class='btnx'>"+this.config.buttons+"</div>";

  //将content拼接追加主体
  $("#zhuti").html(content);

  //创建遮罩层
  if(this.config.isMask)
  {
      var zz ="<div id='zz'></div>";
      $("body").append(zz);
      $("#zz").css('display','block');
  }

  //拖动事件
   var maxX = $(window).width()-this.config.width;
   var maxY = $(window).heigth()-this.config.heigth;
   var minX=0; var minY=0;
   if(this.config.isDrag)
   {
       $("title").bind('mousedown',function(e){
           var endX= 0;//移动后的x坐标
           var endY= 0;//移动后的y坐标
           var startX=parseInt($("#zhuti").css("left"));//弹出初始x坐标
           var startY=parseInt($("#zhuti").css("top"));//弹出初始 y 坐标
           
           var downX= e.clientX;//鼠标按下 x 坐标
           var downY= e.clientY;//鼠标按下 x 坐标

          //绑定鼠标移动事件
         $("body").bind("mousemove",function(es){
             endX = es.clientX -downX+startX;//x坐标移动
             endY =  es.clientY -downY+startY;//Y坐标移动
             //最大最小限制
             if(endX>maxX)
             {
                  endX=maxX;
             }
             else if(endX<0)
             {
                 endX=0; 
             }
             if(endY>maxY)
              {
                  endY=maxY;
              }
              else if(endY<0)
            {
                endY=0;
            }

          $("#zhuti").css("top",endY+"px");
          $("#zhuti").css("left",endX+"px");
         })
      
     })
   }  
   //鼠标抬起 释放移动事件
  $("body").bind("mouseup",funhction(){
    $("body").unbind("mousemove"); 
  })

  //关闭窗口
  $("#qd").click(function(){
      $("#zhuti").remove();//移除主体
      $("zz").remove();//移除遮罩
  })
   
  $(".close").click(function(){
      $("#zhuti").remove();//移除主体
      $("zz").remove();//移除遮罩
  })

}     
 
posted @ 2016-10-10 10:59  kevin2016  阅读(319)  评论(0)  编辑  收藏  举报