一：前言
最近在使用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!