jquery 桌面门户布局 jquery窗口

转载

云端创新者 2024-04-17 13:33:04

文章标签 jquery 桌面门户布局 jQuery CSS JavaScript HTML 文章分类 jQuery 前端开发

页面内容如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>JQuery窗口效果</title>
	<link rel="stylesheet" type="text/css" href="css/window.css">
	<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="js/window.js"></script>
  </head>
  
  <body>
  	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  	<input type="button" value="左下角显示窗口" id="leftpop">
  	<input type="button" value="屏幕中间显示窗口" id="centerpop">
  	<div class="window" id="center">
  		<div class="title">
  			<img alt="关闭" src="images/close.gif">
  			我是中间显示窗口的标题栏
  		</div>
  		<div class="content">
  			<p>我是中间显示窗口的内容区</p>
  			<p>我是中间显示窗口的内容区</p>
  			<p>我是中间显示窗口的内容区</p>
  			<p>我是中间显示窗口的内容区</p>
  			<p>我是中间显示窗口的内容区</p>
  			<p>我是中间显示窗口的内容区</p>
  			<p>我是中间显示窗口的内容区</p>
  			<p>我是中间显示窗口的内容区</p>
  		</div>
  	</div>
  	<div class="window" id="left">
  		<div class="title">
  			<img alt="关闭" src="images/close.gif">
  			我是左边显示窗口的标题栏
  		</div>
  		<div class="content">
  			我是左边显示窗口的内容区
  		</div>
  	</div>
  	<div class="window" id="right">
  		<div class="title">
  			<img alt="关闭" src="images/close.gif">
  			我是右边显示窗口的标题栏
  		</div>
  		<div class="content">
  			我是右边显示窗口的内容区
  		</div>
  	</div>
  </body>
</html>

样式如下：

.window {
	background-color:#D0DEF0;
	width:250px;
	margin: 5px;
	/**
	 * position：检索对象的定位方式。 
	 * absolute：将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。
	 *           而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
	 **/
	position: absolute;
	display: none;
}
.content {
	height: 120px;
	background-color:white;
	border: 2px solid #D0DEF0;
	padding: 2px;
	/**
	 * overflow：检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
	 * visible：不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 
	 * auto：此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 
	 * hidden：不显示超过对象尺寸的内容
	 * scroll：总是显示滚动条
	 **/
	overflow: auto;
	font-size: 14px;
}
.title {
	padding: 2px;
	padding-left: 4px;
	font-size: 14px;
	cursor: pointer;
}
.title img {
	width: 16px;
	height: 15px;
	float: right;
}

js内容如下：

$(document).ready(function(){
	//$(".title img").click(function(){
	//	$(this).parent().parent().hide("slow");
	//});
	var centerWin = $("#center").mywin({left:"center",top:"center"});
	var leftWin = $("#left").mywin({left:"left",top:"bottom"},function(){
		leftWin.slideUp("slow");
	});
	$("#centerpop").click(function(){
		//计算屏幕正中间的位置
		//var browserwidth = $(window).width();
		//var browserheight = $(window).height();
		//var cwinwidth = $("#center").width();
		//var cwinheight = $("#center").height();
		//有滚动条的情况
		//var scrollLeft = $(window).scrollLeft();
		//var scrollTop = $(window).scrollTop();
		
		//var left = scrollLeft + (browserwidth-cwinwidth)/2;
		//var top = scrollTop + (browserheight-cwinheight)/2;
		//$("#center").css("left",left).css("top",top).show("slow");
		centerWin.show("slow");
	});
	$("#leftpop").click(function(){
		leftWin.slideDown("slow");
	});
	
	var rightwin = $("#right");
	//outerWidth()：获取第一个匹配元素外部宽度（默认包括补白和边框）设置为 true 时，计算边距在内
	var cwinwidth = rightwin.outerWidth(true);
	var cwinheight = rightwin.outerHeight(true);
	var windowObj = $(window);
	//scrollLeft()：获取匹配元素相对滚动条左侧的偏移
	var scrollLeft = windowObj.scrollLeft();
	//scrollTop()：获取匹配元素相对滚动条顶部的偏移。
	var scrollTop = windowObj.scrollTop();
	var browserwidth = windowObj.width();
	var browserheight = windowObj.height();
	//fadeOut()：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
	rightwin.mywin({left:"right",top:"bottom"},function(){
		rightwin.hide();
	},{left:scrollLeft+browserwidth-cwinwidth,top:scrollTop+browserheight-cwinheight}).fadeOut(15000).dequeue();
	
});

//JQuery 插件
/**
 *@param position包含两个属性(目标位置)：一个是left,一个是right
 *@param hidefunc：表示窗口隐藏的方法
 *@param initPos：初始窗口位置
 **/
$.fn.mywin = function(position,hidefunc,initPos){
	if(position && position instanceof Object){
		var positionLeft = position.left;
		var positionTop = position.top;
		
		var windowObj = $(window);
		var currentwin = this;
		
		//var cwinwidth = currentwin.width();
		var cwinwidth = currentwin.outerWidth(true);
		//var cwinheight = currentwin.height();
		var cwinheight = currentwin.outerHeight(true);
		
		var scrollLeft;
		var scrollTop;
		var browserwidth;
		var browserheight;
		
		var left;
		var top;
		//得到浏览器对象本身的一些信息		
		function getBrowserDim(){
			scrollLeft = windowObj.scrollLeft();
			scrollTop = windowObj.scrollTop();
			browserwidth = windowObj.width();
			browserheight = windowObj.height();			
		}
		//计算目标对象的left值
		function callLeft(positionLeft,scrollLeft,browserwidth,cwinwidth){
			if(positionLeft && typeof positionLeft == "string"){
			if(positionLeft == "center"){
				left = scrollLeft + (browserwidth-cwinwidth)/2;
			}else if(positionLeft == "left"){
				left = scrollLeft;
			}else if(positionLeft == "right"){
				left = scrollLeft + browserwidth - cwinwidth;
			}else {
				left = scrollLeft + (browserwidth-cwinwidth)/2;
			}
			}else if(typeof positionLeft == "number"){
				left = positionLeft;
			}else {
				left = 0;
			}
		}
		//计算目标对象的top值
		function callTop(positionTop,scrollTop,browserheight,cwinheight){
			if(positionTop && typeof positionTop == "string"){
			if(positionTop == "center"){
				top = scrollTop + (browserheight-cwinheight)/2;
			}else if(positionTop == "top"){
				top = scrollTop;
			}else if(positionTop == "bottom"){
				top = scrollTop + browserheight - cwinheight;
			} else {
				top = scrollTop + (browserheight-cwinheight)/2;
			}
			}else if(typeof positionTop == "number"){
				top = positionTop;
			}else {
				top = 0;
			}
		}
		//设置目标对象到目标位置的变化情况
		function getMoveWin(){
			callLeft(currentwin.data("positionLeft"),scrollLeft,browserwidth,cwinwidth);
			callTop(currentwin.data("positionTop"),scrollTop,browserheight,cwinheight);
			//currentwin.css("left",left).css("top",top);
			currentwin.animate({
				left:left,
				top: top
			},600);
		}
		
		var scrollTimeout;
		$(window).scroll(function(){
			if(!currentwin.is(":visible")){
				return;
			}
			clearTimeout(scrollTimeout);
			scrollTimeout = setTimeout(function(){
				getBrowserDim();
				getMoveWin();
			},300);
		});
		$(window).resize(function(){
			if(!currentwin.is(":visible")){
				return;
			}
			getBrowserDim();
			getMoveWin();
		});
		//注册窗体的关闭图标的点击事件
		currentwin.children(".title").children("img").click(function(){
			if(hidefunc){
				hidefunc();
			}else{
				currentwin.hide("slow");
			}
		});
		
		if(initPos && initPos instanceof Object){
			var initLeft = initPos.left;
			var initTop = initPos.top;
			if(initLeft && typeof initLeft == "number"){
				currentwin.css("left",initLeft);
			}else{
				currentwin.css("left",0);
			}
			if(initTop && typeof initTop == "number"){
				currentwin.css("top",initLeft);
			}else{
				currentwin.css("top",0);
			}
			currentwin.show();
		}
		currentwin.data("positionLeft",positionLeft);
		currentwin.data("positionTop",positionTop);
		getBrowserDim();
		getMoveWin();
		//callLeft(positionLeft,scrollLeft,browserwidth,cwinwidth);
		//callTop(positionTop,scrollTop,browserheight,cwinheight);
		//currentwin.css("left",left).css("top",top);
	}
	//返回当前对象
	return this;
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。