JS下拉列表，漂亮的下拉列表（javascript）

共7个文件

png：2个

js：2个

db：1个

javascript

下拉列表

模拟下拉列表

多功能下拉列表

4星 · 超过85%的资源需积分: 50 77 浏览量 2011-03-11 11:48:41 上传评论 1 收藏 9KB RAR 举报

在JavaScript编程中，下拉列表（Dropdown List）是一种常见的用户界面元素，用于提供多项选择。在本项目中，我们探讨的是一款用JavaScript实现的“漂亮的下拉列表”，它具有多种特性，如支持主流浏览器，内置搜索功能，可以自适应宽高，并且样式独立，方便定制。下面将详细阐述这款下拉列表的实现原理和特性。 `demo.html`是演示文件，其中包含了HTML结构，展示了如何在网页中嵌入和使用这个下拉列表组件。HTML部分通常会包含一个`<select>`元素，通过JavaScript进行增强。`<select>`元素内的`<option>`标签则定义了可供用户选择的选项。 `css`文件夹包含了样式表，这些CSS代码负责为下拉列表提供美观的外观。样式独立意味着开发者可以根据自己的需求轻松修改颜色、字体、布局等样式属性，以匹配网站的整体设计。例如，可能会定义下拉列表的背景色、边框、选中项的样式等。 `js`文件夹中的JavaScript代码则是实现下拉列表功能的核心。JavaScript库可能包含了以下功能： 1. **列表搜索功能**：用户可以在输入框中输入关键词，快速过滤出匹配的选项。这通常是通过监听键盘事件，实时更新显示的列表来实现的。 2. **宽高自适应**：根据父元素或者设置的宽度自动调整下拉列表的宽度，同时，高度可能会随着选项数量的增加而动态调整，以防止滚动条的出现。 3. **跨浏览器兼容**：由于不同的浏览器对某些CSS样式和JavaScript API的支持程度不同，开发者需要编写兼容性代码，确保在Firefox、Chrome、Safari、Edge以及Internet Explorer等主流浏览器上都能正常工作。 4. **事件处理**：JavaScript代码会添加事件监听器，处理用户与下拉列表的交互，如点击选项、鼠标悬停等，从而触发相应的动作，比如触发回调函数、更新页面其他部分的状态等。 5. **动画效果**：为了提升用户体验，可能会添加一些过渡动画，如下拉列表的展开和收起效果，这通常通过CSS3的动画或JavaScript的setTimeout和requestAnimationFrame实现。 `images`文件夹可能包含了一些图标或图形资源，用于美化下拉列表或增强其功能，例如搜索图标、加载指示器等。这款JavaScript下拉列表组件提供了一种高效、灵活的解决方案，以满足各种网页应用中的选择需求。无论是对于新手还是经验丰富的开发者，都能快速集成并自定义这个组件，以适应他们的项目需求。通过深入理解这些代码，你可以学习到JavaScript事件处理、DOM操作、CSS样式设计以及跨浏览器兼容性处理等关键技能。

资源推荐

资源详情

资源评论

收起资源包目录

下拉列表.rar （7个子文件）

css

select.css 1KB

images

arrow.png 156B

arrow_b.png 230B

Thumbs.db 4KB

util.js 3KB

select.js 17KB

demo.html 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <TITLE>demo</TITLE> <LINK href="css/select.css" type="text/css" rel="stylesheet" rev="stylesheet" /> <SCRIPT type="text/javascript" src="js/util.js"></SCRIPT> <SCRIPT type="text/javascript" src="js/select.js"></SCRIPT> </HEAD> <BODY style="font-size:12px;padding-left:20px; padding-top:20px;"> <DIV id="test" style="background-color:#CCC; width:200px; height:200px;"> </DIV> <SCRIPT type="text/javascript"> document.writeln("<br/>"); /* * 参数说明： * 常量： * ================================================== * parameters.ADAPTIVE_TYPE_AUTO: "auto", //自适应方式-自动 * parameters.ADAPTIVE_TYPE_LIST: "list", //自适应方式-只是列表 * parameters.ADAPTIVE_TYPE_NONE: "none", //无自适应 * ================================================== * * 变量： * ================================================================================================================== * 参数名称参数说明参数类型默认值 * ================================================================================================================== * cTarget 目标位置，要创建到哪个容器 String null * Id 文本框ID，设置此ID以便外部使用选择的值 String empty * Name 文本框NAME，设置此属性以便表单提交已选择的值或外部使用 String empty * Adaptive 自适应方式 String auto * Readonly 是否只读 Boolean false * Fade 淡入淡出 Boolean true * FadeSpeed 淡入淡出速度(1-10) Integer 5 * Color 主题颜色 String #4CC6DE * TextColor 字体颜色 String #333333 * bgColor 列表背景颜色 String #F5F5F5 * InputBgColor 输入框背景颜色 String #EDF8F8 * OverColor 列表的鼠标经过颜色 String #4CC6DE * ArrowOverColor 箭头的鼠标经过颜色 String #A6DFEA * OverTextColor 鼠标经过的字体颜色 String #FFFFFF * Width 列表宽 Integer 40 * Height 列表高 Integer 60 * Opacity 透明度 Integer 80 * onChange 列表项改变事件 Function empty * */ var demo = new Select({Height:200,Width:120,Adaptive:"none",Fade:true,Readonly:true}).create(); demo.addOption("option1","1"); demo.addOption("option2","2"); demo.addOption("option3","3"); demo.addOption("option4","4"); demo.addOption("option5","5"); demo.addOption("option6","6"); demo.addOption("option7","7",true); demo.addOption("option8","8"); demo.addOption("option9","9"); demo.addOption("option10","10"); demo.addOption("option11","11"); demo.addOption("option12","12"); demo.addOption("option13","13"); demo.addOption("option14","14"); demo.onChange = function(){ //do some thing... } var demo = new Select(); demo.cTarget = "test"; demo.Fade = false; demo.Readonly = true; demo.Opacity = 80; //demo.Height = 120; demo.create(); demo.addOption("option1","1"); demo.addOption("option2","2"); demo.addOption("option3","3"); demo.addOption("option4","4"); demo.addOption("option5","5"); demo.addOption("option6","6"); demo.addOption("option7","7",true); demo.addOption("option8","8"); demo.addOption("option9","9"); demo.addOption("option10","10"); demo.addOption("option11","11"); demo.addOption("option12","12"); demo.addOption("option13","13"); demo.addOption("option14","14"); </SCRIPT> </BODY> </HTML>

评论收藏

内容反馈