封装弹窗 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<)

             {

                 endX=0;

             }

             if(endY>maxY)

              {

                  endY=maxY;

              }

              else if(endY<)

            {

                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();//移除遮罩

  })

}     
 

自己封装的tc的更多相关文章

  1. C++实现对lua访问的封装

    这是一个几年前写的对lua的访问封装,当时的项目仅提供了最基本的lua访问接口:调用lua函数,向lua注册标准格式的C++函数. 本来我想引进luabind,但luabind相对又过于复杂,并不是所 ...

  2. Linux TC流量控制HOWTO中文版

    <本文摘自Linux的高级路由和流量控制HOWTO中文版 第9章节>网人郭工进行再次编译: 利用队列,我们可以控制数据发送的方式.记住我们只能对发送数据进行控制(或称为整形).其实,我们无 ...

  3. 电影TS、TC、SCR、R5、BD、HD等版本是什么意思

    在很多电影下载网站的影片标题中我们都能看到,比如<刺杀希特勒BD版>.<游龙戏凤TS版>等,这些英文缩写都是什么意思呢?都代表什么画质?以下就是各个版本的具体含义: 1.CAM ...

  4. Linux TC (traffic control)

    在着手学习TC采用如下单位来描述带宽: mbps = 1024 kbps = 1024 * 1024 bps => byte/s mbit = 1024 kbit => kilo bit/ ...

  5. 简易封装一个带有占位文字的TextView

    在实际iOS应用开发中我们经常会用到类似于下图所示的界面,即带有占位文字的文本框:

  6. linux 下使用 tc 模拟网络延迟和丢包(转)

    1 模拟延迟传输简介 netem 与 tc: netem 是 Linux 2.6 及以上内核版本提供的一个网络模拟功能模块.该功能模块可以用来在性能良好的局域网中,模拟出复杂的互联网传输性能,诸如低带 ...

  7. Javascript 封装问题

    Javascript 封装问题 为什么会用这样一个题目呢,这是要说封装的什么问题,本文并不讲高深的封装理论,只是解决一个小问题. 问题来源 今天在百度知道上闲逛,遇到一个网友的问题,问题如下,问题的地 ...

  8. linux 下使用 tc 模拟网络延迟和丢包

    1 模拟延迟传输简介 netem 与 tc: netem 是 Linux 2.6 及以上内核版本提供的一个网络模拟功能模块.该功能模块可以用来在性能良好的局域网中,模拟出复杂的互联网传输性能,诸如低带 ...

  9. 半导体热阻问题深度解析(Tc,Ta,Tj,Pc)

    半导体热阻问题深度解析(Tc,Ta,Tj,Pc) 本文是将我以前的<有关热阻问题>的文章重新梳理,按更严密的逻辑来讲解. 晶体管(或半导体)的热阻与温度.功耗之间的关系为: Ta=Tj-* ...

随机推荐

  1. 表达式树解析"框架"

    干货!表达式树解析"框架"(2)   为了过个好年,我还是赶快把这篇完成了吧 声明 本文内容需要有一定基础的开发人员才可轻松阅读,如果有难以理解的地方可以跟帖询问,但我也不一定能回 ...

  2. Vijos1057 盖房子（DP经典题）

    之前没有怎么刷过dp的题,所以在此学习了~(感谢walala大神的思路,给了我很大的启发) 也算是自己学习的另一种dp题型吧 先贴上状态转移方程: if(a[i][j]) f[i][j]=min(f[ ...

  3. 第一章 CLR 的执行模型

    CLR via C# 读书笔记:第一章 CLR 的执行模型(1) 第Ⅰ部分CLR基础.这部分为三章(第一章:CLR的只想能够模型,第二章:生成.打包.部署和管理应用程序及类型,第三章:共享程序集和强命 ...

  4. IOS基础开发二（iphone计算器）

    今天做了个iphone的小例子计算器:才用mvc设计模式 项目目录: 代码如下: CalculatorViewController:(MVC的控制器) // CalculatorViewControl ...

  5. 反射实现IOC功能

    通过反射实现IOC功能   这段时间园子里有不少介绍IOC组件的文章,由于自己也一直在学习IOC的各种组件,及IOC的思想,常见的IOC组件很多:AutoFac.Ninject.Utity包括.NET ...

  6. APP类别之比较与分析

    大数据应用:五大地区喜新厌旧游戏APP类别之比较与分析 前阵子笔者开发了一套系统可以用来收集亚洲五大地区上架APP的每日排名信息,希望观察出五大地区在APP上的喜好和使用程度之间的相异性. 所以,在下 ...

  7. TOGAF架构开发方法（ADM）之需求管理阶段

    TOGAF架构开发方法(ADM)之需求管理阶段 1.11 需求管理(Requirements Management) 企业架构开发方法各阶段——需求管理 1.11.1 目标 本阶段的目标是定义一个过程 ...

  8. Lucene简介(理论篇)

    Lucene 是一个软件程序的库或者说是一个工具套件,而不是一个完全的具有搜索特性的应用程序.它关注于自己的文本检索和搜索功能,提供API来完成商业中所涉及到的搜索功能.在搜索功能中,Lucene的功 ...

  9. JMX操作ActiveMQ(2)

    默认情况下,ActiveMQ使用useJmx后,jmx的url为 service:jmx:rmi:///jndi/rmi://localhost:1099/jmxrmi 这时,jmx的MBean se ...

  10. JS的运算问题……

    在公司实习期间,发现了一个JS很奇怪的问题. 今天在这里来探讨一下 第一个问题 在生活中或者其他语言中一般相加是这样的:0.1+0.2=0.3; 但在JS中却是这样:0.1+0.2=0.3000000 ...