读书笔记–删除数据时的提示效果在项目中的应用

需求分析:

(1)当用户单击删除按钮时,整个页面背景类似于关机效果,“删除”提示框突出显示,用户可以选“关闭”按钮,或者单击“确定”或“取消”操作。

(2)删除提示框一直居中显示,不论页面带小发生如何变化

(3)如果对某条记录打钩,当用户单击提示框中的“确定”按钮时,将在页面中删除该条记录,同时关闭提示框,页面背景恢复正常

功能实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link type="text/css" href="css/lianxi.css" rel="stylesheet">
		<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
		<script type="text/javascript">
		  $(function(){
		  	$("#button1").click(function(){
		  		//注册删除按钮单击事件
		  		$(".mask").show();
		  		showDialog();//显示提示对话框的top与left
		  		$(".dialog").show();
		  	})
//		  	根据当前页面与滚动条位置,设置提示对话框的top与left
            function showDialog(){
            	var objW=$(window);//当前窗口
            	var objC=$(".dialog");//对话框
            	var brsW=objW.width();
            	var brsH=objW.height();
            	var sclL=objW.scrollLeft();//scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度
            	var sclT=objW.scrollTop();
            	var curW=objC.width();
            	var curH=objC.height();
            	//计算对话框居中时的左边距
            	var left=sclL+(brsW-curW)/2;
            	//计算对话框居中时的上边距
            	var top=sclT+(brsH-curH)/2;
            	//设置对话框在页面中的位置
            	objC.css({"left":left,"top":top});
            }
            $(window).resize(function(){
            	//页面窗口大小改变事件
            	if(!$(".dialog").is(":visible")){
            		return;
            	}
            	showDialog();
            });
            $(".title img").click(function(){//注册关闭图片点击事件
            	$(".dialog").hide();
            	$(".mask").hide();
            })
            $("#button3").click(function(){//注册取消按钮点击事件
            	$(".dialog").hide();
            	$(".mask").hide();
            })
            $("#button2").click(function(){//注册确定按钮点击事件
            	$(".dialog").hide();
            	$(".mask").hide();
            	if($("input:checked").length!=0){
            		//如果选择了删除行
            		$(".divShow").remove();//删除某行数据
            	}
            })
		  })
		</script>
	</head>
	<body>
	  <div class="divShow">
	  	<input id="checkbox1" type="checkbox" />
	  	<a href="#">这是一条可删除的记录</a>
        <span>
        	<input id="button1" type="button" value="删除" class="btn"/>
        </span>
	  </div>
	  <div class="mask"></div>
	  <div class="dialog">
	  	<div class="title">
	  		<img src="img/IMG_20161117_160318.jpg.JPG" alt="点击可以关闭" />删除时提示
	  	</div>
	  	<div class="content">
	  		<img src="img/IMG_20161006_151540.jpg.JPG" alt="" />
	  		<span>您真的要删除该条记录吗?</span>
	  	</div>
	  	<div class="bottom">
	  		<input id="button2" type="button" value="确定" class="btn"/>  
	  		<input id="button3" type="button" value="取消" class="btn"/>
	  	</div>
	  </div>
	</body>
</html>

CSS

body{
	font-size: 13px;
}
.title img{
	width: 30px;
	height: px;
	float: right;
	margin-top: -1px;
}
.content img{
	width: 30px;
	height: 30px;
	float: left;
}

.divShow{
	line-height: 32px;
	height: 32px;
	background-color: #eee;
    width: 280px;
    padding-left: 10px;
}
.divShow span{
	margin-left: 30px;
}
.divShow a{
	text-decoration: none;
}
.dialog{
	width: 360px;
	border: solid 5px #666;
	position: absolute;
	display: none;
	z-index: 101;
}
.dialog .title{
	background-color: #fbaf15;
	padding: 10px;
	color: #fff;
	font-weight: bold;
}
.dialog .content{
	background-color: #fff;
	padding: 25px;
	height: 60px;
}
.dialog .content span{
	float: left;
	padding-top: 10px;
	padding-left: 10px;
}
.dialog .bottom{
	text-align: right;
	padding: 10px 10px 10px 0;
	background-color: #eee;
}
.mask{
	width: 100%;
	height: 100%;
	/*background-color: grey;*/
	position: absolute;
	top: 0;
	left: 0;
	/*filter: Alpha(Opacity="30");*/
	background-color: rgba(128,123,123,0.5);
	display: none;
	z-index: 100;
}
.btn{
	border: #666 1px solid;
	padding: 2px;
	width: 65px;
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ece9d8);
}

界面效果:

重点代码分析:

(1)在要求删除提示框一直居中显示,不论页面带小发生如何变化时,要根据窗口的长与宽和滚动条的Top和Left值及对话框自身的长与宽,计算出使提示对话框始终居中的left和top变量值,通过这个变量值来设置对话框的位置

function showDialog(){
            	var objW=$(window);//当前窗口
            	var objC=$(".dialog");//对话框
            	var brsW=objW.width();
            	var brsH=objW.height();
            	var sclL=objW.scrollLeft();//scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度
            	var sclT=objW.scrollTop();
            	var curW=objC.width();
            	var curH=objC.height();
            	//计算对话框居中时的左边距
            	var left=sclL+(brsW-curW)/2;
            	//计算对话框居中时的上边距
            	var top=sclT+(brsH-curH)/2;
            	//设置对话框在页面中的位置
            	objC.css({"left":left,"top":top});
            }

接下来说明如何计算:

如果对话框的原点与页面的原点完全重合,即都在B点,对话框则居中,那么,对话框的坐标,实际上就是A点的位置,它的left值为页面的width值减掉对话框的width值后除以2,再加上滚动条的left值,即

var left=sclL+(brsW-curW)/2;

同理,top值为页面的height值减去对话框的height值后除以2,再加上滚动条的top值,即

var top=sclT+(brsH-curH)/2;

除了这种方法,也可以使用CSS使其垂直居中,这里就不赘述。

(2)关于背景色的透明度:

在本例中也可以用

background-color: grey;

filter: Alpha(Opacity="30");

但是要注意这个是在ie4.0+有效,否则不能起到透明度的作用。


摘自《jQuery权威指南》

IT文库 » 读书笔记–删除数据时的提示效果在项目中的应用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址