`
清风夜影寒
  • 浏览: 150931 次
  • 性别: Icon_minigender_1
  • 来自: 山东
社区版块
存档分类
最新评论

不会被下边select遮挡的日历控件 日历控件被select遮挡

阅读更多

关键字: 日历控件 被select遮挡  不被遮挡

      如果网页上弹出的日历控件和下拉选单重叠时,在IE6会看到下拉选框总是把浮动区块覆盖住,无论怎么调整 z-index 都是没用的。下面为大家介绍一种不会被下拉选单遮挡的日历控件。 (日历控件请在下面下载)


一、发生情况:

二、在这种情况下日历控件展开式会被下部的  城市 (select类型) 遮挡一部分

效果如下图:



三、我们需要的最终效果。

日历控件用法:

1.引入rl.js

<script src="js/rl.js" language="javascript" type="text/javascript"></script>

 
2.点击文本框出来日历选择层:

日期:<input type="text" id="date" onClick="SelectDate(this.name)" name="date"/>

 

3.控件引入之后还出现上"图二"的遮挡效果,解决方法:

双击打开rl.js,找到下边的代码(将注释去掉问题解决):

//if(document.all)
//{
//document.write('<iframe style="position:absolute;z-index:2000;width:expression(this.previousSibling.offsetWidth);');
//document.write('height:expression(this.previousSibling.offsetHeight);');
//document.write('left:expression(this.previousSibling.offsetLeft);top:expression(this.previousSibling.offsetTop);');
//document.write('display:expression(this.previousSibling.style.display);" scrolling="no" frameborder="no"></iframe>');
//}

 
再去看看你的页面是不是问题解决了。

清风夜影寒:http://qfyyh.iteye.com

 

1
3
分享到:
评论
3 楼 vb2005xu 2011-06-01  
this.divWrapper = document.createElement('div');
	this.divWrapper.style['position'] = 'absolute';
	this.divWrapper.style['display'] = 'none';
	this.divWrapper.style['zIndex'] = '100';
	this.divWrapper.style['left'] = '0px';
	this.divWrapper.style['top'] = '0px';

this.template = '<div style="position:absolute;z-index: 101">' +
		'<a href="@{target-url}" target="_blank">' +
		'<img src="@{img-url}" border="0" width="@{width}" height="@{height}"/>' +
		'</a>' +
		'</div>' +
		'<iframe style="position:absolute;width:100%;height:100%;background:#fff;border:0;z-index: 100"></iframe>' +
		'<div style="position:absolute;z-index: 100"></div>';



compile: function(){
		this.template = this.template.replace(/@{target-url}/g,this.target)
			.replace(/@{img-url}/g,this.img.src)
			.replace(/@{width}/g,this.img.width)
			.replace(/@{height}/g,this.img.height);
	} ,
//	
	init: function(){
		this.compile();
		
		this.divWrapper.id = this.id;
		this.divWrapper.style['width'] = this.img.width + 'px';
		this.divWrapper.style['height'] = this.img.height + 'px';
		this.divWrapper.innerHTML = this.template;
		
		//将div追加到body后面
		var body = document.getElementsByTagName('body')[0];		
		body.appendChild(this.divWrapper);
	} , 


2 楼 清风夜影寒 2011-06-01  
liuyupy 写道
IE6 ?  select&index BUG?   加入空的IFRAME

加入和层一样大的iframe,跟层一起显隐
1 楼 liuyupy 2011-06-01  
IE6 ?  select&index BUG?   加入空的IFRAME

相关推荐

    selectTree tree控件 日历控件 tree控件 radio CheckBox demo

    "selectTree tree控件 日历控件 tree控件 radio CheckBox demo"这个标题揭示了几个关键的组件,它们是网页交互中的重要元素。下面将详细介绍这些控件及其应用场景。 1. **selectTree(选择树控件)**: 选择树控件...

    powerbuild日历控件的调用示例

    在PowerBuilder(简称PB)开发环境中,日历控件是一种常用的用户界面元素,它允许用户方便地选择日期,常用于日期输入字段。本教程将详细解释如何在PowerBuilder中调用和使用日历控件,以`dateitemfunc.pbl`、`...

    jquery_ui日历控件

    此外,日历控件还支持多种事件,如`beforeShow`、`changeMonth`、`changeYear`和`select`,这些事件可以用于实现更复杂的交互逻辑。例如,`select`事件会在用户选择日期时触发,你可以监听这个事件来获取所选日期并...

    js日历控件日历控件

    在网页开发中,日历控件是一个非常常见的交互元素,用于选择日期,常用于表单中的日期输入。本文将深入探讨“js日历控件”的相关知识点,包括其原理、实现方式以及如何在实际项目中应用。 日历控件JS,顾名思义,是...

    js日历控件实例源码

    JavaScript日历控件是一种常用的前端开发工具,它允许用户在网页上方便地选择日期,常用于表单输入、事件预订、时间安排等场景。在这个"js日历控件实例源码"中,我们有两个关键文件:`demo.html`和`setday.js`。 ...

    VB使用数据库的带日程日历控件

    在某些应用场景,如任务管理、会议安排或者日程规划,日历控件结合数据库功能显得尤为重要。本主题将深入探讨如何在VB中利用日程日历控件与数据库进行集成,从而创建一个功能丰富的日程管理系统。 首先,我们需要...

    寒羽枫js日历控件兼容所有浏览器(包括ie8)

    ### 寒羽枫JS日历控件兼容所有浏览器(包括IE8) #### 概述 在Web开发领域,实现一个跨浏览器兼容的日历插件是一项挑战性任务,尤其是在需要支持老旧浏览器如Internet Explorer 8 (IE8)时。本文将详细介绍如何对寒...

    多个精美的PB日历控件

    PB,全称PowerBuilder,是一种基于对象的、用于开发企业级应用的可视化编程工具,由Sybase公司(现被SAP收购)开发。在PowerBuilder中,日历控件是常用的用户界面元素,用于显示日期选择功能,方便用户进行日期输入...

    asp实现日历控件动态绑定数据

    在ASP(Active Server Pages)开发中,日历控件是一个常用的功能组件,它允许用户以直观的日历形式选择日期。本篇文章将详细讲解如何利用ASP实现一个动态绑定数据的日历控件,使得日历能够根据指定日期显示不同的...

    WebCalendar日历控件

    WebCalendar是一款专为Web应用程序设计的日历控件,它提供了丰富的功能,使用户可以在网页上进行日期和时间的选择。这款控件广泛应用于各种在线表单、日程安排系统以及时间管理应用中,使得用户能够方便地操作和管理...

    js日历控件日期多选Kalendajs

    在这个场景中,"js日历控件日期多选Kalendajs" 提供了一种功能强大的解决方案,允许用户在日历上选择多个日期,甚至可以跨越多个月份。 Kalendajs是一款专门设计的日历插件,它具有日期多选功能,可以极大地提升...

    日历控件使用问题

    在IT领域,日历控件是一种常见的用户界面元素,它允许用户方便地选择日期或进行日期相关的操作。本文将深入探讨日历控件的使用问题,包括其功能、常见问题及解决方案。 首先,日历控件的基本功能是展示日期,并提供...

    超好用的JS日历控件,支持时分秒

    超好用的JS日历控件,支持时分秒 调用方法: 1、传入对象:SelectDate(this,'yyyy 年') 2、传入 ID:SelectDateById('Txt_CreateDateST01','yyyy 年') 3、参数 SelectDate(this,'yyyy 年',0,-150) 格式...

    日历控件(日期和时间)

    在IT领域,日历控件是用户界面设计中不可或缺的一部分,尤其在处理日期和时间相关的应用中。"日历控件(日期和时间)"是一个功能强大的组件,它允许用户以直观的方式选择日期和时间,提高了用户体验。在这个特定的...

    解决div总是被select遮挡的问题.rar

    通过在`div`后面插入这个透明`iframe`,`iframe`会创建一个新的堆叠上下文,并且由于其默认的Z轴顺序高于`select`,所以`div`不会被`select`遮挡。 需要注意的是,这种方法可能不适用于所有浏览器,因为不同浏览器...

    简单实用js日历控件

    JavaScript日历控件是网页开发中常见的一种交互元素,它为用户提供了一个直观的方式来选择日期,常用于表单填充、事件安排或时间管理等场景。在本主题中,我们讨论的是一款简单实用的JavaScript日历控件,其特点在于...

    js操作select控件大全

    这个函数将遍历 select 控件中的所有选项,并检查每个选项是否被选中。如果被选中,则将其删除。 五、 修改 select 选项中 value="paraValue" 的 text 为 "paraText" 在某些情况下,我们需要修改 select 控件中的...

    Js日历控件传递url参数

    在网页开发中,日历控件是一种常见的交互元素,它允许用户通过图形界面选择日期,常用于事件安排、新闻发布等场景。"Js日历控件传递url参数"这个主题聚焦于如何将用户在日历控件中选择的日期作为URL参数传递到下一个...

    javascript日历控件2

    下面将详细讨论JavaScript日历控件的相关知识点。 1. **基础概念**: - **JavaScript**:是一种轻量级的解释型编程语言,广泛应用于网页和网络应用开发,用于实现客户端的动态效果。 - **日历控件**:是网页交互...

Global site tag (gtag.js) - Google Analytics