美观下拉框实例2

最新推荐文章于 2023-07-09 19:39:22 发布
最新推荐文章于 2023-07-09 19:39:22 发布
阅读量153 收藏
点赞数
文章标签： xhtml javascript ViewUI
<!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="Content-Language" content="zh-CN" /> <title>用javascript美化Select</title> <style type="text/css"> * { margin:0; padding:0; } body { margin:50px; } .iDiv { position:absolute; height:19px; font-size:12px; color:#333; line-height:19px; text-indent:4px; vertical-align:middle; border:1px solid #7f9db9; cursor:default; cursor:pointer; background:url(http://pet.runsky.com/img/select_bg.gif) no-repeat 100% 0; } .iDiv_over { color:#f96; background-position:100% -25px; } .iDiv_out { color:#333; background-position:100% 0; } .cDiv { position:absolute; moz-user-select:none; border:1px solid #7f9db9; cursor:default; background:#fff; overflow:auto; z-index:1; } .cDiv ul { font-size:12px; color:#878787; listStyle:none; margin:0; padding:0; } .cDiv ul li { height:24px; line-height:24px; text-indent:4px; } </style> <script type="text/javascript"> // JavaScript Document function $() { return document.getElementById(arguments[0]); } // function getCurrentStyle(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); } var SetAllSelects = { Offset:function(e) { var t = e.offsetTop; var l = e.offsetLeft; var w = e.offsetWidth; var h = e.offsetHeight; while(e = e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; } return {top:t, left:l, width:w, height:h}; }, setCreated:function(obj,status) { obj.setAttribute("childCreated",status); }, getCreated:function(obj) { var status = obj.getAttribute("childCreated"); if(status == null) { status = ""; } return status; }, setSelectStyle:function(obj,idnum,showHeight) { if(obj.id == null || obj.id == "") { obj.id = "selectID_"+idnum; } var offset = this.Offset(obj); obj.style.visibility = "hidden"; var mainDiv = document.createElement("div"); var iDiv = document.createElement("div"); var js_select_; var _this = this; iDiv.className = "iDiv"; iDiv.id = js_select_+obj.id; iDiv.style.width = offset.width + "px"; iDiv.style.top = offset.top + "px"; iDiv.style.left = offset.left + "px"; this.setCreated(iDiv,""); mainDiv.appendChild(iDiv); var tValue = obj.options[obj.selectedIndex].innerHTML; iDiv.innerHTML = tValue; iDiv.onmouseover = function() { iDiv.className = "iDiv iDiv_over"; } iDiv.onmouseout = function() { iDiv.className = "iDiv iDiv_out"; } iDiv.onclick = function() { var created = _this.getCreated(this); if (created != "") { if (created == "open") { this.nextSibling.style.display = "none"; _this.setCreated(this,"close"); } else { _this.setCreated(this,"open"); var arrLiObj = this.nextSibling.getElementsByTagName("li"); var selOjbIndex = 0; for(var i=0;i<arrLiObj.length;i++) { var status = arrLiObj[i].getAttribute("liSelected"); if(status == null) { status = ""; } if(status == "selected") { selOjbIndex = i; break; } } arrLiObj[selOjbIndex].style.background = "#fff"; arrLiObj[selOjbIndex].style.color = "#878787"; this.nextSibling.style.display = "block"; } } else { _this.setCreated(this,"open"); var cDiv = document.createElement("div"); cDiv.className = "cDiv"; cDiv.style.width = offset.width + "px"; cDiv.style.height = obj.options.length * 19 + "px"; if(parseInt(cDiv.style.height)>showHeight) { cDiv.style.height = showHeight + "px"; } cDiv.style.top = (offset.top+parseInt(getCurrentStyle(this).height)+1) + "px"; cDiv.style.left = offset.left + "px"; cDiv.onselectstart = function() {return false;}; var uUl = document.createElement("ul"); cDiv.appendChild(uUl); mainDiv.appendChild(cDiv); for (var i=0;i<obj.options.length;i++) { var lLi = document.createElement("li"); lLi.id = obj.options[i].value; lLi.innerHTML = obj.options[i].innerHTML; lLi.sValue = obj.options[i].value; uUl.appendChild(lLi); } var liObj = uUl.getElementsByTagName("li"); if(liObj.length>0) { for (var j=0;j<obj.options.length;j++) { liObj[j].onmouseover = function() { var arrLiObj = this.parentNode.getElementsByTagName("li"); for(var i=0;i<arrLiObj.length;i++) { var status = ""; var _background = "#ccc"; var _color = "#000"; if(arrLiObj[i] != this) { _background = "#fff"; _color = "#878787"; status = "selected"; } arrLiObj[i].style.background = _background; arrLiObj[i].style.color = _color; arrLiObj[i].setAttribute("liSelected",status); } } liObj[j].onclick = function() { obj.options.length = 0; obj.options[0] = new Option(this.innerHTML,this.sValue); this.parentNode.parentNode.style.display = "none"; _this.setCreated(this.parentNode.parentNode.previousSibling,"close"); iDiv.innerHTML = this.innerHTML; }; liObj[0].style.background = "#ccc"; liObj[0].style.color = "#000"; liObj[0].setAttribute("liSelected","selected"); } } } } document.body.appendChild(mainDiv); }, setAllSelectStyle:function() { var s = document.getElementsByTagName("select"); for (var i=0; i<s.length; i++) { if(s[i].className == "select") { this.setSelectStyle(s[i],i,200); } } } } document.onclick = function(e) { e = e || window.event; var target = e.target || event.srcElement; var s = document.getElementsByTagName("select"); var js_select_; for (var i=0; i<s.length; i++) { if(s[i].className == "select") { var objdivtmp = $(js_select_+s[i].id); var created = SetAllSelects.getCreated(objdivtmp); if (created == "open") { if(target != objdivtmp) { objdivtmp.nextSibling.style.display = "none"; SetAllSelects.setCreated(objdivtmp,"close"); } } } } } window.onload = function() { SetAllSelects.setAllSelectStyle(); } function getValue() { var kk = document.getElementsByTagName('select')[0]; return kk.options[kk.selectedIndex].value; } function getTxt() { var kk = document.getElementsByTagName('select')[0]; return kk.options[kk.selectedIndex].innerHTML; } </script> </head> <body> <select class="select"> <option value="3_1">选择</option> <option value="3_2">选择3_22_22_22_2</option> <option value="3_3">选择3_22_22_22_3</option> <option value="3_4">选择3_22_22_22_4</option> <option value="3_5">选择3_22_22_22_5</option> <option value="3_6">选择3_22_22_22_6</option> <option value="3_7">选择3_22_22_22_7</option> <option value="3_8">选择3_22_22_22_8</option> <option value="3_9">选择3_22_22_22_9</option> <option value="3_10">选择3_22_22_22_10</option> <option value="3_11">选择3_22_22_22_11</option> <option value="3_12">选择3_22_22_22_12</option> <option value="3_13">选择3_22_22_22_13</option> <option value="3_14">选择3_22_22_22_14</option> <option value="3_15">选择3_22_22_22_15</option> <option value="3_16">选择3_22_22_22_16</option> </select> </body> </html>
iteye_1789
关注
美观下拉框实例
oscar999的专栏
07-21 1590
如何让select的样式也漂亮起来 <!-- .select * { margin: 0; padding: 0; } .select { border:1px solid #cccccc; float: left; display: inline; } .select div { border:1px solid #f9f9f9; float: left; } /* 子选择器，
一款非常好看下拉框样式(select)
09-27
一款非常好看下拉框样式(select)主要调用了已经封装好的样式文件selectBox.htc,才实现了下拉框的美化......
下拉菜单案例
qq_34272315的博客
12-27 493
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul {
下拉框案例
磨镜台的博客
04-27 409
下拉框案例 <script> window.onload = function() { var vm = new Vue({ el:'.box', data:{ content:'北京' } }) } </script> &...
下拉列表例子
12-19
import java.util.ArrayList; import java.util.ListIterator; public class ArrayListDemo { public static void main(String args[]) { // create an array list ArrayList al = new ArrayList(3); System.out.println("Initial size of al: " + al.size()); // add elements to the array list al.add("C"); al.add("A"); al.add("E"); al.add("B"); al.add("D"); al.add("F"); al.add(1, "A2"); System.out.println("Contents of al: " + al); System.out.println("Size of al after additions: " + al.size()); // display the array list System.out.println("Contents of al: " + al); // Remove elements from the array list al.remove("F"); al.remove(2); System.out.println("Contents of al: " + al); // System.out.println(al.get(2)); // System.out.println(al.indexOf("E")); ListIterator li = al.listIterator(); while(li.hasNext()) { System.out.println(li.next()); } al.clear(); System.out.println(al); } }
实用弹窗与下拉框实例下载指南
在实际项目中，开发者可能会使用更加复杂和美观的HTML结构和CSS样式，以及更加完善的JavaScript逻辑来创建满足需求的弹窗和下拉框。 ### 结论 弹窗和下拉框是Web界面中非常常见的交互元素，它们能够帮助开发者创建...
jQuery实现下拉框功能实例代码
10-22
例如，`$("#select1 option:selected")`选择了第一个下拉框中被选中的`<option>`元素，而`.appendTo("#select2")`则是把选中的`<option>`元素添加到第二个下拉框中。类似地，其他函数通过选择器和方法组合实现了对应...
CSS打造炫酷下拉框实例与实现步骤
总结来说，本文提供了一种创新的方法，通过CSS和轻量级脚本，打造出一款既美观又实用的下拉框组件，适合对用户体验有较高要求的网站或应用。学习者可以借此了解如何在不依赖复杂插件的情况下，使用纯CSS和少量...
下拉列表的例子
02-16
一个简单的下拉列表的例子，适合初学者学习，简便通用。
下拉框、下拉控件之Select2内含css和js
07-17
下拉框、下拉控件之Select2内含css和js.select2可以使下拉框更加美观.
java swing 多选下拉框 支持动态加载数据
12-09
java swing 多选下拉框 支持动态加载数据 （优化了网上的下拉框代码）
css下拉菜单汇总案例
qq_46664185的博客
10-27 520
1.基础的下拉菜单 将鼠标移到元素上时出现的下拉框。效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
一个漂亮好用的模拟下拉框
johncools的博客
05-16 2428
点击这里下载完整源代码在Web开发中，为了追求界面上的美观，有时候我们需要改变一些控件的呈现外观，通常我们可以通过CSS很方便的达到所需效果，但是对于一些控件缺令Web开发人员非常伤脑筋，比如想要更改下拉框的边框或者下拉箭头的演示，用CSS就非常难实现，这时候只能靠程序代码对系统默认下拉框控件进行模拟，有很多模拟方式都可以达到这一目的，但是本文，笔者对众多方案进行深入研究和权衡后，提出一种性能卓越
最完美的select下拉框美化
热门推荐
曾今拼命的想，现在却拼命的忘
10-06 2万+
很多人为select的诸多不完善而头痛，如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件。感兴趣的可以从最后的链接地址下载代码研究与交流。   特点1：美化的并且可自定义的外观 下拉框使用JS进行渲染。当页面引入了脚本和CSS后，页面中的下拉框都会变成如下外观： 该外观是由CSS和图片控制。通过修改CSS可以很方便地实现更改外观。 下拉框不存在I
【WEB自动化测试】-下拉框、弹出框、滚动条、frame表单、多窗口切换
最新发布
weixin_51725434的博客
07-09 5267
说明：下拉框就是HTML中元素。
Android Studio 下拉框Spinner实例
BAIFOL的博客
11-04 4642
1. 功能 下拉框相当常见了，例如选择省、市、县；例如选择部门；选择员工。用处一般是多选一。 2. 显示 下拉框一般有两种形式，一种是下拉显示可选项，一种是弹窗显示可选项。通过调整参数spinnerMode，dropdown/dialog分别代表两种下拉框。 注意下拉框的数据需要从资源中关联过来，资源文件res/values/arrays.xml代码如下： Android布局文件如下： 效果如下： 3. 动态设置选项 可以利用数组适配器ArrayAdapter动态设置下...
html中下拉框案例！
ma20120607的专栏
07-24 946
选择下拉菜单 选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。 北京 上海 山东 安徽 重庆 福建 甘肃 广东 广西 贵州 海南 河北 黑龙江 值： function moveAllOption(e
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值