JSON讲解和“弹窗”
json定义形式{key1:value1,
key2:value2,
key3:value3.....}
例:
title>JSON讲解</title>
<script src="jquery-2.0.0.min.js"></script>
</head> <body>
<input type="button" id="btn"/>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
var a={ //json定义形式{key1:value1,key2:value2,key3:value3.....}
code:"p001",
name:"张三",
shuzu:new Array(1,2,3,4,5),
json:{aa:"aa",bb:"bb"},
age:18
};
alert(a.shuzu[2]);
alert(a.json.bb); });
</script>
网页传输方式;JSON,XML,TEXT
json用的地方
接口:API
XML时
封装插件:弹窗
弹窗讲解:
写弹窗代码时需要分别引入“tanchaung.js”和“tanchaung.css”表
第一:tanchuang.js代码如下(主要部分)
// 每个弹窗的标识
var x =0;
var idzt = new Array();
var Window = function(config){ //在js中用函数写类 //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); //append代表在代码body里追加的内容 //加载弹窗标题
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){ //bind绑定事件 //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++; //标识增加 }
第二:tanchuang.css代码(理解)
.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;
}
第三:前端代码部分(主要的是script中的JSON代码)
<title>弹窗</title>
<script src="jquery-1.11.2.min.js"></script>
<script src="tanchuang.js"></script>
<link type="text/css" href="tanchuang.css" rel="stylesheet"> </head> <body bgcolor="#CCCCCC"> <div align="center">
<input type="button" value="弹出窗口" id="btn"/>
</div> </body>
<script type="text/javascript"> $(document).ready(function(e) { $("#btn").click(function(){ var button="<input type='button' value='确定'/><input type='button' value='取消'/>"; var content = "<div>山东理工大学(Shandong University of Technology)创建于1956年</div>"; var $tc=new Window({ width : 600, //宽度
height : 400, //高度
buttons : button, //默认无按钮
title : "世界,你好!", //标题
content : content, //内容
isMask : false, //是否遮罩
isDrag : true, //是否移动
}) })
});
</script>
</html>
JSON讲解和“弹窗”的更多相关文章
- 数据格式json讲解
JSON 在使用名称/值对或XML时,实际上是使用javascript从应用程序中取得数据并将数据转换成另一种数据格式.javascript不仅作为格式化语言使用,还可以使用javascript语言中 ...
- Json 讲解
JSON详解 阅读目录 JSON的两种结构 认识JSON字符串 在JS中如何使用JSON 在.NET中如何使用JSON 总结 JSON的全称是”JavaScript Object Notation”, ...
- json传参应用
json传参应用 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人阅 ...
- JS重写alert,保证弹窗错误的友好性
// ------------------------------------------------------------- // 重写alert,保证弹窗错误的友好性 var j_oldAler ...
- 关于Struts传递json给easyui的随笔
今天在公司写测试代码,由于公司用的是ssh框架做的商城项目,我想先实现下简单的增删改查,奈何没有很好的后台页面(毕竟不能测试代码直接在他的项目里改啊) 所以想到了淘淘商城中有这个后台的管理页面,打算一 ...
- SpringMVC: JSON
SpringMVC:JSON讲解 什么是JSON? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式,目前使用特别广泛. 采用完全独立于编 ...
- 小白文-SpringMVC-解读DispatcherServlet源码
SpringMVC 学习完Spring框架技术之后,差不多会出现两批人: 一批是听得云里雾里,依然不明白这个东西是干嘛的: 还有一批就是差不多理解了核心思想,但是不知道这些东西该如何去发挥它的作用. ...
- JavaSSM-总结
Spring框架技术 SSM(Spring+SpringMVC+Mybatis)阶段的学习,也算是成功出了Java新手村. 前面我们已经学习过Mybatis了. 从这里开始,很多的概念理解起来就稍微有 ...
- OpenHarmony标准设备应用开发(三)——分布式数据管理
(以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点) 邢碌 上一章,我们通过分布式音乐播放器.分布式炸弹.分布式购物车,带大家讲解了 OpenAtom OpenHarmon ...
随机推荐
- VS2015 多项目源码共享链接
Eclipse有这个功能,在一个项目中加入另一个项目文件夹的引用,源码包含过来,这样不必copy一份代码,只需要维护一份源代码.一直想在VS中找到这个功能,目前项目需要,终于google到了. htt ...
- const与#define宏常量 , inline与#define
1.预处理 预处理器是在真正的编译开始之前由编译器调用的独立程序.预处理器可以删除注释.包含其他文件以及执行宏替代. 预处理命令(宏定义#define..#undef. 文件包含#include. 条 ...
- ArcGIS API for Silverlight 实现修改地图上的工程点位置
原文:ArcGIS API for Silverlight 实现修改地图上的工程点位置 #region 处理工程点点击编辑相关事件 public Graphic editgraphics = null ...
- 实验一补充内容 Java开发环境的熟悉-刘蔚然
本次实验 PSP时间统计 步骤 耗时百分比 需求分析 5% 设计 10% 代码实现 67% 测试 15% 分析总结 3%
- Linux内核socket优化项
Linux内核socket优化项 vi /etc/sysctl.confnet.core.netdev_max_backlog = 30000 每个网络接口接收数据包的速率比内核处理这些包的速率快时 ...
- 由单例模式学到:Lazy<T>
http://www.cnblogs.com/zhangpengshou/archive/2012/12/10/2811765.html http://www.cnblogs.com/anytao/a ...
- Ubuntu 安装软件
1,安装pthread的man文档 sudo apt-get install manpages-posix manpages-posix-dev
- Android:学习AIDL,这一篇文章就够了(下)
前言 上一篇博文介绍了关于AIDL是什么,为什么我们需要AIDL,AIDL的语法以及如何使用AIDL等方面的知识,这一篇博文将顺着上一篇的思路往下走,接着介绍关于AIDL的一些更加深入的知识.强烈建议 ...
- python_遇到问题
1. [出现问题]:cx_Oracle.DatabaseError: ORA-24315: 非法的属性类型 [原因]:是因为版本不兼容,检查了一下环境,我的oracle client是10g的,但我安 ...
- Linux 内核版本规律
版本组成:主版本号.次版本号.修正版本号 主版本号和次版本号一起标志着重要的功能变更,修正版本号表示较小的功能变更.次版本号表示该版本是否为稳定版本,偶数则为稳定版本,奇数则可能存在一些BUG.