先看看演示吧!
看完演示动画你就知道是干啥的了,这个插件害我死了不少脑细胞,以前同样的功能我使用js原型开发需要写至少三个零碎的函数来解决,而且一不小心就忘记怎么用了,所以今天写了这个函数,将全部操作功能做了一个整合,以后只需要套用这个组件就能很爽的蹂躏定界窗了.下边是插件的代码:
(function($){
$.Dialog = function(url,name,w,h){
var top=(screen.height-h)/3;
var left=(screen.width-w)/2;
return showModalDialog(url,name,'dialogLeft:'+left+'px;dialogTop:'+top+'px;dialogWidth:'+w+'px;dialogHeight:'+h+'px;help:no;scroll:yes;status:yes;');
}
//操作定界窗
$.Cimg = function(_o){
switch(_o.typ.toLowerCase()){
case "show":
Show();
break;
case "select":
Select();
break;
default:
break;
}
//顯示
//參數:類型;需要打開的url;圖片顯示盒子的id;hidden字段的id
//$.Cimg({'typ':'show','url':'file.htm','box':'box1','hid':'id1'});
function Show(){
var Re=$.Dialog(_o.url,'ResWin',(screen.width-100),500);
try{
if(Re==null){return;}
_msg='';
for(i=0;i<Re.length;i++){
_msg+='<div style="float:left;padding:3px;"><img src="'+Re[i]+'"></div>';
}
$("#"+_o.box+"").append(_msg);
_oval=$("#"+_o.hid+"").val();
$("#"+_o.hid+"").val(Re);
}catch(e){}
}
//選中
//參數:類型;存放圖片的img對象(alt屬性作為選取對象),選完之後的css樣式
//onclick="$.Cimg({'typ':'select','img':this})"
function Select(){
if(_o.img==null){return;}
_v=$(_o.img).attr('alt');
var arr=new Array();
if(window.returnValue==null){
arr[0]=_v;
}else{
arr=window.returnValue;
_has=false;for(i=0;i<arr.length;i++){if(arr[i]==_v){_has=true;break;}}
if(_has==false){arr[arr.length]=_v;}
}
window.returnValue = arr;
$(_o.img).parent().attr('style',_o.css);
}
}
})(jQuery)
父窗口的代码
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> - </title>
<script type='text/javascript' src="../img/jquery-1.5.2.min.js"></script>
<script type='text/javascript' src="js.js"></script>
<script type='text/javascript'>
$(function(){
$('#b1').click(function(){
$.Cimg({
'typ':'show',
'url':'file.htm',
'box':'box1',
'hid':'id1'
});
})
});
</script>
</head>
<body>
<input type='button' id='b1' value='打開定界窗口'>
<div id='box1'></div><br>
<textarea id='id1' name='id1' rows='13' style='100%'></textarea>
</body>
定界窗子窗口的文件代码:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> new document </title>
<script type='text/javascript' src="../img/jquery-1.5.2.min.js"></script>
<script type='text/javascript' src="js.js"></script>
<style type='text/css'>
div{float:left;padding:3px;border:1px solid #aaa;margin:3px;}
</style>
</head>
如果要轉載本文請注明出處,免的出現版權紛爭,我不喜歡看到那種轉載了我的作品卻不注明出處的人QQ9256114
<body>
<div><img src='../@upload/folder528/@x/01_b23d6.jpg' alt='/@upload/folder528/@x/01_b23d6.jpg' onclick="$.Cimg({'typ':'select','img':this,'css':'border:1px solid blue;'})"></div>
<div><img src='../@upload/folder528/@x/01_d984e.jpg' alt='/@upload/folder528/@x/01_d984e.jpg' onclick="$.Cimg({'typ':'select','img':this,'css':'opacity:0.5;'})"></div>
<div><img src='../@upload/folder528/@x/01_9dc26.jpg' alt='/@upload/folder528/@x/01_9dc26.jpg' onclick="$.Cimg({'typ':'select','img':this,'css':'background-color:green;'})"></div>
<div><img src='../@upload/2011-01/@x/30_3511f.jpg' alt='/@upload/2011-01/@x/30_3511f.jpg' onclick="$.Cimg({'typ':'select','img':this,'css':'background-color:red;'})"></div>
<div><img src='../@upload/2011-01/@x/30_3dd4d.jpg' alt='/@upload/2011-01/@x/30_3dd4d.jpg' onclick="$.Cimg({'typ':'select','img':this})"></div>
</body>
</html>