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管线 ...

随机推荐

金典 SQL笔记(6)
page223-索引 --利用SQL 语句创建索引 --CREATE INDEX 索引名称on 表名(字段 ,字段, 字段字段n) --索引名称必须为唯一的,字段 ,字段, 同意一个到多个 --范例为 ...
hdu 4888 Redraw Beautiful Drawings(最大流，判环)
pid=4888">http://acm.hdu.edu.cn/showproblem.php?pid=4888 加入一个源点与汇点,建图例如以下: 1. 源点 -> 每一行相应 ...
UVA 1640（DFS）
题意:给你a,b两个数问你a b区间中0 9出现的次数其实就是求1-n中0-9出现的次数 ans[n] 答案就是ans[b]-ans[a-1] 怎么求的话看代码吧 #include<io ...
Gift
[问题描述] 人生赢家老王在网上认识了一个妹纸,然后妹纸的生日到了,为了表示自己的心意,他决定送她礼物.可是她喜爱的东西特别多,然而他的钱数有限,因此他想知道当他花一定钱数后剩余钱数无法再购买任何 ...
openstack封装待调试
IDEA Spark Streaming 操作(RDD队列流)
import org.apache.spark.SparkConf import org.apache.spark.rdd.RDD import org.apache.spark.streaming. ...
【转载】HashMap实现原理浅析
HashMap和Hashtable的区别两者最主要的区别在于Hashtable是线程安全,而HashMap则非线程安全Hashtable的实现方法里面都添加了synchronized关键字来确保线程 ...
基于Linux的v4l2视频架构驱动编写（转载）
转自:http://www.linuxidc.com/Linux/2011-03/33022.htm 其实,我刚开始一直都不知道怎么写驱动,什么都不懂的,只知道我需要在做项目的过程中学习,所以,我就自 ...
Android -----listView的重要属性
android:transcriptMode="alwaysScroll" android:cacheColorHint="#00000000" android ...
Hadoop Hive概念学习系列之hive里的桶（十一）
不多说,直接上干货! Hive还可以把表或分区,组织成桶.将表或分区组织成桶有以下几个目的: 第一个目的是为看取样更高效,因为在处理大规模的数据集时,在开发.测试阶段将所有的数据全部处理一遍可能不太 ...

php第二十节课

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

随机推荐

热门专题