php第二十节课

JSON弹窗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head>

<body>
<input type="button" id="btn" />
</body>
<script type="text/javascript">
$(document).ready(function(e) {

var a = {

code:"p001",
name:"张三",
shuzu:new Array(1,2,3,4),
json:{aa:"aa",bb:"bb"},
age:18

};

alert(a.json.bb);

//接口
//AJAX
//封装插件

});
</script>
</html>

// 每个弹窗的标识
var x =0;
var idzt = new Array();
var Window = function(config){

//ID不重复
idzt[x] = "zhuti"+x; //弹窗ID

//初始化，接收参数
this.config = {
width : config.width || 300, //宽度
height : config.height || 200, //高度
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, //是否移动
};

//加载弹出窗口
var w = ($(window).width()-this.config.width)/2;
var h = ($(window).height()-this.config.height)/2;

var nr = "<div class='zhuti' id='"+idzt[x]+"' bs='"+x+"' style='width:"+this.config.width+"px; height:"+this.config.height+"px; background-color:white; left:"+w+"px; top:"+h+"px;'></div>";
$("body").append(nr);

//加载弹窗标题
var content ="<div id='title"+x+"' class='title' bs='"+x+"'>"+this.config.title+"<div id='close"+x+"' class='close' bs='"+x+"'>×</div></div>";
//加载弹窗内容
var nrh = this.config.height - 75;
content = content+"<div id='content"+x+"' bs='"+x+"' class='content' style='width:100%; height:"+nrh+"px;'>"+this.config.content+"</div>";
//加载按钮
content = content+"<div id='btnx"+x+"' bs='"+x+"' class='btnx'>"+this.config.buttons+"</div>";

//将标题、内容及按钮添加进窗口
$('#'+idzt[x]).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).height()-this.config.height;
var minX = 0,
minY = 0;

//窗口移动
if(this.config.isDrag)
{
//鼠标移动弹出窗
$(".title").bind("mousedown",function(e){

var n = this.getAttribute("bs"); //取标识

//使选中的到最上层
$(".zhuti").css("z-index",3);
$('#'+idzt[n]).css("z-index",4);

//取初始坐标
var endX = 0, //移动后X坐标
endY = 0, //移动后Y坐标
startX = parseInt($('#'+idzt[n]).css("left")), //弹出层的初始X坐标
startY = parseInt($('#'+idzt[n]).css("top")), //弹出层的初始Y坐标
downX = e.clientX, //鼠标按下时，鼠标的X坐标
downY = e.clientY; //鼠标按下时，鼠标的Y坐标

//绑定鼠标移动事件
$("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;
}

$('#'+idzt[n]).css("top",endY+"px");
$('#'+idzt[n]).css("left",endX+"px");

window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty(); //取消选中文本

});
});
//鼠标按键抬起，释放移动事件
$("body").bind("mouseup",function(){

$("body").unbind("mousemove");

});
}

//关闭窗口
$(".close").click(function(){

var m = this.getAttribute("bs"); //找标识
$('#'+idzt[m]).remove(); //移除弹窗
$('#zz').remove(); //移除遮罩

})

x++; //标识增加

}

.zhuti
{
position:absolute;
z-index:3;
font-size:14px;
border-radius:5px;
box-shadow:0 0 5px white;
overflow:hidden;
color:#333;
}
.title
{
background-color:#3498db;
vertical-align:middle;
height:35px;
width:100%;
line-height:35px;
text-indent:1em;
}
.close{
float:right;
width:35px;
height:35px;
font-weight:bold;
line-height:35px;
vertical-align:middle;
color:white;
font-size:18px;
}
.close:hover
{
cursor:pointer;
}
.content
{
text-indent:1em;
padding-top:10px;
}
.btnx
{
height:30px;
width:100%;
text-indent:1em;
}
.btn
{
height:28px;
width:80px;
float:left;
margin-left:20px;
color:#333;
}
#zz
{
width:100%;
height:100%;
opacity:0.15;
display:none;
background-color:#ccc;
z-index:2;
position:absolute;
top:0px;
left:0px;
}

php第二十节课的更多相关文章

centos LAMP第二部分apache配置下载discuz！配置第一个虚拟主机安装Discuz！用户认证配置域名跳转配置apache的访问日志配置静态文件缓存配置防盗链访问控制 apache rewrite 配置开机启动apache tcpdump 第二十节课
centos LAMP第二部分apache配置下载discuz!配置第一个虚拟主机安装Discuz! 用户认证配置域名跳转配置apache的访问日志配置静态文件缓存配置防盗链 ...
风炫安全WEB安全学习第二十节课反射型XSS讲解
风炫安全WEB安全学习第二十节课反射型XSS讲解反射性xss演示原理讲解如果一个应用程序使用动态页面向用户显示错误消息,就会造成一种常见的XSS漏洞.通常,该页面会使用一个包含消息文本的参数, ...
centos tomcat/resin安装配置卸载系统自带的java tomcat安装配置安装JDK resin安装配置第二十八节课
centos tomcat/resin安装配置卸载系统自带的java tomcat安装配置安装JDK resin安装配置第二十八节课 tomcat和java都不需要编译 tom ...
centos LNMP第一部分环境搭建 LAMP LNMP安装先后顺序 php安装安装nginx 编写nginx启动脚本懒汉模式 mv /usr/php/{p.conf.default,p.conf} php运行方式SAPI介绍第二十三节课
centos LNMP第一部分环境搭建 LAMP安装先后顺序 LNMP安装先后顺序 php安装安装nginx 编写nginx启动脚本懒汉模式 mv /usr/local/php/{ ...
centos shell编程6一些工作中实践脚本 nagios监控脚本自定义zabbix脚本 mysql备份脚本 zabbix错误日志直接送给bc做计算 gzip innobackupex/Xtrabackup 第四十节课
centos shell编程6一些工作中实践脚本 nagios监控脚本自定义zabbix脚本 mysql备份脚本 zabbix错误日志直接送给bc做计算 gzip innobacku ...
NeHe OpenGL教程第二十九课：Blt函数
转自[翻译]NeHe OpenGL 教程前言声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
NeHe OpenGL教程第二十八课：贝塞尔曲面
转自[翻译]NeHe OpenGL 教程前言声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
NeHe OpenGL教程第二十六课：反射
转自[翻译]NeHe OpenGL 教程前言声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
NeHe OpenGL教程第二十五课：变形
转自[翻译]NeHe OpenGL 教程前言声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

随机推荐

Java中四大代码块的运行顺序（附code）
验证证的方法是写code.例如以下: public class test { static class A { public static String name = "hello" ...
LeetCode 349. Intersection of Two Arrays （两个数组的相交）
Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...
[LeedCode OJ]#63 Unique Paths II
[ 声明:版权全部,转载请标明出处,请勿用于商业用途. 联系信箱:libin493073668@sina.com] 题目链接:https://leetcode.com/problems/uniqu ...
kafka02
2017 nodeJS
一.版本迅速更新 Chrome浏览器已经蹦到57版本了,是名副其实的版本帝,作为兄弟的Node.js也一样,1.0之前等了6年,而从1.0到8.0,只用了2年时间,现在已到9以上了我们就数一下从v ...
JSP-Runoob：JSP 文件上传
ylbtech-JSP-Runoob:JSP 文件上传 1.返回顶部 1. JSP 文件上传 JSP 可以与 HTML form 标签一起使用,来允许用户上传文件到服务器.上传的文件可以是文本文件或图 ...
异常值检测（Detecting Outliers）
Most statistical approaches to outlier detection are based on building a probability distribution mo ...
自动生成Makefile的全过程详解
一.简介 Linux下的程序开发人员,一定都遇到过Makefile,用make命令来编译自己写的程序确实是很方便.一般情况下,大家都是手工写一个简单Makefile,如果要想写出一个符合自由软件惯例的 ...
[Swift通天遁地]三、手势与图表-(1)监听屏幕上触摸事件的各种状态
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
akka设计模式系列-Chain模式
链式调用在很多框架和系统中经常存在,算不得上是我自己总结的设计模式,此处只是简单介绍在Akka中的两种实现方式.我在这边博客中简化了链式调用的场景,简化后也更符合Akka的设计哲学. trait Ch ...

php第二十节课

php第二十节课的更多相关文章

随机推荐

热门专题