读<jquery 权威指南>[2]-事件
2014-01-24 18:08
549 查看
1. 事件冒泡
<style type="text/css"> body { font-size: 13px; } .divShow { line-height: 32px; height: 32px; background-color: #eee; width: 280px; padding-left: 10px; } .divShow span { padding-left: 50px; } .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 .title img { float: right; } .dialog .content { background-color: #fff; padding: 25px; height: 60px; } .dialog .content img { float: left; } .dialog .content span { float: left; padding-top: 10px; padding-left: 10px; } .dialog .bottom { text-align: right; padding: 10px 10px 10px 0px; background-color: #eee; } .mask { width: 100%; height: 100%; background-color: #000; position: absolute; top: 0px; left: 0px; filter: alpha(opacity=30); 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); } </style> <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="Images/close.gif" alt="点击可以关闭" />删除时提示 </div> <div class="content"> <img src="Images/delete.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>
html
<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(); 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(); //设置提示对话框的Top与Left }); $(".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>
相关文章推荐
- 读<jquery 权威指南>[4]-Ajax
- 读<jQuery 权威指南>[6]--实用工具函数
- 读<jquery 权威指南>[7]-性能优化与最佳实践
- 读<jquery 权威指南>[3]-动画
- 读<jQuery 权威指南>[6]--实用工具函数
- 读<jquery 权威指南>[1]-选择器及DOM操作
- 纪念互联网第一本众筹电子书<<Mycat权威指南>>获得成功
- jquery 添加<table> 再添加鼠标点击事件
- Maven学习笔记(1) 附<<Maven权威指南>>
- jQuery触发<a>标签的点击事件后URL不跳转的解决办法
- Jquery:Jquery中的事件<二>
- <Http权威指南 1,2,3>Http概述
- 读<jQuery 权威指南>[5]-插件
- jQuery练习1--给网页中所有的 <p> 元素添加 onclick 事件
- jQuery不能使用unbind解除超链接<a>的click事件的解决方法
- 移动端 jquery 长按触发移动事件 <升级版>
- jQuery触发<a>标签的点击事件无效
- Jquery<4>Jquery 事件操作
- Jquery:Jquery中的事件<一>
- [JQ权威指南]JQuery中的全局事件