请jquery高手帮忙完善这个插件,我已经写到黔驴技穷了

www_7di_net 2011-05-21 01:27:45
请jquery高手帮忙完善这个插件,我已经写到黔驴技穷了
在我的心目中这个插件应该更灵活才对,至少在选择图片的时候不需要用onclick,还有很多地方期待更好的解决方案,期待中...
(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;');

	}



	//定界窗要訪問的url,圖片顯示盒子的id,hidden對象的id

	//全部都在操作小圖,如果需要存儲大圖則需要用PHP替換存儲即可

	$.Cimg = function(_o){

		if(_o.typ==null){_o.typ='';}

		switch(_o.typ.toLowerCase()){

		case "show":

			Show();

			break;

		case "select":

			Select();

			break;

		case "del":

			Del();

			break;

		default:

			Default();

			break;

		}



		//將hidden內的初始值放入box

		//$.Cimg({'hid':'id1','box':'box1'});

		function Default(){

			if(!document.getElementById(''+_o.hid+'') || !document.getElementById(''+_o.box+'')){return;}



			_val=$("#"+_o.hid+"").val();

			if(_val==null){return;}

			

			var Arr=new Array();Arr=_val.split("|");_msg='';

			for(i=0;i<Arr.length;i++){

				if(Arr[i].length){

					_id='d'+Math.random(10);_id=_id.replace(".","");

					_msg+='<div class="pitm"><img src="'+Arr[i]+'"><a class="icn icn-1 clos" id="'+_id+'" onclick="$.Cimg({\'typ\':\'del\',\'obj\':\''+_id+'\',\'box\':\''+_o.box+'\',\'hid\':\''+_o.hid+'\'})"> </a></div>';

				}

			}

			$("#"+_o.box+"").empty().append(_msg);

		}



		//顯示(@x小圖)

		//參數:類型;需要打開的url;圖片顯示盒子的id;hidden字段的id

		//$.Cimg({'typ':'show','url':'file.htm','box':'box1','hid':'id1'});

		function Show(){

			if(!document.getElementById(''+_o.hid+'')){alert('對象不存在,可能是參數設置有誤,請檢查hid的參數值1!');return;}

			if(!document.getElementById(''+_o.box+'')){alert('對象不存在,可能是參數設置有誤,請檢查box的參數值!');return;}



			var Re=$.Dialog(_o.url,'ResWin',(screen.width-100),500);

			try{

				if(Re==null){return;}_msg='';

				_val=$("#"+_o.hid+"").val();_val=_val.replace(/\,/g,"|");if(!_val.length){_val='|';}

				for(i=0;i<Re.length;i++){

					if(_val.indexOf(''+Re[i])<0){

						_val+=Re[i]+'|';

					}

				}

				var Arr=new Array();Arr=_val.split("|");

				for(i=0;i<Arr.length;i++){

					if(Arr[i].length){

						_id='d'+Math.random(10);_id=_id.replace(".","");

						_msg+='<div class="pitm"><img src="'+Arr[i]+'"><a class="icn icn-1 clos" id="'+_id+'" onclick="$.Cimg({\'typ\':\'del\',\'obj\':\''+_id+'\',\'box\':\''+_o.box+'\',\'hid\':\''+_o.hid+'\'})"> </a></div>';

					}

				}

				$("#"+_o.box+"").empty().append(_msg);

				$("#"+_o.hid+"").val(_val);

			}catch(e){}

		}



		//選中(@x小圖)

		//參數:類型;存放圖片的img對象(alt屬性作為選取對象),選完之後的css樣式

		//onclick="$.Cimg({'typ':'select','obj':this,'css':'border:1px solid blue;'})"

		function Select(){

			if(_o.obj==null){return;}

			_v=$(_o.obj).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.obj).parent().attr('style',_o.css);

		}



		//刪除(@x小圖)

		//私有函數

		function Del(){

			if(_o.obj==null){return;}

			_img=$('#'+_o.obj).parent().children('img').attr('src');

			_val=$("#"+_o.hid+"").val();

			_val=_val.replace("|"+_img+"|","|");

			$("#"+_o.hid+"").val(_val);

			$('#'+_o.obj).parent().remove();

		}

	}

})(jQuery)



$(function(){





	$.Cimg({'hid':'id1','box':'box1'});

	//點擊打開定界窗

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

		$.Cimg({

			'typ':'show',

			'url':'file.htm',

			'box':'box1',

			'hid':'id1'

		});

	})



});


图片演示在:http://hi.baidu.com/see7di/blog/item/02e4c9b4479deb648ad4b242.html
完整的demo代码在:https://docs.google.com/leaf?id=0B4Do5svEEBvnMjBlYzJmNTQtMzM3YS00ODkzLWJlYmItNzk5NGIxYTBlOTlk&hl=zh_CN
大家可以直接在这里下载demo示例
...全文
94 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
www_7di_net 2011-05-23
  • 打赏
  • 举报
 回复
我解決了
既然沒人能夠提出更好的建議,那麼我只好結貼了.
以下是我的解決方案,已經不需要在模態窗口中用onclick了.
(function($){





	//定界窗要訪問的url,圖片顯示盒子的id,hidden對象的id

	//全部都在操作小圖,如果需要存儲大圖則需要用PHP替換存儲即可

	$.Cimg = function(_o){

		if(_o.typ==null){_o.typ='';}

		switch(_o.typ.toLowerCase()){

		case "show":

			Show();

			break;

		case "select":

			Select();

			break;

		case "del":

			Del();

			break;

		default:

			Default();

			break;

		}



		//將hidden內的初始值放入box

		//$.Cimg({'hid':'id1','box':'box1'});

		function Default(){

			if(!document.getElementById(''+_o.hid+'') || !document.getElementById(''+_o.box+'')){return;}



			_val=$("#"+_o.hid+"").val();

			if(_val==null){return;}

			

			var Arr=new Array();Arr=_val.split("|");_msg='';

			for(i=0;i<Arr.length;i++){

				if(Arr[i].length){

					_id='d'+Math.random(10);_id=_id.replace(".","");

					_msg+='<div class="pitm"><img src="'+Arr[i]+'"><a class="icn icn-1 clos" id="'+_id+'" onclick="$.Cimg({\'typ\':\'del\',\'obj\':\''+_id+'\',\'box\':\''+_o.box+'\',\'hid\':\''+_o.hid+'\'})"> </a></div>';

				}

			}

			$("#"+_o.box+"").empty().append(_msg);

		}



		//顯示(@x小圖)

		//參數:類型;需要打開的url;圖片顯示盒子的id;hidden字段的id

		//$.Cimg({'typ':'show','url':'file.htm','box':'box1','hid':'id1'});

		function Show(){

			if(!document.getElementById(''+_o.hid+'')){alert('對象不存在,可能是參數設置有誤,請檢查hid的參數值1!');return;}

			if(!document.getElementById(''+_o.box+'')){alert('對象不存在,可能是參數設置有誤,請檢查box的參數值!');return;}



			var _h=(screen.height-200),_w=(screen.width-100);

			_o.nam=showModalDialog(_o.url,window,'dialogLeft:40px;dialogTop:50px;dialogWidth:'+_w+'px;dialogHeight:'+_h+'px;help:no;scroll:yes;status:yes;');

			try{

				if(_o.nam==null){return;}_msg='';

				_val=$("#"+_o.hid+"").val();_val=_val.replace(/\,/g,"|");if(!_val.length){_val='|';}

				for(i=0;i<_o.nam.length;i++){

					if(_val.indexOf(''+_o.nam[i])<0){

						_val+=_o.nam[i]+'|';

					}

				}

				var Arr=new Array();Arr=_val.split("|");

				for(i=0;i<Arr.length;i++){

					if(Arr[i].length){

						_id='d'+Math.random(10);_id=_id.replace(".","");

						_msg+='<div class="pitm"><img src="'+Arr[i]+'"><a class="icn icn-1 clos" id="'+_id+'" onclick="$.Cimg({\'typ\':\'del\',\'obj\':\''+_id+'\',\'box\':\''+_o.box+'\',\'hid\':\''+_o.hid+'\'})"> </a></div>';

					}

				}

				$("#"+_o.box+"").empty().append(_msg);

				$("#"+_o.hid+"").val(_val);

			}catch(e){}

		}



		//選中(@x小圖)

		//參數:類型;存放圖片的img對象(alt屬性作為選取對象),選完之後的css樣式

		//onclick="$.Cimg({'typ':'select','obj':this,'css':'border:1px solid blue;'})"

		function Select(){

			if(_o.obj==null){return;}

			_v=$(_o.obj).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.obj).parent().attr('style',_o.css);

		}



		//刪除(@x小圖)

		//私有函數

		function Del(){

			if(_o.obj==null){return;}

			_img=$('#'+_o.obj).parent().children('img').attr('src');

			_val=$("#"+_o.hid+"").val();

			_val=_val.replace("|"+_img+"|","|");

			$("#"+_o.hid+"").val(_val);

			$('#'+_o.obj).parent().remove();

		}

	}

})(jQuery)



$(function(){



	//唯一標識

	var Wname = 'Re';

	//初始顯示

	$.Cimg({'hid':'id1','box':'box1'});

	//添加圖片

	$("#imgbox img",window.Wname).click(function(){

		$.Cimg({'typ':'select','obj':this,'css':'border:1px solid blue;'})

	})

	//打開模態窗

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

		$.Cimg({

			'typ':'show',

			'url':'file.htm',

			'nam':Wname,

			'box':'box1',

			'hid':'id1'

		});

	})



});
www_7di_net 2011-05-22
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 javajsjqueryajax 的回复:]

看了还是不懂啥意思
[/Quote]
请问哪里不懂呢?
诸葛光亮 2011-05-21
  • 打赏
  • 举报
 回复
看了还是不懂啥意思
诸葛光亮 2011-05-21
  • 打赏
  • 举报
 回复
难道这就是开源嘛？
jquery.qrcode.min.js---二维码的jquery插件
jquery.qrcode.min.js 二维码的jquery插件
实现页码可滚动的jQuery分页插件jPaginate 程序源码
jPaginate是一款基于jQuery的分页插件，这款jQuery分页插件有一个特点，就是随着鼠标点击页码，页码会向前或向后滚动，效果非常不错。而且，这款jQuery分页插件提供了多种样式风格，你也可以自己利用CSS来定义不同的...
jQuery矢量SVG地图插件JVectorMap源码程序
JVectorMap是一款基于jQuery的矢量地图插件，它是基于SVG结构的，和其他jQuery地图插件不同的是，jVectorMap是矢量地图。同样支持地图缩放和地图平面移动等相应的功能。由于JVectorMap是基于jQuery的，所以支持大...
jquery.js 工具文件
jquery.js 工具文件
jquery-form.js 源码
异步提交表单和上传文件jquery-form.js
JavaScript

87,907

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章