自己封装的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<)
{
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的更多相关文章
- C++实现对lua访问的封装
这是一个几年前写的对lua的访问封装,当时的项目仅提供了最基本的lua访问接口:调用lua函数,向lua注册标准格式的C++函数. 本来我想引进luabind,但luabind相对又过于复杂,并不是所 ...
- Linux TC流量控制HOWTO中文版
<本文摘自Linux的高级路由和流量控制HOWTO中文版 第9章节>网人郭工进行再次编译: 利用队列,我们可以控制数据发送的方式.记住我们只能对发送数据进行控制(或称为整形).其实,我们无 ...
- 电影TS、TC、SCR、R5、BD、HD等版本是什么意思
在很多电影下载网站的影片标题中我们都能看到,比如<刺杀希特勒BD版>.<游龙戏凤TS版>等,这些英文缩写都是什么意思呢?都代表什么画质?以下就是各个版本的具体含义: 1.CAM ...
- Linux TC (traffic control)
在着手学习TC采用如下单位来描述带宽: mbps = 1024 kbps = 1024 * 1024 bps => byte/s mbit = 1024 kbit => kilo bit/ ...
- 简易封装一个带有占位文字的TextView
在实际iOS应用开发中我们经常会用到类似于下图所示的界面,即带有占位文字的文本框:
- linux 下使用 tc 模拟网络延迟和丢包(转)
1 模拟延迟传输简介 netem 与 tc: netem 是 Linux 2.6 及以上内核版本提供的一个网络模拟功能模块.该功能模块可以用来在性能良好的局域网中,模拟出复杂的互联网传输性能,诸如低带 ...
- Javascript 封装问题
Javascript 封装问题 为什么会用这样一个题目呢,这是要说封装的什么问题,本文并不讲高深的封装理论,只是解决一个小问题. 问题来源 今天在百度知道上闲逛,遇到一个网友的问题,问题如下,问题的地 ...
- linux 下使用 tc 模拟网络延迟和丢包
1 模拟延迟传输简介 netem 与 tc: netem 是 Linux 2.6 及以上内核版本提供的一个网络模拟功能模块.该功能模块可以用来在性能良好的局域网中,模拟出复杂的互联网传输性能,诸如低带 ...
- 半导体热阻问题深度解析(Tc,Ta,Tj,Pc)
半导体热阻问题深度解析(Tc,Ta,Tj,Pc) 本文是将我以前的<有关热阻问题>的文章重新梳理,按更严密的逻辑来讲解. 晶体管(或半导体)的热阻与温度.功耗之间的关系为: Ta=Tj-* ...
随机推荐
- iOS基础 - 多线程线程
一.多线程的应用 l 充分发挥多核处理器的优势,并发(同时执行)执行任务让系统运行的更快.更流畅 二.进程与线程概念 l 一个运行的程序就是一个进程或者叫做一个任务 l 一个进程至少包含一个线程,线程 ...
- twisted学习笔记No.3 Web Clients
原创博文,转载请注明出处. 这一章我们学习利用twisted建立web 客户端. twisted.web.client.getPage用来异步下载一个页面,并且返回一个deferred from tw ...
- 在win下，如何用bat看程序运行的时间
上网搜了下用bat记录程序运行时间的方法,结果连google跳出的都是些什么ctime啥的- - 一点都不靠谱 傍晚问了几个大神,也大多都是ctime党,不过还好明哲造![跪跪跪] 在此mark 就比 ...
- Controller的激活
Controller的激活 概述 在此系列开篇的时候介绍了MVC的生命周期 , 对于请求的处理,都是将相应的类的方法注册到HttpApplication事件中,通过事件的依次执行从而完成对请求的处理. ...
- [RM 状态机详解4] RMNode状态机详解
摘要 RMNode状态机是ResourceManager的四个状态机(RMApp,RMAppAttempt,RMContainer,RMNode)中最简单的一个,状态机如图1所示.RMNode是Res ...
- CSS盒子的浮动
web前端学习笔记(CSS盒子的浮动) 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. ...
- socket网络编程快速上手（二）——细节问题（5）（完结篇）
6.Connect的使用方式 前面提到,connect发生EINTR错误时,是不能重新启动的.那怎么办呢,是关闭套接字还是直接退出进程呢?如果EINTR前,三次握手已经发起,我们当然希望链路就此已经建 ...
- MVC 静态化的ActionFilter
在MVC中,需要对某些页面进行静态化,用ActionFilter来做静态化,把页面存到缓存中.如下代码所示,其中Result.RenderString是扩展方法,第一次缓存的时候,Action代码会运 ...
- IOS开发之路三（XML解析之GDataXML的使用）
最近再做一个项目需要用到xml的解析.今天查了一些资料自己做了一个小demo.纯OC没有界面.. 在IOS平台上进行XML文档的解析有很多种方法,在SDK里面有自带的解析方法,但是大多情况下都倾向于用 ...
- ASP.NET Web API是如何根据请求选择Action的？[上篇]
ASP.NET Web API是如何根据请求选择Action的?[上篇] Web API的调用请求总是针对定义在某个HttpController中的某个Action方法,请求响应的内容来源于调用目标A ...