JSON和AJAX

<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);----弹出窗口bb
</script>

弹出窗口练习：

<body style="background-color:#999">

<div style="width:200px; margin-top:10px"><input type="button" value="弹出窗口" id="btntc" style="width:100px; height:30px; font-size:18px;" /></div>

<div id="tc"></div>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

    $('#btntc').click(function(){

            var html = "<div style='color:red'>这是测试的弹窗</div>";

            var button ="<input type='button' value='确定' /><input type='button' value='取消' />";

            var win = new Window({

                width : 700, //宽度

                height : 500, //高度

                title : '弹窗', //标题

                content : html, //内容

                isMask : false, //是否遮罩

                buttons : button, //按钮

                isDrag:true,

                });

        })

});

</script>
// 每个弹窗的标识

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:;

    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:;

    position:absolute;

    top:0px;

    left:0px;

}

JSON 弹窗的更多相关文章

  1. php第二十节课

    JSON弹窗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. Web 组态运用之用户数据 ARPU 分析图

    前言 作为企业的发展,通过运营的有效管理,增加收入.降低成本,取得更好的经济效益,是核心所在,在电信企业同样如此.电信企业的利润大体上是由业务收入和成本决定的,而收入和成本又可进一步分别分解表达为不同 ...

  3. 01-04 Json和弹窗

    //JSON是一种数据格式//JSON比较像php里面的关联数组,它里面存的内容也是key和value成对存在的 </body><script type="text/jav ...

  4. JSON讲解和“弹窗”

    json定义形式{key1:value1, key2:value2, key3:value3.....} 例: title>JSON讲解</title> <script src ...

  5. Django-choices字段值对应关系（性别）-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07

    目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型 科普 Ajax 发送 GET.POST 请求的几种常见方式 用 Ajax 做一个小案例 准备工作 动手用 Aj ...

  6. Django中数据传输编码格式、ajax发送json数据、ajax发送文件、django序列化组件、ajax结合sweetalert做二次弹窗、批量增加数据

    前后端传输数据的编码格式(contentType) 提交post请求的两种方式: form表单 ajax请求 前后端传输数据的编码格式 urlencoded formdata(form表单里的) ja ...

  7. Jquary入门（添加 修改 表单元素）+ JSON+弹框

    字符串拼接 计算机语言 都是 对  数据的处理(获取/修改数据)  添加元素  除了  固定的方法添加 以外 都是   字符串拼接(拼接成固定格式即可执行). 1.表单添加元素  append() 方 ...

  8. 多功能弹窗控件layer

    开发网站的时候,如何合理运用好各种插件对开发的帮助是很大的. 免去了我们调试各种交互效果, 比如常用的弹窗.气泡.提示.加载.焦点.标签.导航.折叠等等 这里会推荐几个常用的js插件,丰富多样简单易移 ...

  9. ios项目里扒出来的json文件

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #000000 } p.p2 { margin: 0.0px 0. ...

随机推荐

  1. Java 的数组

    几乎所有程序设计语言都支持数组.在C和 C++里使用数组是非常危险的,因为那些数组只是内存块.若程 序访问自己内存块以外的数组,或者在初始化之前使用内存(属于常规编程错误),会产生不可预测的后果 (注 ...

  2. VS2008让Release配置也能调试起来~

    1.切换当前配置为Release-Win32 2.工程属性->C/C++->General->Debug Information Format 3.工程属性->C/C++-&g ...

  3. Havel-Hakimi定理（推断是否可图序列）

    给定一个非负整数序列{dn},若存在一个无向图使得图中各点的度与此序列一一相应.则称此序列可图化.进一步.若图为简单图,则称此序列可简单图化 至于能不能依据这个序列构造一个图,就须要依据Havel-H ...

  4. 【BZOJ4560】[JLoi2016]字符串覆盖 KMP+状压DP

    [BZOJ4560][JLoi2016]字符串覆盖 Description 字符串A有N个子串B1,B2,…,Bn.如果将这n个子串分别放在恰好一个它在A中出现的位置上(子串之间可以重叠)这样A中的若 ...

  5. Jupyter Notebook远程服务器配置

    首先要生成密码,打开python终端. In [1]: from IPython.lib import passwd In [2]: passwd() Enter password: Verify p ...

  6. 【Python之路】第二十四篇--爬虫

    网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟程序或者蠕 ...

  7. qmake make install

    一般的qmake生成的Makefile是没有 make install的 方法: 在.pro中做文章 比如你要安装libEbookDataBase.so*到目录 /usr/local/lib .pro ...

  8. Android Activity 生成及Activity之间传值

    Activity 是Android中重要的组件,每个Activity对应一个界面,如何生成新的Activity,如何在不同Activity传递数值呢. 一. 生成新的Activity,当然要使用Int ...

  9. PHP中Trait详解及其应用

    w PHP中Trait详解及其应用 - 开发者日常 - SegmentFaulthttps://segmentfault.com/a/1190000008009455

  10. IO流入门-第五章-FileWriter

    FileWriter基本用法和方法示例 /* java.io.Writer java.io.OutputStreamWriter 转换流(字节输出流--->字符输出流) java.io.File ...