解决DIV在IE下被下拉列表select穿透的问题(二)

最新推荐文章于 2021-06-10 15:44:09 发布

javalfans

最新推荐文章于 2021-06-10 15:44:09 发布

阅读量376

点赞数

分类专栏： jQuery 文章标签： IE jQuery JavaScript HTML ViewUI

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

有的朋友可能会认为上面那个插件用起来还有点复杂，而且不能够被拖动。jQuery实现的这个插件很N，它就是jquery.bgiframe。

这个插件是下载地址是：http://plugins.jquery.com/project/bgiframe。

关键代码如下：

$('#div1').bgiframe;

以下是示例代码：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jquery.bgiframe()示例</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/plugin/jquery.ppdrag.js"></script>
		<script type="text/javascript" src="js/plugin/jquery.bgiframe.js"></script>		
		<script type="text/javascript">
			$(document).ready(function(){
				$('#showMore0').each(function(){
					var moreObj = $('#more0').bgiframe().ppdrag();
					$(this).bind('click', function(e){
						moreObj.show();
					});
					$('#btnClose0').click(function(){
						moreObj.hide();
					});
				});
			});
		</script>
	</head>
	<body>
		<br/>
			<li>1. 防select穿透</li>
			<li>2. 可拖动</li>
		<hr/>
		<div style="POSITION:absolute;left:200px;">
			<span id="showMore0">测试</span>
			<div id="more0" 
			style="display:none;POSITION:absolute;Z-INDEX:1000;background:gray;border:2px;width:200px;TOP: 18px;LEFT: 0px;border:2px solid black;">
				<div>
				<A style="CURSOR: hand" id="btnClose0" style="float:right;">［关闭］</a><br/>
				效果不错吧!
				</div>
			</div>
			<br>
			<select></select>
		</div>
	</body>
</html>

下面是运行之后的效果图，不过要想看到拖动效果，你还得亲手运行一下试了才知道好不好用了。

jQuery_bgiframe