jquery中lhgdialog插件（一）
一：前言
最近在使用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插件（一）的更多相关文章
- jQuery中开发插件的两种方式
jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...
- jQuery中的插件的编写和使用
1,常用的jQuery插件:表单验证插件formValidator a.目前支持5大验证方式:1.inputValidator(针对input,textarea,select控件的字符长度,值范围,选 ...
- Jquery中日期插件jquery.datepick的使用
jsp的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...
- jQuery中开发插件的两种方式(附Demo)
做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQu ...
- jquery中validate插件表单验证
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- jquery中的插件EChars的使用
首先,进入EChars的官网下载页面:http://echarts.baidu.com/download.html 下载自己需要的版本. 引入jquery包和echars,进入官网的实例:htt ...
- jQuery中的each, data, 插件
一. each() $(' ').each(function (){...}) jQuery.each(collection, callback(indexInArray, valueOfEleme ...
- jQuery中的工具和插件
jQuery的工具属性 jQuery类数组操作 length属性 表示获取类数组中元素的个数 get()方法 表示获取类数组中单个元素"括号中填写该元素的索引值" index()方 ...
- Jquery中的日历插件
这个插件很简单:只需要在HTML代码中引入插件如下,CLASS名和click事件函数固定! <!doctype html> <html lang="en"> ...
随机推荐
- Linux下启动Oracle服务和监听程序步骤
Linux下启动Oracle服务和监听程序启动和关闭步骤整理如下: 1.安装oracle: 2.创建oracle系统用户: 3./home/oracle下面的.bash_profile添加几个环境变量 ...
- 设置socket接收和发送超时的一种方式
Linux环境设置Socket接收和发送超时: 须如下定义:struct timeval timeout = {3,0}; //设置发送超时setsockopt(socket,SOL_SOCKET, ...
- svn资源库url问题
今天连接svn资源库的时候一直出现 RA layer request failedsvn: Unable to connect to a repository at URL http://... sv ...
- 接口自动化测试框架Karate入门
介绍 在这篇文章中,我们将介绍一下开源的Web-API自动化测试框架--Karate Karate是基于另一个BDD测试框架Cucumber来建立的,并且共用了一些相同的思想.其中之一就是使用Gher ...
- 如何用Fiddler 拦住RestAssured发出的请求
用RestAssured 发出的请求并不能直接被fiddler 拦截,可以在初始化的时候做出如下配置: RestAssured.proxy("localhost", 8888); ...
- (vue01)vue环境搭建
腾讯,百度,网易....这么大媒体平台咋老推送这么lower的信息? 你们不缺钱啊....我这么善良的孩子都别你们带坏了 强烈鄙视马化腾 强烈鄙视李彦宏 参考地址: https://segmentfa ...
- 第一课：SVN代码管理
SVN:是一个跨平台的开源的版本控制系统.svn版本管理工具管理着随时间改变的各种数据.这些数据放置在一个中央资料档案库中.svn会备份并记录每个文件每次的修改更新变动.svn的工作流程:1.在中央库 ...
- 创建带maven的javaWeb项目
1File——Maven——maven-archtypes-webapp GroupId:表示项目组织唯一标识符 ArtifacrId:表示项目唯一标识符 例如项目名称 Version是项目版本 这三 ...
- linux启动和关闭防火墙命令
在此说一下关于启动和关闭防火墙的命令:1) 重启后生效开启: chkconfig iptables on关闭: chkconfig iptables off2) 即时生效,重启后失效开启: servi ...
- Bjarne Stroustrup语录2
一.致读者 1． 在编程序时,你是在为你针对某个问题的解决方案中的思想建立起一种具体表示.让程序的结构尽可能地直接反映这些思想: ★.如果你能把“它”看成一个独立的概念,就把它做成一个类. ...