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

随机推荐

【Linux命令】--（1）文件文件夹操作命令15条
文件文件夹操作命令++++++++++++++++++++++++++++++++++++++++ 列出进入显示文件夹 ls cd pwd 创建移动删除文件 mkdir rm rmd ...
hdu2852 KiKi's K-Number
Problem Description For the k-th number, we all should be very familiar with it. Of course,to kiki i ...
LeetCode 500. Keyboard Row （键盘行）
Given a List of words, return the words that can be typed using letters of alphabet on only one row' ...
HDU 2461 线段树扫描线
给出N个矩形,M次询问每次询问给出R个.问这R个矩形围成的面积经典扫面线求面积并,对每次询问的R个点离散化一下 #include "stdio.h" #include &quo ...
mySql学习笔记：比sql server书写要简单
在学mySql.总的感觉,mySql与Sql Server差不多,语法都很象,但mySql也许是吸取了SQL SERVER的一些经验,SQL语句书写起来更加简单. 比如说,设置主键.索引,SQL SE ...
# [libx264 @ 00000275eb57fec0] height not divisible by 2 (520x325)
# [libx264 @ 00000275eb57fec0] height not divisible by 2 (520x325)
bzoj 2217 Lollipop
题目大意: 有一个长度为n的序列a1,a2,...,an.其中ai要么是1("W"),要么是2("T") 现在有m个询问,每个询问是询问有没有一个连续的子序列, ...
【高德地图API】注册密钥
能正常使用高德地图API所有功能的前提是添加了密钥.高德API官网地址:http://api.amap.com/ 注册步骤:1.注册账号 2.填写开发者信息 3.注册密钥 1.注册账号(略过) 2.填 ...
E20171014-hm
Sibling n. 兄弟,姐妹; [生] 同科,同属; [人] 氏族成员;
洛谷P2668斗地主（搜索）noip2015
题目描述牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗地主中,牌的大小关系根据牌的数码表示如下:3<4< ...

php第二十节课

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

随机推荐

热门专题