表单美化——下拉列表
来源:互联网 发布:mc喊麦软件 编辑:程序博客网 时间:2024/05/31 18:45
纯js实现模拟的下拉列表框:
<!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>表单美化_下拉列表篇</title><style>body{font:13px/26px "微软雅黑";background:#666666;}div,ul,li{margin:0;padding:0;}a{color:#000;text-decoration:none;line-height:30px;padding:0 10px;}a:hover{color:#C00;}#box{width:500px;height:326px;border:3px solid #333333;background:#FFF;position:absolute;top:50%;left:50%;margin:-163px 0 0 -250px;}.province{width:320px;height:42px;background:#C00;margin:80px auto;padding-left:10px;position:relative;}.province strong{width:48px;height:42px;color:#FFF;line-height:42px;font-size:14px;font-weight:bold;display:block;float:left;}.province span{width:200px;height:24px;line-height:24px;border:1px solid #999;background:#FFF url(images/province_sprites.png) no-repeat 189px -2px;display:block;float:left;margin-top:8px;padding-left:4px;cursor:pointer;}.province ul{width:328px;height:auto;background:#FFF;border:1px solid #dfdfdf;border-bottom:none;clear:both;position:absolute;left:0;top:42px;display:none;z-index:101;}.province ul li{height:30px;line-height:30px;border-bottom:1px solid #dfdfdf;padding-left:10px;}.province ul li b{font-weight:bold;}ul,li{list-style:none;}.show{display:block;}#layer{width:100%;height:100%;background:#FFFFFF;position:absolute;top:0;left:0;z-index:100;filter:alpha(opacity=0);opacity:0;display:none;}</style><script>function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } }}function $(id){ return document.getElementById(id);}function showProvince(){ $("selectProvince").onclick = showAllProvince; selectProvince();}function showAllProvince(){ $("allProvince").style.display = "block"; $("layer").style.display="block"; $("selectProvince").style.color = "#CCCCCC"; $("selectProvince").style.backgroundPosition = "189px -17px"; $("layer").onclick=function(){ hideAllProvince(); }}function hideAllProvince(){ $("allProvince").style.display = "none"; $("layer").style.display="none"; $("selectProvince").style.color = "#000000"; $("selectProvince").style.backgroundPosition = "189px -2px";}function selectProvince(){ var pro = $("allProvince").getElementsByTagName("li"); var links; for(var i=0;i<pro.length;i++){ links = pro[i].getElementsByTagName("a"); for(var j=0;j<links.length;j++){ links[j].onclick = function(){ $("selectProvince").innerHTML = this.innerHTML; hideAllProvince(); } } }}addLoadEvent(showProvince);</script></head><body><div id="box"> <div class="province"> <strong>送货至</strong> <span id="selectProvince">北京</span> <ul id="allProvince" class="show"> <li><b>A</b><a href="javascript:void(0);">安徽</a></li> <li><b>B</b><a href="javascript:void(0);">北京</a></li> <li><b>C</b><a href="javascript:void(0);">重庆</a></li> <li><b>F</b><a href="javascript:void(0);">福建</a></li> <li><b>G</b><a href="javascript:void(0);">广东</a><a href="javascript:void(0);">广西</a></li> <li><b>H</b><a href="javascript:void(0);">河北</a><a href="javascript:void(0);">河南</a><a href="javascript:void(0);">黑龙江</a></li> <li><b>J</b><a href="javascript:void(0);">吉林</a><a href="javascript:void(0);">江苏</a></li> <li><b>L</b><a href="javascript:void(0);">辽宁</a></li> <li><b>N</b><a href="javascript:void(0);">内蒙古</a></li> <li><b>Q</b><a href="javascript:void(0);">青海</a></li> <li><b>S</b><a href="javascript:void(0);">上海</a><a href="javascript:void(0);">山东</a></li> <li><b>T</b><a href="javascript:void(0);">天津</a></li> <li><b>X</b><a href="javascript:void(0);">新疆</a></li> <li><b>Y</b><a href="javascript:void(0);">云南</a></li> <li><b>Z</b><a href="javascript:void(0);">浙江</a></li> </ul> </div></div><div id="layer"></div></body></html>
下拉列表右边小剪头图标:
代码运行效果图:
1 0
- 表单美化——下拉列表
- 表单美化-原生javascript和jQuery下拉列表(兼容IE6)
- 表单美化-原生javascript和jQuery下拉列表(兼容IE6)
- 自己动手丰衣足食之表单美化checkbox和radio和下拉列表
- select 下拉框和下拉列表美化
- 单选框,复选框,下拉列表的美化
- QComboBox下拉列表样式美化定义
- nicejforms——美化表单不用愁
- 表单中的下拉列表 使用
- css美化select下拉列表(更换下拉箭头)的方法
- 巧用css美化select下拉列表 更换下拉箭头
- html——下拉列表
- JS+CSS和图片美化下拉列表选择框(select)
- JS+CSS和图片美化下拉列表选择框
- 表单美化
- 表单里加了个一个下拉列表
- [JavaScript][表单文本框&下拉列表框操作]
- Bootstrap3 表单-下拉列表(select)
- Web安全之权限攻击
- 192.168.148.215\sql2000连不上
- Ember.js 入门指南——计算属性(compute properties)
- ios-xcode真机测试时报错001 process launch failed
- JS设计模式——适配器模式
- 表单美化——下拉列表
- hadoop hbase metric
- Tomcat下多项目jar包共享配置
- 扑克牌顺子
- sql中top使用方法
- java基础—9.GUI图形化界面
- 深入理解javascript原型和闭包(完结
- 还记得星球大战里那个圆头圆脑的机器人吗
- UIScrollView 属性和方法