设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 2787|回复: 0

[jQuery/Js/AJAX] jQuery+css美化select样式插件

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2014-5-4 18:02:09 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
jQuery+css美化select样式插件:

先看效果图:
演示截图.jpg
代码:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>selectbox</title>
  6. <style type="text/css">
  7. body{font-family:"宋体","simsun",Arial,Helvetica,sans-serif;}
  8. /*select*/
  9. .hdMainBar{background:none repeat scroll 0 0 #f6f8f9;height:40px;overflow:visible;width:430px;margin:10px auto;font-size:14px;}
  10. .ui-searchInput{position:relative;display:inline-block;height:10px; margin-top:5px;}
  11. .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;}
  12. .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);}
  13. .jquery-selectbox .selecthover{z-index:700;}
  14. .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;}
  15. .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;}
  16. .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;}
  17. .jquery-selectbox .jquery-selectbox-item.listelementhover{background:#eaeaea;}
  18. .jquery-selectbox .jquery-selectbox-item{display:block;cursor:pointer;padding-left:12px;padding-top:2px;padding-bottom:2px; line-height:18px;}
  19. #searchInput{border:0 none;width:238px;position:absolute;left:98px;height:26px;top:1px;line-height:26px;outline:none;font-size:14px;}
  20. .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;}
  21. /*select*/
  22. </style>
  23. </head>
  24. <body>
  25. <form action="">
  26. <div class="hdMainBar">
  27. <div class="ui-searchInput">
  28. <div class="t_header_search">
  29. <div class="jquery-selectbox">
  30. <div class="jquery-selectbox-moreButton"></div>
  31. <select id="searchCategory">
  32. <option>广告信息</option>
  33. <option>旅游购物</option>
  34. <option>餐饮娱乐</option>
  35. <option>房产汽车</option>
  36. <option>教育医疗</option>
  37. <option>品牌综合</option>
  38. </select>
  39. <input type="text" value="" name="key" id="searchInput" />
  40. <input type="submit" name="" value="" class="ui_btn_go" />
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </form>
  46. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  47. <script type="text/javascript">
  48. /*jquery.selectbox插件*/
  49. 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;};
  50. 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;};
  51. 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;
  52. 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'});});};
  53. 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"));});}
  54. /*jquery.selectbox插件*/
  55. /*执行*/
  56. $(document).ready(function(){
  57. $("#searchCategory").selectbox();
  58. })
  59. </script>
  60. </body>
  61. </html>
复制代码



用到的图片:
dropdown_icon.gif sousuo.gif

实例打包:

jQuery美化select样式.rar (35.59 KB, 下载次数: 2)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-4 14:08

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表