`
caojianwei
  • 浏览: 13807 次
  • 性别: Icon_minigender_1
  • 来自: 宜昌/上海
社区版块
存档分类
最新评论

JQuery浮动层,自己随手写的一个

jQueryCSSAjaxJavaScriptJSP
阅读更多
首先是jsp页面,主要是一个按钮+2个DIV层，其中一个层是用来全窗口遮罩，另一个层是浮动出来显示数据,如下： 
<%@ page contentType="text/html;charset=UTF-8" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>产品管理</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

	[color=red]
               <script src="..../jquery.js"/>
               <script src="..../jquery.fn.customize.js/><!--自己写的jquery方法，等下呈上-->
          [/color]	

	<style type="text/css">
		.finttest{
			font-size:10px;
		}
	</style>
         
         <script type="text/javascript">
		functionUrl = "<%=functionUrl %>";
    	functionUrlParam = "<%=functionUrlParam %>";
    	$(document).ready(function(){
    		$("#floatdiv").floatdiv("fullwindow","datawindow",0.9,0.4,function(){
    			$.ajax({
		            type: "post",//使用get方法访问后台
		            dataType: "javascript",//返回文本格式的数据
		            url: "<%=context%>/product/addproduct.jsp",//要访问的后台地址
		            data: "",//要发送的数据
		            complete :function(){},//AJAX请求完成时显示提示
		            error:function(msg){alert('加载错误');},
		            success: function(msg){//msg为返回的数据，在这里做数据绑定
		            	$("#datawindow").html(msg);
	            	}
	        	});
    		});
    	});
	</script>
  </head>
  
  <body topmargin="0" leftmargin="0">
  	<div id='fullwindow'></div>
         <div id='datawindow'></div>
        <button id='floatdiv'>浮动</button>
  </body>
</html>


接着是jqeury自定义方法，如下： 
/**
 * 		   Author: caojianwei															   
 * 			 Date: 2010-07-08 15:07														   	
 * 	    UseSample: $("#ceshibutton1").floatdiv("fullceshi","ceshi",0.9,0.75,function(){}); 
 * Page Must have: <div id="fullceshi"></div><div id="ceshi"></div>						   
**/

//自定义浮动层，关闭层双击弹出层即可
jQuery.fn.floatdiv = function(fullDivID,	    //占满窗口的透明层
	        				  divID,		    //弹出层的ID
	        				  divWidthScale, 	//弹出层宽比例 0~1
	        				  divHeightScale,	//弹出层高比例 0~1
	        				  callfn){       	//弹出层完成后需要执行的函数
  		var pagewidth = $(window).width();
  		var pageheight = $(window).height();
  		
  		//弹出窗口的宽高不能超过父窗口的宽高
  		var widthScale = pagewidth*divWidthScale;
  		var heightScale = pageheight*divHeightScale;
  		
  		$("#"+divID).width(widthScale>pagewidth?pagewidth:widthScale);
  		$("#"+divID).height(heightScale>pageheight?pageheight:heightScale);
  		
  		//设置弹出窗口的宽高,及弹出的位置
  		var divwidth = $("#"+divID).width();
  		var divheight = $("#"+divID).height();
  		var divleft = (pagewidth-divwidth)/2;
  		var divtop = (pageheight-divheight)/2;
  		
  		//全屏遮罩层设置
  		function oprationFullDiv(){
  			//先使用层遮罩住全部窗口
 			$("#"+fullDivID).css("position","absolute");
 			$("#"+fullDivID).css("left",0);
 			$("#"+fullDivID).css("top",0);
 			$("#"+fullDivID).css("width",pagewidth);
 			$("#"+fullDivID).css("height",pageheight);
 			$("#"+fullDivID).css("background-color","#EAEAEA");
  			$("#"+fullDivID).show();
  			//遮罩层完毕后显示数据窗口
  			$("#"+fullDivID).fadeTo("slow",0.6,function(){
 				windowDiv();
  			});
  		}
  		
  		//窗口遮罩层设置
  		function windowDiv(){
  			$("#"+divID).css("position","absolute");
  			$("#"+divID).css("left",divleft);
  			$("#"+divID).css("top",divtop);
  			$("#"+divID).css("width",divwidth);
  			$("#"+divID).css("height",divheight);
  			$("#"+divID).css("background-color","#FFFFFF");
  			$("#"+divID).css("overflow","auto");
  			$("#"+divID).show();
  			//数据窗口显示完成,加载数据
			$("#"+divID).fadeTo("slow",1,function(){
 				if(callfn!=null){
			  		var CallParams = {};
			  		CallParams.success = callfn;
			  		$.ajax(CallParams);
	  			}
			});
  		}
  		//加载
  		$(document).ready(function(){
  			//双击浮动窗口 关闭浮动窗口
	  		$("#"+divID).dblclick(function(){
	  			$("#"+divID).fadeOut("slow",function(){
	  				$("#"+divID).hide("fast",function(){
	  					$("#"+fullDivID).hide();
	  				});
	  			});
	  		});
	  			 		
	 		//单击浮动窗口外的地方则将浮动窗口关闭
	 		$("#"+fullDivID).click(function(){
	 			$("#"+divID).fadeOut("slow",function(){
	  				$("#"+divID).hide("fast",function(){
	  					$("#"+fullDivID).hide();
	  				});
	  			});
	 		});
  		});
  		
  		//为传入符合id的元素绑定click事件
  		$(this).bind('click',function(){
  			oprationFullDiv();
  		});
  		alert('1');
	};


至于为什么要写2个div，主要是由于在使用javascript脚本动态增加一个div时无法控制这个div不被外层的div包含进去，这样这个内层的div总是被外层的div覆盖着，暂时没想到好的方法.
6
顶
4
踩
分享到：
| WEBLOGIC连接池老是被重建，找了很多地方还 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics