有没有人用过 jquery 美化下拉列表的插件 jQuery.SelectBox.js ???有问题咨询
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了有没有人用过 jquery 美化下拉列表的插件 jQuery.SelectBox.js ???有问题咨询相关的知识,希望对你有一定的参考价值。
我用jQuery.SelectBox.js来美化下拉列表后!就获取不到下拉列表的值!!
有没有知道是怎么回事!该怎么解决啊??
谢谢!
在线等你们!!会的就路过来看看!!!
<style type="text/css">
*margin:0;padding:0;
.icon_comsborder-width:6px;border-style:solid;border-color: #ccc #fff #fff #fff;
.selectelementcursor:pointer;display:inline-block;line-height:26px;padding:1px 20px 0 10px;border:1px solid #E1E8E5;position:relative;z-index:1;border-radius:4px;
.selectelement spanwhite-space:nowrap;text-align:center;min-width:24px;max-width:128px;overflow:hidden;text-overflow:ellipsis;display: inline-block;background:#fff;
.selectelement .showNavbackground:#fff;display:none;border:2px solid #599EFE;position:absolute;left:-2px;top:26px;border-radius:0 4px 4px 4px;
.selectelement ulmax-height: 260px;overflow-x:hidden;overflow-y:auto;
.selectelement liwhite-space:nowrap;height:26px;line-height:26px;padding:0 10px;cursor:pointer;
.selectelement li:hoverbackground:#f0f0f0;
.selectelement li.activebackground:#599EFE;color:#fff;
.selectelement .icon_comswidth:0;height:0;position:absolute;right:4px;top:11px;overflow:hidden;transition:all 0.15s ease-out;-moz-transition:all 0.15s ease-out;-webkit-transition:all 0.15s ease-out;-o-transition:all 0.15s ease-out;
.selectelement_activeborder-color:#599EFE;border-width:2px;border-radius:3px 3px 0 0;z-index:2;padding:0 19px 0 9px;border-bottom:0;
.selectelement_active .showNavdisplay:block;
.selectelement_active .icon_comsborder-color:#fff #fff #ccc #fff;border-color:#fff #fff #ccc #fff\9;top:3px;
.selectelement .bgoverflow:hidden;height:2px;background:white;margin-top:-2px;
</style>
<div class="selectelement" onclick="oSelect.init(event,this)">
<span>当前选项是什么么么</span>
<div class="showNav" onclick="oSelect.select_target(event,this);">
<div class="bg"></div>
<ul>
<li>栏栏栏栏栏栏栏栏栏</li>
<li>栏目1</li>
<li>栏目22222222222222222222</li>
<li>栏目33333333</li>
<li>栏目</li>
<li>栏</li>
<li>1</li>
<li>100</li>
</ul>
</div>
<b class="icon_coms"></b>
</div>
<script type="text/javascript" >
var oSelect =
init:function(ev,that)
var ev = ev || event;
var oBg=getByClass(that,"bg")[0];
if(hasClass(that,"selectelement_active"))
removeClass(that,"selectelement_active");
else
addClass(that,"selectelement_active");
ev.cancelBubble=true;
oBg.style.width=that.offsetWidth-4+"px";
oSelect.oEl(that);
,
select_target:function( ev,that )
var li = that.getElementsByTagName("li");
var oBg = that.getElementsByTagName("div")[0];
var ev = ev || window.event;
var oSpan = prev(that);
var target = ev.target || ev.srcElement;
if( target.nodeName.toLowerCase() == "li" )
for(var i=0;i<li.length;i++)
li[i].className="";
oSpan.innerhtml=target.innerHTML.toString();
target.className="active";
removeClass(target.parentNode.parentNode,"selectelement_active");
oBg.style.width=that.parentNode.offsetWidth-4+"px";
ev.cancelBubble=true;
,
oEl:function(that)
document.onclick=function()
removeClass(that,"selectelement_active");
//class
function getByClass( oParent,sClass )
var oParents=oParent||document;
var aEle=oParents.getElementsByTagName("*");
var aResult=[];
var reg=new RegExp("\\b"+sClass+"\\b","i");
for(var i=0;i<aEle.length;i++)
if(reg.test(aEle[i].className))
aResult.push(aEle[i]);
return aResult;
/*判断class是否存在*/
function hasClass( obj,sClass )
var oDiv=null;
if( typeof(obj) == "object" )
oDiv=obj;
else if( obj.charAt(0)=="#" )
oDiv=$$( obj.substring( 1 ));
var oClass=oDiv.className;
if(oClass)
if(oClass.indexOf( sClass )>0)
return true;
else
return false;
else
return false;
/*添加样式*/
function addClass( obj,sClass )
var oDiv=null;
if( typeof( obj ) == "object" )
oDiv=obj;
else if( obj.charAt(0) == "#" )
oDiv=$$( obj.substring(1) );
var oClass=oDiv.className;
if( oClass )
if( oClass.indexOf(sClass)<0 )
oDiv.className=oClass+" "+sClass;
else
oDiv.className=sClass;
/*移除当前class*/
function removeClass( obj,sClass )
var oDiv=null;
if( typeof(obj) =="object" )
oDiv=obj;
else if(obj.charAt(0)=="#")
oDiv=$$(obj.substring(1));
var oClass=oDiv.className;
if(oClass&&oClass.indexOf(sClass)>0)
oDiv.className=oClass.replace(sClass,"");
</script> 参考技术A http://www.codefans.net/soft/19040.shtml
自己看看追问
这个我看过了!下载不了!!
这个插件也不支持onchange事件!
有什么办法吗?
额。我想想啊
以上是关于有没有人用过 jquery 美化下拉列表的插件 jQuery.SelectBox.js ???有问题咨询的主要内容,如果未能解决你的问题,请参考以下文章
第一个jquery插件,下拉列表(很简单,后续有需要再添加)