Program的coding记录篇---Plugins--dialog弹窗

LHGDIOLOG

主要以iframe方式加载单独页面为主的弹出窗口，由其适用于后台管理和webOS类项目使用，独立的内容页更方便管理，页面的也不易受其它页面的影响，而且内容页可以是静态或动态的任何一种文件。

这款插件的使用的是JQuery1.7版本，提供了很多丰富的功能以外，还能很好的兼容IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。虽说目前不太可能会有IE6这样低版本的存在，对于其在IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景，这证明了这款插件的独到之处。

我是用了这款插件来做到用户头像的一个显示，以及班级选择弹出窗口，在弹出窗口选择班级信息提交到新增页面。其还可以实现很多其他值得拓展的功能，这就有待大家自己去使用看看了。

显示头像

在开始进入正题之前，先来说明一下这款组件的文件引入的细则吧。这款插件前面也有提到是基于JQuery的，所以引入其组件js前必须先引入JQuery（1.7版本），接着引入组件的min版本也就是压缩版本js。

self=true&skin=iblack -- 在djs引入中声明在当前页面使用的皮肤类型。

<script type="text/javascript" src="../jquery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../lhgdialog/lhgdialog.min.js?self=true&skin=iblack"></script>

其实目前的很多网站显示头像的方式不会采用弹窗的形式的，完全可以通过写一个Div，Div之下包含各种想要详细展示的信息，设置一个display：none属性，再通过css/js来进行进一步的渲染操作即可。但既然这个弹窗也可以显示头像，我们不妨来试试。

<script>
	function showPic(filePath){//显示图片
	   if(filePath==''){
		   alert("用户头像不存在");
		   return;
	   }
	   $.dialog({
	     title: '查询图片',
	     width: '350px',
	     height: '300px',
	     lock:true,//中断弹窗以外的交互
	     content: '<img src="/headimg/'+ filePath +'" />'//显示内容
	   });
	}
</script>

父子弹窗数据传输

在父页面中弹出子窗口，子窗口中选择或写入的数据传输到父窗口中。在学生新增页面选择班级需要从弹出窗口进行选择，小窗口是一个班级信息列表，通过radio选中列表一行的数据确认后将信息写入到父页面。

//父页面
<script type="text/javascript">
	var dialog;//全局变量，子窗口可以通过parent访问该域下的方法。
	function openDialog(){//打开弹出窗口
	   dialog = $.dialog({
	     title: '选择一个班级',
	     width: '650px',
	     height: '440px',
	     content: 'url:/class_slist.do'
	   });
	}
	//result格式: 班级ID,班级名称
	function closeDialog(result){//关闭窗口
	   alert(result);
	   var arr = result.split(",");
	   $("input[name=classId]").val(arr[0]);
	   $("input[name=classname]").val(arr[1]); 
	   dialog.close();//关闭窗口
	}
</script>

//弹窗页面
<script>
	function confirm(){
		var objs = ${"input[name=select]:checked"};//input中name为select的状态为被选中的集合
		if(objs.length==0){
			alert("请选择班级");
		}else{
			parent.closeDialog(objs[0].value);//使用父页面的方法
		}
	}
</script>