jQuery easy UI messager IE6下select 框穿过层的解决方案

原创
2010/05/20 12:56
阅读数 3.3K

在使用jQuery easy UI messager 过程中有可能会碰到这种问题,之前时间脚本控件在IE6下也会出现这种情况,界面很不友好

网上有一种解决方法:

  1. jQuery.fn.activeXOverlap = function() {    
  2.   
  3.     $(this).each(function(i){   
  4.         var h   = $(this).outerHeight();   
  5.         var w   = $(this).outerWidth();   
  6.         var iframe  = ''  
  7.         $(this).prepend(iframe);   
  8.     });   
  9. }  
  10. $(function() {   
  11.     $('.myHoverClass').activeXOverlap();   
  12. });  

请注意这是事件切换的时候才会发生,但是停止拖动的时候还是会穿过层,而且这种方式本人没有测试通过,

详见:http://herr-schuessler.de/blog/overlapping-select-field-bug-in-ie6-solved-jquery-style/

下面说说解决方法:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>jQuery.html</title>
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="jquery/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="jquery/themes/icon.css">
		<script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="jquery/jquery.easyui.min.js"></script>
		<style type="text/css">
		input, select,textarea {
			padding:1px;
			margin:2px;
			font-size:11px;
		}
		</style>
		<script type="text/javascript">
		$.messager.defaults={ok:"确定",cancel:"取消"};
		function alert(msg){
			$.messager.alert('警告对话框',msg,'warning');
			fixIE6SelectZindexIssue();
		}        
		//将锁屏警告对话框拖动到select元素上测试看看效果
		function test(){
			alert($('#name').attr("value"));
		}
		//jquery easy UI messager ie6下下拉列表穿过层的解决方法
		function fixIE6SelectZindexIssue(){
			if($.browser.msie&&parseInt($.browser.version)<=6){//判断浏览器及其版本,如果是IE6及其以下版本统一这样处理
				$("select").css({visibility:"hidden"});
				$("div.panel").ready(function(){
					$("div.panel-tool-close").bind("click",function(){//当点击‘关闭’按钮时使下拉框可见
						$("select").css({visibility:"visible"});
					});
					$("a.l-btn").bind("click",function(){//当点击‘确定’按钮时使下拉框可见
						$("select").css({visibility:"visible"});
					});
				});
			}
		}
	</script>
	</head>

	<body>
	<pre>
		
		
		
		
	</pre>
		<input id="name" value="-----" style="BACKGROUND-COLOR: transparent;" >
		<select style="width:200">
			<option>BMW</option>
			<option>MSN</option>
			<option></option>
			<option></option>
		</select>
		<br>
		<button onclick="test();" value="test" style="width: 260px; heigth: 150px;">拖动警告对话框到select元素上测试</button>
	</body>
</html>

 

展开阅读全文
打赏
0
2 收藏
分享
加载中
简单点的:直接用 easyUI 的 combobox 替代 select
2011/08/05 08:52
回复
举报
更多评论
打赏
1 评论
2 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部