HiddenSelect(x_top, y_top, width, height)
传入当前层的右上角坐标和层的宽和高,即可以解决此问题。
以下是客户端的JavaScript代码:
function ShowWinLayer(width, height, layer){
/* show window page */
/* width: DIV显示的宽 */
/* height: DIV显示的高 */
/* layer: 在层上显示的内容 */
var div = document.getElementById('divWinLayer');
var clientWidth = document.body.clientWidth;
var clientHeight = document.body.clientHeight;
var scrollTop = document.body.scrollTop;
var left = (clientWidth - width)/2;
var top = (clientHeight - height)/2 * 0.8 + scrollTop;
div.style.width = width;
div.style.height = height;
div.style.left = left;
div.style.top = top;
div.style.visibility = 'visible';
//hidden select elements
HiddenSelect(left, top, width, height);
//bind innerHTML
div.innerHTML = layer;
}
//hidden select elements function
function HiddenSelect(x_top, y_top, width, height){
var x_bt = x_top + width;
var y_bt = y_top + height;
var sl_pos,sl_x_top, sl_y_top, sl_x_bt, sl_y_bt, dsrcid;
var sls = document.getElementsByTagName('SELECT');
for(i=0; i<sls.length; i++){
sl_pos = AbsPos(sls[i]);
sl_x_top = sl_pos.x;
sl_y_top = sl_pos.y;
sl_x_bt = sl_x_top + sls[i].clientWidth;
sl_y_bt = sl_y_top + sls[i].clientHeight;
if(((sl_x_bt > x_top) && (sl_x_top < x_bt)) && ((sl_y_bt > y_top) && (sl_y_top < y_bt))){
dsrcid = sls[i].parentNode;
if(dsrcid){
if(dsrcid.id.indexOf('nohidden') == -1){
sls[i].style.visibility = 'hidden';
}
}else{
sls[i].style.visibility = 'hidden';
}
}else{
sls[i].style.visibility = 'visible';
}
}
}
分享到:
相关推荐
"DIV模拟select下拉框"就是一种利用JavaScript库,如jQuery,来实现这一目标的技术。它通过用CSS样式化的DIV元素替换原生的SELECT元素,从而提供更灵活的外观和交互体验。 标题中的"DIV模拟select下拉框"意味着我们...
通过以上分析,我们可以看出“jquery模拟div多选checkbox下拉框”是一个结合了jQuery、DOM操作、事件处理、CSS定制和数据管理的综合性组件。开发者在使用这个压缩包中的`selectbox`文件时,只需按照提供的API和示例...
为了解决这个问题,"SumoSelect"应运而生,它是一个专门设计来兼容IE8的多选下拉框组件,同时保持了简单易用和体积小巧的特点。 SumoSelect是一款强大的JavaScript插件,由jQuery库支持,能够将传统的HTML select...
IE浏览器,特别是较旧的版本,对于Unicode和其他编码格式的支持可能不如现代浏览器那么完善,因此在处理非ASCII字符时可能会出现问题。 乱码的产生可能有以下几种原因: 1. **网页编码设置不正确**:网页源代码中...
在这里,我们主要讨论如何使用div元素和JavaScript来模拟原生的下拉框多选效果。 首先,原生的HTML `<select>` 元素只支持单选,如果要实现多选,我们需要借助`<select multiple>`属性,但其样式通常难以自定义。...
本知识点将详细讲解如何使用jQuery创建一个基于div的下拉框,实现下拉列表的功能。 首先,理解jQuery的核心概念。jQuery通过选择器选中DOM元素,然后对这些元素进行操作。例如,`$("#myDiv")`会选中ID为"myDiv"的...
`div模拟select自定义下拉列表框`是一种常见做法,它利用JavaScript(如jQuery)和CSS来实现,可以提供比原生`<select>`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...
此时,开发者会利用CSS和JavaScript(通常配合jQuery或其他库)通过`div`元素来模拟下拉框的效果。 1. **CSS基础** CSS是层叠样式表(Cascading Style Sheets)的缩写,用于控制网页元素的样式。在div模拟下拉框中...
"JQuery DIV模拟下拉框(单选、多选)"就是一种使用JQuery和JavaScript技术,通过`<div>`元素来模拟原生的下拉框,并且支持单选和多选功能的解决方案。 1. **JQuery**:JQuery是一个广泛使用的JavaScript库,它简化...
在网页设计中,多选下拉框是一种常见的用户交互元素,允许用户在多个选项中进行选择。本项目中,我们采用JavaScript和HTML的DIV元素来实现一个自定义的多选下拉框,提供了面向对象的设计思路,使得开发者可以方便地...
本篇文章将深入探讨如何使用jQuery和EasyUI框架来实现一个支持多选功能的下拉框,特别关注对IE7及360浏览器的兼容性。 首先,我们需要了解jQuery的核心概念。jQuery通过简洁的API提供了对JavaScript对象的封装,...
下面我们将深入探讨这个主题,详细介绍如何利用div和css来制作下拉框。 1. **HTML结构**:首先,我们需要创建一个基础的HTML结构来表示下拉框。通常,下拉框由一个主菜单项和若干个子菜单项组成。我们可以使用`<div...
本文将深入探讨一个基于jQuery的具有搜索功能的下拉框组件,该组件兼容广泛的Internet Explorer浏览器,包括IE5到IE10,但不支持较新的Edge浏览器。 首先,让我们了解下拉框(Dropdown)的基本概念。在网页设计中,...
可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用...
在IT领域,尤其是在前端开发中,"1.4.4.min.js版本下拉框自带模糊搜索功能实现"是一个常见的需求,特别是在构建用户友好的交互式Web应用时。这个标题所指的知识点涉及到JavaScript(JS)的使用,特别是1.4.4.min.js...
"下拉框值触发另一个下拉框"这个功能就是一种常见的交互设计,通常应用于表单或者数据选择场景。这样的设计能够帮助用户根据前一个选择来过滤或定制后一个选项,从而简化操作流程。 首先,我们来理解下拉框...
在网页设计中,"DIV+CSS封装的一个下拉框效果"是一种常见的交互设计技术,它通过结合HTML结构、CSS样式以及可能的JavaScript(如Jquery)来实现更加灵活且美观的下拉选择功能。这种技术相比传统的HTML下拉框(`...
在网页开发中,多选下拉框是一种常见的交互元素,用户可以从中选择多个选项。JavaScript(简称js)作为客户端脚本语言,常被用来增强网页的交互性,其中包括实现多选下拉框的功能。本文将深入探讨如何使用JavaScript...
### Ueditor自定义下拉框及功能操作详解 #### 一、概述 Ueditor是一款由百度推出的开源富文本编辑器,具有丰富的插件和高度可定制化的特性,被广泛应用于各类网站后台管理系统中。本文主要讲解如何在Ueditor中添加...
《关于Select2在IE8及更高版本中的兼容性与应用》 在Web开发过程中,兼容性问题始终是一个棘手的问题,尤其是对于那些老旧但仍然被广泛使用的浏览器,如Internet Explorer 8 (IE8)。Select2,作为一个强大的下拉框...