项目需要,要做一个首字母快速定位的select,代码如下:
HTML
<div class="select_country" unselectable="on" style="-moz-user-select:none;" onselectstart="return false;"> <div class="cy_title"> <span class="cy_name">English</span> <i></i> </div> <div class="cy_wrap" style="display:none;"> <div class="letter_search"> <i></i> <input class="q_txt" type="text" name="quick_find" placeholder="Quick Find"> </div> <ul class="cy_list"> <li class="cy_active"><a href="javascript:void(0);">English</a></li> <li><a href="javascript:void(0);">French</a></li> <li><a href="javascript:void(0);">German</a></li> <li><a href="javascript:void(0);">Swedish</a></li> <li><a href="javascript:void(0);">Esperanto</a></li> <li><a href="javascript:void(0);">Arabic</a></li> <li><a href="javascript:void(0);">Myanmar (Burmese)</a></li> </ul> </div> </div>
CSS
.select_country{width:350px; margin-left:60px; position: relative; z-index: 10;} .select_country .cy_title{ position: relative; width:320px; height: 14px; line-height: 14px; padding: 8px 20px 8px 10px; border: 1px solid #ddd; cursor: pointer;} .select_country .cy_title i{ position: absolute; top: 12px; right: 10px; width:0; height: 0; border-width: 5px 5px 0; border-style: solid; border-color: #333 transparent transparent transparent;} .select_country .cy_wrap{ position: absolute; top: 31px; left: 0; width:350px; line-height: 24px; border: 1px solid #ddd; background: #fff;} .select_country .cy_wrap .cy_list{ width:350px; height: 168px; overflow-y:scroll; line-height: 24px;} .select_country .cy_wrap .cy_list li{ padding: 0 5px;} .select_country .cy_wrap .cy_list li a{ display: block; padding-left: 5px; line-height: 24px; text-decoration: none;} .select_country .cy_wrap .cy_list li a:hover, .select_country .cy_wrap .cy_list li.cy_active a{ color: #fff; background: #6189f2;} .select_country .cy_wrap .letter_search{ margin: 6px; padding: 2px; overflow: hidden; border: 1px solid #ccc; border-radius: 4px;} .select_country .cy_wrap .letter_search i{ display: block; float: left; width: 24px; height: 24px; background: url(../images/search-24.png) no-repeat;} .select_country .cy_wrap .letter_search input.q_txt{ float: left; width: 300px; padding-left: 5px; height: 24px; line-height: 24px; border:none;}
JQ
$('.cy_title').click(function(){ if ($('.cy_wrap').is(':visible')){ $('.cy_wrap').hide(function(){ $('html').unbind('click'); }); } else { $('.cy_wrap').show(10,function(){ $('html').bind('click', function(){ if($('.q_txt').is(':focus')){ return false; }else{ $('.cy_wrap').hide(); $('html').unbind('click'); } }) }); } }); $('.cy_list li').click(function(){ $('.cy_name').html($(this).text()); $(this).addClass('cy_active').siblings().removeClass('cy_active'); $('.cy_wrap').toggle(); });