- 浏览: 3138 次
文章分类
最新评论
近几天公司需要美化一个select下拉列表,在这记录下以便以后使用,js部分我已经封装成对象了,只用在html页面new 一下带上 标签的name值就可以使用了,是不是很方便呢!select的样式大小图片背景都可以随意修改,只需要修改css样式就好了!
下面开始贴代码了:
html:
下面是css样式部分:
下面是js部分:
下面开始贴代码了:
html:
<!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" /> <link href="css/base.css" rel="stylesheet" type="text/css"/> <link href="css/importselect.css" rel="stylesheet" type="text/css"/> <title>select dom</title> <script type="text/javascript" src="js/importselect.js"></script> <script type="text/javascript"> window.onload=function (){ new selectStyle('area_selet2'); new selectStyle('area_selet1'); }; </script> </head> <body> <div class="center"> <div id="age_sel_2"> <select name="area_selet2"> <option value="请选择">请选择</option> <option value="ASP" >ASP</option> <option value="PHP" >PHP</option> <option value=".NET" >.NET</option> </select> </div> </div> <div class="center"> <div id="age_sel_2"> <select name="area_selet1"> <option value="请选择">请选择</option> <option value="ASP" >ASP</option> <option value="PHP" >PHP</option> <option value=".NET" >.NET</option> </select> </div> </div> </body> </html>
下面是css样式部分:
html{background:#fff;} .center{ margin-left:auto; margin-right:auto; margin-top:10px; width:300px;position:relative;} #age_sel_2 div.tag_select{display:block;width:141px;height:36px;line-height:36px; float:left; color:#fff; text-align:center; font-size:12px;} #age_sel_2 div.tag_select_hover{display:block;width:141px;height:36px;line-height:36px;float:left; color:#fff; text-align:center; font-size:12px;} #age_sel_2 div.tag_select_open{display:block;color:#fff;width:141px;height:36px;line-height:36px;text-align:center;font-size:12px;float:left;} #age_sel_2 ul.tag_options{width:136px;font-size:12px;color:#fff;line-height:36px;text-align:center;float:left;border:1px solid #37A2DA;border-top:0;background:#39A9FE;position:absolute;left:43px; top:33px;} #age_sel_2 ul.tag_options li{display:block;width:136px;height:36px;text-decoration:none;} #age_sel_2 ul.tag_options li.open_hover{background:#2174B7;color:#fff;} #age_sel_2 ul.tag_options li.open_selected{background:#B2DBFC;color:#000;} .select_box{background:url(../images/select02.gif) no-repeat;width:181px; height:36px;} .select_txt{width:40px; height:36px;font-size:12px;color:#fff;line-height:36px;text-align:center;float:left;} .select_fh{background:url(../images/select01.png) -17px 0 no-repeat;width:13px;height:16px;position:absolute;left:155px;top:11px;} .select_fh_on{background:url(../images/select01.png) 0 0 no-repeat;width:16px;height:14px;position:absolute;left:155px;top:11px;}
下面是js部分:
function selectStyle(name){ this.selects = document.getElementsByName(name); isIE = (document.all && window.ActiveXObject && !window.opera) ? true : false; this.rSelects(); }; selectStyle.prototype.stopBubbling=function (ev) { ev.stopPropagation() }; //定义$为获取id写法 function $(id) { return document.getElementById(id) }; //加载dom元素 selectStyle.prototype.rSelects=function () { for (i=0;i<this.selects.length;i++){ this.selects[i].style.display = 'none'; select_tag = document.createElement('div'); select_tag.id = 'select_' + this.selects[i].name; select_tag.className = 'select_box'; this.selects[i].parentNode.insertBefore(select_tag,this.selects[i]); select_text = document.createElement('div'); select_text.className='select_txt'; select_text.innerHTML='姓名'; select_tag.appendChild(select_text); select_fh = document.createElement('div'); select_fh.className='select_fh'; select_fh.id='select_fh'; select_tag.appendChild(select_fh); select_info = document.createElement('div'); select_info.id = 'select_info_' + this.selects[i].name; select_info.className='tag_select'; select_info.style.cursor='pointer'; select_tag.appendChild(select_info); select_ul = document.createElement('ul'); select_ul.id = 'options_' + this.selects[i].name; select_ul.className = 'tag_options'; select_ul.style.position='absolute'; select_ul.style.display='none'; select_ul.style.zIndex='999'; select_tag.appendChild(select_ul); this.rOptions(i,this.selects[i].name); this.mouseSelects(this.selects[i].name); if (isIE){ this.selects[i].onclick = new Function("clickLabels3('"+this.selects[i].name+"');window.event.cancelBubble = true;"); } else if(!isIE){ this.selects[i].onclick = new Function("clickLabels3('"+this.selects[i].name+"')"); this.selects[i].addEventListener("click", this.stopBubbling, false); } } } selectStyle.prototype.rOptions=function (i, name) { var _this=this; var options = this.selects[i].getElementsByTagName('option'); var options_ul = 'options_' + name; for (n=0;n<this.selects[i].options.length;n++){ option_li = document.createElement('li'); option_li.style.cursor='pointer'; option_li.index=n; option_li.className='open'; $(options_ul).appendChild(option_li); option_text = document.createTextNode(this.selects[i].options[n].text); option_li.appendChild(option_text); option_selected = this.selects[i].options[n].selected; if(option_selected){ option_li.className='open_selected'; option_li.id='selected_' + name; $('select_info_' + name).appendChild(document.createTextNode(option_li.innerHTML)); } option_li.onmouseover = function(){ this.className='open_hover';} option_li.onmouseout = function(){ if(this.id=='selected_' + name){ this.className='open_selected'; } else { this.className='open'; } } option_li.onclick =function(){_this.clickOptions(i,this.index,_this.selects[i].name)};//new Function("this.clickOptions("+i+","+n+",'"+this.selects[i].name+"')"); } } selectStyle.prototype.mouseSelects=function (name){ var _this=this; var sincn = 'select_info_' + name; if (isIE){ $(sincn).onclick = function(){_this.clickSelects(name);window.event.cancelBubble=true;};// new Function("_this.clickSelects('"+name+"');window.event.cancelBubble = true;"); } else if(!isIE){ $(sincn).onclick = function(){_this.clickSelects(name)}; $('select_info_' +name).addEventListener("click", this.stopBubbling, false); } } //点击下拉列表事件 selectStyle.prototype.clickSelects=function (name){ var sincn = 'select_info_' + name; var sinul = 'options_' + name; for (i=0;i<this.selects.length;i++){ if(this.selects[i].name == name){ if( $(sincn).className =='tag_select'){ $(sincn).className ='tag_select_open'; $(sinul).style.display = ''; } else if( $(sincn).className =='tag_select_open'){ $(sincn).className = 'tag_select'; $(sinul).style.display = 'none'; } } else{ $('select_info_' + this.selects[i].name).className = 'tag_select'; $('options_' + this.selects[i].name).style.display = 'none'; } } } //选项点击事件 selectStyle.prototype.clickOptions=function (i,n, name){ var li = $('options_' + name).getElementsByTagName('li'); $('selected_' + name).className='open'; $('selected_' + name).id=''; li[n].id='selected_' + name; li[n].className='open_hover'; $('select_' + name).removeChild($('select_info_' + name)); select_info = document.createElement('div'); select_info.id = 'select_info_' + name; select_info.className='tag_select'; select_info.style.cursor='pointer'; $('options_' + name).parentNode.insertBefore(select_info,$('options_' + name)); this.mouseSelects(name); $('select_info_' + name).appendChild(document.createTextNode(li[n].innerHTML)); $( 'options_' + name ).style.display = 'none' ; $( 'select_info_' + name ).className = 'tag_select'; this.selects[i].options[n].selected = 'selected'; }
相关推荐
JS+CSS和图片美化select下拉列表选择框
主要介绍了用JavaScript来美化HTML的select标签的下拉列表效果的方法,而且在多浏览器下的兼容效果也得到提升,需要的朋友可以参考下
基于jQuery美化的JS Select下拉列表菜单,官方已封装成了现成的插件,鼠标点击下拉菜单的向下箭头后,有感动的滚动效果,用jQuery制作下拉框,很是方便,希望大家喜欢。
今天特意给大家推荐一款可以美化select下拉列表的插件——jquery.custom-select.js 只有十几KB大小,完全不影响网速加载 使用方法: 1、将head中的css样式引入到你的页面中 2、将body中的代码部分...
青蛙实战之用JS+CSS和图片美化下拉列表选择框(select) 青蛙实战之用JS+CSS和图片美化下拉列表选择框(select)
模拟select下拉列表特效,因为html的下拉列表的样式修改美化等有些复杂,不容易控制。注意用于对页面的颜色搭配过于讲究的。
本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下: 三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图: 效果查看 源码下载 具体代码如下: <...
为了方便用户在ie8以下select下拉列表的美化,特此共享!
内容索引:脚本资源,jQuery,JQuery下拉菜单 基于jQuery美化的JS Select下拉列表菜单,官方已封装成了现成的插件,使用方便,用jQuery制作下拉框,很是方便,希望大家喜欢。
jquery.jSelectDate.js 下拉列表式日期选择器插件实例,裸体版基本没有美化,其实这样更方便使用者自己美化,有些人可能会比较喜欢这种select列表式的日期选择功能,和个人习惯有关。功能介绍:1.支持闰年、大小月和...
pickout.js是一款效果非常炫酷的纯JavaScript下拉列表框美化插件。该下拉列表框插件大小仅5kb,在用户点击了列表框时,会弹出类似模态窗口的下拉列表,还可以对列表中的选项进行搜索过滤。
这是一款用于美化下拉列表菜单控件的jquery插件ddlist。使用该ddlist下拉列表美化插件可以为下拉列表添加图标,增强下拉列表的默认功能等。在美化的同时使下拉列表功能得到增强。
本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下: 一款经过JS+CSS美化的下拉列表,效果很不错,但代码有点偏多,学习CSS的朋友可以学习一下方法,然后自己变通一下,把代码简化一下...
2, 有时候页面上保留了很窄的地方需要写一个SELECT而SELECT下拉列表中的OPTION内容 又很长,往往显示不完整,用这个脚本new SelectView('','','','')第二个参数是上面文本框的宽度,主要是第三个参数,如果不设置就...
摘要:脚本资源,Ajax/JavaScript,表单美化 jQuery完美实现Select下拉列表,使用jQuery去美化一款漂亮的Select框,,将单调的灰色风格下拉框变为清新的淡蓝色风格,而且为它加了一个圆角框,甚至还有些轻微的动画效果...
基于Tether下拉选择框美化特效是一款内置3种皮肤主题,它在原生select元素的基础上通过Javascript和CSS来进行改造,并通过Tether插件来进行下拉框的定位。
html中默认的select太丑了,使用jquery+html自定义下拉框。样式随心所欲。
这是一款基于jquery.selectlist.js插件实现的下拉框美化特效,简单的jQuery select下拉框美化代码。 js代码 [removed][removed] [removed][removed] [removed] $(function(){ $('select').selectlist({ ...
JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多。...