我们在作B/S开发的时候经常会遇到DIV层被下拉框遮挡的时候,这让我们很苦恼。无论我们怎么设置css样式都无济于事,因为selese元素的优先级要不div高。那么我们就要选用比select元素优先级还要高的元素来遮挡它。这时候我们想到了iframe。我们可以在div里加上iframe来实现这种效果。
其实网上有很多类似的代码。但是iframe的大小设置是个问题,要做到和div的大小一样比较困难,这里展示一点小技巧。
就是用parentNode。具体的代码如下:
xml 代码
- <div id="menu" style="position:absolute; visibility:hidden; top:20px; left:20px; width:100px; height:200px; background-color:#6699cc;">
- <table>
- <tr><td>选项一</td></tr>
- <tr><td>选项二</td></tr>
- <tr><td>选项三</td></tr>
- <tr><td>选项四</td></tr>
- <tr><td>选项五</td></tr>
- </table>
- <iframe src="" frameborder="0" style="position:absolute; visibility:inherit; top:0px; left:0px; width:expression(this.parentNode.offsetWidth); height:expression(this.parentNode.offsetHeight); z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
-
- </div>
- <a href="#" onclick="document.getElementById('menu').style.visibility='visible'">菜单</a>
我们可以看到在设置style 的时候width:expression(this.parentNode.offsetWidth);表达式的方式。this.parentNode.offsetWidth就代表div的宽度
分享到:
- 2007-06-07 11:19
- 浏览 2640
- 评论(2)
- 论坛回复 / 浏览 (1 / 4720)
- 查看更多
相关推荐
在上面的代码中,`treeData`是一个JSON数组,每个元素代表树形结构的一个节点,包含`text`(节点文本)和`nodes`(子节点)属性。你可以根据实际需求调整这些配置项。 此外,还可以通过监听`nodeSelected`事件来...
在上面的代码中,我们使用 LayUI 库提供的 form 模块来渲染下拉框,并使用 lay-filter 属性来指定要监听的事件。在 JavaScript 代码中,我们可以使用 LayUI 库提供的事件处理机制来处理下拉框的选择事件和数据加载。...
本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法。分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可...于是走上面的路线,客户还说了,IE
在上面的代码中,我们使用了 v-for 循环来生成下拉框的选项,然后使用 transition 来实现下拉框的展开和收缩效果。在点击事件处理函数中,我们使用了数据绑定来更新下拉框的状态。 此外,我们还可以使用 Vue Select...
在上面的代码中,有两个控制器,`myctr01` 和 `myCtrl`,分别处理不同的数据模型。`ng-app` 指令定义了应用的范围,而 `ng-controller` 用于定义控制器,管理相应的数据和行为。 1. **遍历对象**:在 `myctr01` ...
在网页开发中,Ajax 自动完成下拉框是一种常见的交互元素,它允许用户在输入时获得实时的建议或匹配项,提升用户体验。本问题聚焦于一个自动完成下拉框的定位问题,涉及到JavaScript中的事件处理、DOM操作以及浏览器...
例如,在React中,你可以创建一个组件来封装这个下拉菜单,并利用state来控制列表的显示隐藏。在Vue中,可以使用v-show或v-if指令实现类似功能。在这些框架中,下拉菜单的实现会更加模块化和易于维护。 总的来说,...
在Web开发中,select下拉框是一种常见的表单元素,用于让用户从多个选项中选择一个或多个值。使用JavaScript和jQuery可以很方便地向select下拉框中动态添加和删除选项。下面详细介绍这一过程的知识点。 ### jQuery...
通过创建一个包含`<span>`元素和`<ul>`列表的`<div>`容器,并使用jQuery来监听点击事件,来实现下拉框的显示和隐藏,以及选项的选择功能。 3. 事件处理函数`initEvents`:在DropDown的原型对象中定义了`initEvents`...
在上面的代码中,我们使用 `v-for` 指令来循环 `chks` 数组,并且使用 `:checked` 指令来设置复选框的选中状态。`:checked` 指令将检查 `loopsss` 数组中是否包含当前项的 id,如果包含,则将复选框设置为选中状态。...
4. **数据源配置**:在上面的代码中,`Bloodhound`对象是数据源,可以是本地数据数组,也可以是远程API。`remote`选项允许你指定一个URL,当用户输入时,该插件会向此URL发送请求获取数据。 5. **模板定制**:`...
在上面的代码中,我们首先使用 empty 方法来清空原来的 div,然后使用 append 方法来追加自定义的 HTML 内容。其中,我们使用了一个 input 框来让用户输入每页显示的记录数,并将其追加到原来的位置。 通过使用这些...
执行上面的操作后,软件自动弹出 Workspace 的 Sim 面板如下: 在 vtf_test 栏单击右键,在弹出菜单中选择 Add > Add to Wave。然后软件将弹出波形窗口。 波形窗口如下: 这时我们点击全速编译(一次不行,多点一...
** 在进行布局前需要把数据封装到一块一块的区域内(div) (1)边框 border: 2px solid blue; border:统一设置 上 border-top 下 border-bottom 左 border-left 右 border-right (2)内边距 padding:...
**jQuery EasyUI** 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,如对话框、表格、下拉框、菜单、按钮等,用于快速构建交互式的Web应用。在这个特定的压缩包中,我们看到的是一款已经实现了左侧导航...
因此,如果想要在所有浏览器中保持一致的显示效果,可能需要使用更复杂的解决方案,如上面提到的自定义下拉菜单。 总结起来,设置CSS样式来美化下拉列表`<select>`并非易事,但通过理解浏览器的限制,以及利用...
在上面的示例中,导航栏和内容区域的id和链接需要保持一致,以便滚动监听插件能正确工作。 在了解了Bootstrap的常用JavaScript插件和一些基本使用方法之后,开发者应该可以在实际开发中更加有效地使用这些工具。...
在上面的示例代码中,我们可以看到三个 fieldset 元素,每个 fieldset 元素都包含了多个表单控件,并且都具有唯一的 legend 元素。第一个 fieldset 元素用于收集用户的基本信息,包括姓名、性别和年龄。第二个 ...
让select透明,上面加一个span,来替换select框,可以自定义小三角样式,也可以做出select文字居中的效果。 <div class=ui-select> 使用加息券或现金券 <i class=icon-down></i> <select name= id=> 元...
在实际应用中,你可以根据业务需求,在这些事件处理函数中执行更复杂的逻辑,如验证用户输入、更新其他组件的状态或者向服务器发送请求。 这个实例的实用性在于,它确保了代码的有效性和可运行性,避免了网络上许多...