|
|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
jQuery+css美化select样式插件：
先看效果图：
代码：
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>selectbox</title>
- <style type="text/css">
- body{font-family:"宋体","simsun",Arial,Helvetica,sans-serif;}
- /*select*/
- .hdMainBar{background:none repeat scroll 0 0 #f6f8f9;height:40px;overflow:visible;width:430px;margin:10px auto;font-size:14px;}
- .ui-searchInput{position:relative;display:inline-block;height:10px; margin-top:5px;}
- .t_header_search{background:none repeat scroll 0 0 white !important;border:1px solid #E2E9EF;filter:none;height:29px;position:absolute;width:338px;z-index:10;margin-left:15px;}
- .jquery-selectbox{position:absolute;height:29px;width:98px !important;z-index:0;float:left;display:inline;color:#444;padding:0;background-color:#fff;background-image:-webkit-gradient(linear,left top,left bottom,from(#fefefe),to(#eaeaea));background-image:-webkit-linear-gradient(top,#fefefe,#eaeaea);background-image:-moz-linear-gradient(top,#fefefe,#eaeaea);background-image:-ms-linear-gradient(top,#fefefe,#eaeaea);background-image:-o-linear-gradient(top,#fefefe,#eaeaea);background-image:linear-gradient(top,#fefefe,#eaeaea);}
- .jquery-selectbox .selecthover{z-index:700;}
- .jquery-selectbox .jquery-selectbox-currentItem{padding:4px 0 5px 12px;white-space:nowrap;display:block;overflow:hidden;position:absolute;top:4px;z-index:-1;cursor:pointer;}
- .jquery-selectbox .jquery-selectbox-list{display:none;top:30px;background:#fff;width:97px !important;padding-top:4px;overflow-x:hidden;overflow-y:auto;z-index:1000;border:1px solid #E2E9EF;color:#444;margin-left:-1px;}
- .jquery-selectbox .jquery-selectbox-moreButton{float:right;width:97px;height:29px;cursor:pointer;background:url(http://www.phpin.net/data/attachment/forum/201405/04/180130b5x52kfppfq2xxxc.gif) 81px 12px no-repeat;z-index:1;border-right:1px solid #E2E9EF;_width:94px;}
- .jquery-selectbox .jquery-selectbox-item.listelementhover{background:#eaeaea;}
- .jquery-selectbox .jquery-selectbox-item{display:block;cursor:pointer;padding-left:12px;padding-top:2px;padding-bottom:2px; line-height:18px;}
- #searchInput{border:0 none;width:238px;position:absolute;left:98px;height:26px;top:1px;line-height:26px;outline:none;font-size:14px;}
- .ui_btn_go{position:absolute;left:340px;top:0px;border:none;background:url(http://www.phpin.net/data/attachment/forum/201405/04/180131pqiidx02qzifftbx.gif) no-repeat;width:66px;height:31px;margin-top:-1px;}
- /*select*/
- </style>
- </head>
- <body>
- <form action="">
- <div class="hdMainBar">
- <div class="ui-searchInput">
- <div class="t_header_search">
- <div class="jquery-selectbox">
- <div class="jquery-selectbox-moreButton"></div>
- <select id="searchCategory">
- <option>广告信息</option>
- <option>旅游购物</option>
- <option>餐饮娱乐</option>
- <option>房产汽车</option>
- <option>教育医疗</option>
- <option>品牌综合</option>
- </select>
- <input type="text" value="" name="key" id="searchInput" />
- <input type="submit" name="" value="" class="ui_btn_go" />
- </div>
- </div>
- </div>
- </div>
- </form>
- <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
- <script type="text/javascript">
- /*jquery.selectbox插件*/
- jQuery.fn.selectbox=function(options){var settings={className:'jquery-selectbox',animationSpeed:20,listboxMaxSize:10,replaceInvisible:false};var commonClass='jquery-custom-selectboxes-replaced';var listOpen=false;var showList=function(listObj){var selectbox=listObj.parents('.'+settings.className+'');listObj.slideDown(settings.animationSpeed,function(){listOpen=true;});selectbox.addClass('selecthover');jQuery(document).bind('click',onBlurList);return listObj;};
- var hideList=function(listObj){var selectbox=listObj.parents('.'+settings.className+'');listObj.slideUp(settings.animationSpeed,function(){listOpen=false;jQuery(this).parents('.'+settings.className+'').removeClass('selecthover');});jQuery(document).unbind('click',onBlurList);return listObj;};
- var onBlurList=function(e){var trgt=e.target;var currentListElements=jQuery('.'+settings.className+'-list:visible').parent().find('*').andSelf();if(jQuery.inArray(trgt,currentListElements)<0&&listOpen){hideList(jQuery('.'+commonClass+'-list'));}return false;};settings=jQuery.extend(settings,options||{});return this.each(function(){var _this=jQuery(this);if(_this.filter(':visible').length==0&&!settings.replaceInvisible) return;
- var replacement=jQuery('<div class="'+settings.className+' '+commonClass+'">'+'<div class="'+settings.className+'-moreButton" />'+'<div class="'+settings.className+'-list '+commonClass+'-list" />'+'<span class="'+settings.className+'-currentItem" />'+'</div>');jQuery('option',_this).each(function(k,v){var v=jQuery(v);var listElement=jQuery('<span class="'+settings.className+'-item value-'+v.val()+' item-'+k+'">'+v.text()+'</span>');listElement.click(function(){var thisListElement=jQuery(this);var thisReplacment=thisListElement.parents('.'+settings.className);var thisIndex=thisListElement[0].className.split(' ');for(k1 in thisIndex){if(/^item-[0-9]+$/.test(thisIndex[k1])){thisIndex=parseInt(thisIndex[k1].replace('item-',''),10);break;}};var thisValue=thisListElement[0].className.split(' ');for(k1 in thisValue){if(/^value-.+$/.test(thisValue[k1])){thisValue=thisValue[k1].replace('value-','');break;}};thisReplacment.find('.'+settings.className+'-currentItem').text(thisListElement.text());thisReplacment.find('select').val(thisValue).triggerHandler('change');var thisSublist=thisReplacment.find('.'+settings.className+'-list');if(thisSublist.filter(":visible").length>0){hideList(thisSublist);}else{showList(thisSublist);}}).bind('mouseenter',function(){jQuery(this).addClass('listelementhover');}).bind('mouseleave',function(){jQuery(this).removeClass('listelementhover');});jQuery('.'+settings.className+'-list',replacement).append(listElement);if(v.filter(':selected').length>0){jQuery('.'+settings.className+'-currentItem',replacement).text(v.text());}});replacement.find('.'+settings.className+'-moreButton').click(function(){var thisMoreButton=jQuery(this);var otherLists=jQuery('.'+settings.className+'-list').not(thisMoreButton.siblings('.'+settings.className+'-list'));hideList(otherLists);var thisList=thisMoreButton.siblings('.'+settings.className+'-list');if(thisList.filter(":visible").length>0){hideList(thisList);}else{showList(thisList);}}).bind('mouseenter',function(){jQuery(this).addClass('morebuttonhover');}).bind('mouseleave',function(){jQuery(this).removeClass('morebuttonhover');});_this.hide().replaceWith(replacement).appendTo(replacement);var thisListBox=replacement.find('.'+settings.className+'-list');var thisListBoxSize=thisListBox.find('.'+settings.className+'-item').length;if(thisListBoxSize>settings.listboxMaxSize);thisListBoxSize=settings.listboxMaxSize;if(thisListBoxSize==0)thisListBoxSize=1;var thisListBoxWidth=Math.round(_this.width()+5);var rchrome=/(chrome)[ \/]([\w.]+)/;var ua=navigator.userAgent.toString().toLowerCase();if(jQuery.support.safari&&!rchrome.exec(ua))thisListBoxWidth=thisListBoxWidth*1.2;replacement.css('width',thisListBoxWidth+'px');thisListBox.css({width:Math.round(thisListBoxWidth+46)+'px',height:thisListBoxSize+0+'em'});});};
- jQuery.fn.unselectbox=function(){var commonClass='jquery-custom-selectboxes-replaced';return this.each(function(){var selectToRemove=jQuery(this).filter('.'+commonClass);selectToRemove.replaceWith(selectToRemove.find('select').show("fast"));});}
- /*jquery.selectbox插件*/
- /*执行*/
- $(document).ready(function(){
- $("#searchCategory").selectbox();
- })
- </script>
- </body>
- </html>
用到的图片：
实例打包：
jQuery美化select样式.rar
(35.59 KB, 下载次数: 2)
|
|
发表于 2014-5-4 18:02:09
