弹出式的选择输入框设计

在这个使用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