一：前言

　　　　　最近在使用jquery的控件，其实以前也写但是突然之间遇到了需要从弹出窗口传值到父窗口，突然觉得这种传值的方式其实也是需要javascript的基础的，但是我自己还没有去真正的做过，所以还是先记载下吧。

　　二：内容　　

　　　　先说说有关lhgdialog.js和lhgcore.lhgdialog.min.js、lhgdialog.min.js

　　　　lhgdialog.min.js：是lhgdialog.js的压缩版，所谓压缩版就是将javascript的代码进行去空格、换行、去注解、简化不对外开放的变量名称等等手段达到不修改原代码的功能而减少文件的大小。所以在调试阶段使用压缩版，而在正式版部署时使用压缩版。

　　　　lhgcore.lhgdialog.min.js:在导入js时需要先导入该js,因为lhgdialog.js里面有用到该js中的代码，如果你的框架中有jquery.js那么可以不导入lhgcore.lhgdialog.min.js，我先说说我自己用的效果，我在网页中导入了lhgcore.lhgdialog.min.js和lhgdialog.js，效果是弹出的窗体无法改变样式就是窗体颜色，但是我导入jquery.js和lhgdialog.js就可以改变样式，这可能就是兼容性问题

窗口lhgdialog.min.js文件的url参数
参数形式为：<script type="text/javascript" src="lhgdialog.min.js?self=true&skin=chrome"></script>
self：指定弹出窗口的页面
类型：String
默认：'false'
说明：此参数只用在框架页面中，如果不写此参数或值为false时则窗口跨框架弹出在框架最顶层页面，如果值为true则不跨框架，而在当前面页弹出。
skin：多皮肤共享CSS文件名
类型：String
默认：'default'
说明：不写此参数则值为default。如果你想在同一页面使用不同皮肤的窗口，此处的值就为多皮肤共存的CSS的文件名
url参数不需要设定的就可以不写，不写时就使用默认值。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="Content-type" content="text/html;charset=GB2312" >

            <script type="text/javascript" src="jquery-1.9.1.js"></script>

            <script type="text/javascript" src="lhgdialog.js?self=true&skin=igreen"></script>

            <script type="text/javascript">

            $(document).ready(function(){

            $(".printbutton").bind("click",function(){

                $.dialog({title:'第一次lhgdialog.js的测试！！！'});

            });

            });

            </script>

        </meta>

    </head>

    <body>

        <input type="button" value="测试" class="printbutton">

    </body>

</html>

　　　先上js代码看看

$("#chooseGoods").click(function(){

                var arrs = new Array();

                $("input[class='xh']").each(function(){

                    arrs.push($(this).val());

                });

                $.dialog({

                    title:"选择商品",data:{"arrs":arrs},ok:function(){

                        var result = "";

                        var arrays = null;

                        var count = 0;

                        $("input[type='checkbox']:checked",this.content.document).each(function(index){

                            if($(this).attr("id") != 'checkAll')

                            count++;

                        });

                        if(count == 0){

                            $.dialog.alert('没有选中记录，请选择',function(){},$dialogParent());

                            return false;

                        }

                        $("input[type='checkbox']:checked",this.content.document).each(function(index){

                            //动态给页面赋值

                            if($(this).attr("id") != 'checkAll'){

                               　　 result =  $(this).attr("returnvalue");//找到父窗口中的这个returnvalue

                              　　  arrays = result.split("##");

　　　　　　　　　　　　　　　　　　　　　　//$(this).parent()指td,$(this).parent().parent()指的就是tr,这里找得就是这一行的第三列

　　　　　　　　　　　　　　　　　　　　　　var jqmc=$(this).parent().parent().find("td:eq(3)").text();

                　　　　　　　　　　　　var a = $.grep(arrs,function(n,i){

　　　　　　　　　　　　　　　　　　　　　　return n==arrays[0];//返回值相等的结果

　　　　　　　　　　});

                                if($.type(a)=='undefined' || a==''){

                                    addsj(arrays[0],arrays[1],arrays[2],arrays[3],jqmc,arrays[5],arrays[6]);

                                }

                            }

                        });

                    },

                    content: "url:${base }/goods/goods_checkList.action",

                    width: "1000px",height: "500px",

                    lock:true,

                    parent:$dialogParent()

                });

            });

        });

grep的用法可以看如下：

http://www.jquery001.com/jquery-grep-function.html；

http://www.css88.com/archives/2472的介绍

在父窗口中显示有段这样的js用来判断已经选择的数据（比如说当你选了一次，发现选少了或者选错了时，再点一次的时候父窗口需要把你已经选择的选中）

jquery属性介绍：http://blog.csdn.net/mayanling0113/article/details/7403149

    //页面加载初始化

        $(document).ready(function () {

            var api = frameElement.api;//这个事获取界面的对象

            if(api.data.arrs!=null){//获取子窗口的值

                for(var i=0;i<api.data.arrs.length;i++){

                    $("input[type='checkbox'][value='"+api.data.arrs[i]+"']").attr("checked", true);

                }

            }

        });
<td align="center"><input type="checkbox" value="${goods.Id}"  id="${goods.zfId}" return_value="${goods.Id}##${goods.Bh}##${goods.mc}##${goods.lx}##${goods.sl}##${goods.jg}##${goods.dz}" name="checkBoxname" /></td>

小知识点：

　　有关parent和parents的区别

　　　　parent：可以说是当前对象的父元素。比如说<td><input type="text" name="输入"></td>，在这里：$(:text).parent()的父元素就是<td></td>

　　　　parents:可以说就是你的家族只要是你这一代的祖辈都是，可以看出找这些就是看该元素在那个包围圈内。

　　　　这里有个链接可以直接去学习下，将的很详细了。我自己也是试验了一遍，觉得很好：

　　　　http://blog.csdn.net/cui_angel/article/details/7903704

三：总结

　　最近是自己在试着来试验这些前端的框架。觉得动手做还是不一样，有很多问题自己做了才知道的。努力！本来说要离开的，结果经理又让我留下来了，我自己也不知道是留是走，其实很矛盾的。因为我现在还是觉得可以学到很多东西的。知识在一点点的增长，现在才觉得自己还是经验不够啊。所以我自己可能还是决定。。。待定状态啊。

　　开始行动就是从这个弹出框开始试验，决定用spring mvc来搭建框架做，用MyBatis来连接数据库。一步步来试验了。准备开始。Go!

　　　　　　　　

jquery中lhgdialog插件（一）的更多相关文章

  1. jQuery中开发插件的两种方式

    jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

  2. jQuery中的插件的编写和使用

    1,常用的jQuery插件:表单验证插件formValidator a.目前支持5大验证方式:1.inputValidator(针对input,textarea,select控件的字符长度,值范围,选 ...

  3. Jquery中日期插件jquery.datepick的使用

    jsp的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...

  4. jQuery中开发插件的两种方式(附Demo)

    做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQu ...

  5. jquery中validate插件表单验证

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  6. jquery中的插件EChars的使用

    首先,进入EChars的官网下载页面:http://echarts.baidu.com/download.html    下载自己需要的版本. 引入jquery包和echars,进入官网的实例:htt ...

  7. jQuery中的each, data, 插件

    一.  each() $(' ').each(function (){...}) jQuery.each(collection, callback(indexInArray, valueOfEleme ...

  8. jQuery中的工具和插件

    jQuery的工具属性 jQuery类数组操作 length属性 表示获取类数组中元素的个数 get()方法 表示获取类数组中单个元素"括号中填写该元素的索引值" index()方 ...

  9. Jquery中的日历插件

    这个插件很简单:只需要在HTML代码中引入插件如下,CLASS名和click事件函数固定! <!doctype html> <html lang="en"> ...

随机推荐

  1. 在WPF中创建可换肤的用户界面

    原文:在WPF中创建可换肤的用户界面 在WPF中创建可换肤的用户界面.                                                                  ...

  2. 读取hbase数据到mysql

    先写一个自己的MyRecordWriter类 extends RecordWriter package calllog; import java.io.IOException; import java ...

  3. Sql Server 2008 R2数据库中插入中文变成了问号

            通过Insert语句插入数据库中,结果中文都变成了乱码.原因是在数据库中有一个属性需要设置,可以通过Sql server manager studio来进行设置,也要可以通过代码来设置 ...

  4. React获取数据，假如为数组，使用map出现的问题

    在平时做项目的时候,使用到了redux, 如果获取服务器端的数据,例如返回一个  data = [1,2,3,4]data.map(item => item*2) , 这样使用的话如果数据正常获 ...

  5. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  6. Tensorflowonspark安装

    1.实验环境 Centos7+Python3.6+Java8+Hadoop2.6+Spark2.3+Tensorflow1.10.0 2.Tensorflow安装 最简单的方式:pip install ...

  7. Sublime Text 3配置 Python3 开发环境

    来自 https://www.cnblogs.com/zhangqinwei/p/6886600.html Sublime Text作为一款支持多种编程语言的文本编辑神器,深受广大开发者的喜爱.通过简 ...

  8. React远程服务

    http://web1.dev5.net:3002/cloud/start?server=exf2&name=zhangxiaocong http://web1.dev5.net:3002/c ...

  9. Spring Security 5.0.x 参考手册 【翻译自官方GIT-2018.06.12】

    源码请移步至:https://github.com/aquariuspj/spring-security/tree/translator/docs/manual/src/docs/asciidoc 版 ...

  10. HDU 4725 The Shortest Path in Nya Graph（最短路径）（2013 ACM/ICPC Asia Regional Online ―― Warmup2）

    Description This is a very easy problem, your task is just calculate el camino mas corto en un grafi ...