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

随机推荐

addSubview和insertSubview 区别
子视图是以栈的方式存放的. 每次addsubview时都是在最后面添加. 每次在addsubview前和addsubview后可以看看[self.view.subViews count]: 你看看你 ...
[Unity 设计模式]IOC依赖倒置
1.前言最近在看<游戏开发与设计模式>一书,看到控制反转设计模式,作者说:上层模块不应该依赖于下层模块,上层模块和下层模块都应该依赖于接口,这样能减少耦合.然后附带举了个例子,我觉得特别 ...
洛谷 P2634 聪聪可可 —— 树形DP / 点分治
题目:https://www.luogu.org/problemnew/show/P2634 今天刚学了点分治,做例题: 好不容易A了,结果发现自己写的是树形DP...(也不用找重心)(比点分治快) ...
poj1988Cute Stacking
题目大意:有几个stack,初始里面有一个cube.支持两种操作:1.move x y: 将x所在的stack移动到y所在stack的顶部.2.count x:数在x所在stack中,在x之下的cub ...
03-vue实例生命周期和vue-resource
vue实例的生命周期什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期函 ...
python之文件操作
一.初识文件操作使用python来读写文件是非常简单的操作,我们使用open函数来打开一个文件,获取到文件句柄,然后通过文件句柄就可以进行各种各样的操作,同过打开方式的不同能够执行的操作也会有相 ...
SQl基本操作——视图
视图适合频繁查询的表:将一个查询结果作为虚拟表提供给开发人员.安全性高,视图只能查询不能修改,它是一张虚拟表.查询方便,逻辑清晰,但是性能低,一般情况下不如自己写sql语句. --创建视图 creat ...
SQL基本操作——表的创建
通过代码方式创建数据库 create database MyDatabaseNew on primary ( --名字 name='MyDatabaseNew_data', --路径 filename ...
[系统]no such partition
电脑系统是win8.1+ubuntu14.2,为了卸载ubuntu,安装CentOS,于是在win8.1下把ubuntu的分区给删除了,重启,出现no such partition grub resc ...
Python标准库sys
1.命令行参数sys.argv 我们从Python语言之模块第一部分的例子开始,看看sys.argv中到底存了些什么内容. #Filename: using_sys.py import sys i=0 ...

php第二十节课

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

随机推荐

热门专题