弹出式的选择输入框设计

在这个使用jQuery生成的弹出选择框输入，我们使用弹出的菜单来取代用户输入过程，生成效果如下：

HTML

<div class="career">
    <input type="text" name="test" value="选择职业" class="field" readonly="readonly" />
    <ul class="list">
        <li>前端开发</li>
        <li>Java开发</li>
        <li>.Net开发</li>
        <li>数据库DBA</li>
    </ul>
</div>

CSS

body{
  font-family:arial;
  font-size:12px;
}
.career { position:relative;margin-top:50px;}
.career .field {
    width:300px; background:#EC6603; color:#fff; padding:5px; border:none; cursor:pointer;
    font-family:'lucida sans unicode',sans-serif; font-size:1em;
    border:solid 1px #EC6603;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.career .field:hover {
    border:solid 1px #fff;
    -moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.career>ul.list { display:none;
    position:absolute; left:30px; top:-30px; z-index:999;
    width:300px;
    margin:0; padding:10px; list-style:none;
    background:#fff; color:#333;
    border: 1px solid #888;
    -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
    -moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.career>ul.list li {
    padding:10px;
    border-bottom: solid 1px #ccc;
}
.career>ul.list li:hover {
    background:#EC6603; color:#fff;
}
.career>ul.list li:last-child { border:none }

 

Javascript

(function($){
    $.fn.styleddropdown = function(){
        return this.each(function(){
            var obj = $(this);
            obj.find('.field').click(function() { //onclick event, 'list' fadein
            obj.find('.list').fadeIn(400);
            
            $(document).keyup(function(event) { //keypress event, fadeout on 'escape'
                if(event.keyCode == 27) {
                obj.find('.list').fadeOut(400);
                }
            });
            
            obj.find('.list').hover(function(){ },
                function(){
                    $(this).fadeOut(400);
                });
            });
            
            obj.find('.list li').click(function() { //onclick event, change field value with selected 'list' item and fadeout 'list'
            obj.find('.field')
                .val($(this).html())
                .css({
                    'background':'#fff',
                    'color':'#333'
                });
            obj.find('.list').fadeOut(400);
            });
        });
    };
})(jQuery);

如何调用？

$(function(){
    $('.career').styleddropdown();
});

 转：http://gbin1.com/gb/share/2420.htm

 

转载于:https://www.cnblogs.com/leejersey/p/3438557.html