jQuery模拟带有滚动条的select下拉菜单代码官方网站yabo88.com
select下拉菜单十分常用，但是自带的控件非常粗糙，难以满足实际需要，如果下拉选项太多的话，也会影响使用体验，本章节就分享一个模拟实现的select下拉菜单，同时下拉选项带有滚动条效果。
代码官方网站yabo88.com如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.gaodaima.com/" /> <title>模拟实现带有滚动条的下拉菜单</title> type="text/css"> .select_box { ??width:150px; ??position:relative; ??margin:10px; ??padding:0; ??font-size:12px; } .submit_box { ??width:180px; ??position:relative; ??margin:10px; ??padding:0; ??font-size:12px; ??text-align:center; } ul, li { ??list-style-type:none; ??padding:0; ??margin:0 } .select_box input { ??cursor:pointer; ??display:block; ??line-height:25px; ??width:100%; ??height:25px; ??overflow:hidden; ??border:1px solid #ccc; ??padding-right:20px; ??padding-left:10px; } .select_box ul { ??width:180px; ??position:absolute; ??left:0; ??top:25px; ??border:1px solid #ccc; ??background:#fff; ??overflow: hidden; ??display:none; ??background:#ebebeb; ??z-index:99999; } .select_box ul li { ??display:block; ??height:30px; ??overflow:hidden; ??line-height:30px; ??padding-left:5px; ??width:100%; ??cursor:pointer; } .hover{background:#ccc;} src="http://libs.baidu.com/jquery/1.9.0/jquery.js"> type="text/javascript"> $(document).ready(function(){ ??$(".select_box input").click(function(){ ????var thisinput=$(this); ????var thisul=$(this).parent().find("ul"); ????if(thisul.css("display")=="none"){ ??????//显示出来滚动条 ??????if(thisul.height()>200){ ????????thisul.css({height:"200"+"px","overflow-y":"scroll" }) ??????}; ??????thisul.fadeIn("100"); ??????thisul.hover(function(){},function(){thisul.fadeOut("100");}); ??????//连续多个事件 ??????thisul.find("li").click(function(){ ????????thisinput.val($(this).text()); ????????thisul.fadeOut("100"); ??????}).hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");}); ????} ????else{ ??????thisul.fadeOut("fast"); ????} ??}) }); </head> <body> <div class="select_box"> ??<input id="myselect" type="text" value="--请选择--" readonly="readonly"> ??<ul class="select_ul"> ????<li>搞代码一</li> ????<li>搞代码二</li> ????<li>搞代码三</li> ????<li>搞代码四</li> ????<li>搞代码五</li> ????<li>搞代码六</li> ????<li>搞代码七</li> ????<li>搞代码八</li> ????<li>搞代码九</li> ??</ul> </div> </body> </html> |
以上代码实现我们的需要，点击可以弹出下拉项，并且带有滚动条效果。
原创文章，转载请注明： 转载自搞代码
微信 赏一包辣条吧~
支付宝 赏一听可乐吧~
发表评论