QQ登录的时候，可以选择以前登录过的账户，这个东西也可以在网站登录的时候用到，所以我就想做一个这样的插件；在网上查了很多，没有找到合适自己的，所以决定自动制作一个。
原理
就是一个textBox加一个ul模拟下拉框，用font模拟一个下拉按钮。
一、制作静态效果
先用css和html，做出一个应该有的样子。这里这两个我使用的是字体，可以在icomoon网站上面自己制作。用字体的好处是和输入框定位很方便，而且还可以控制大小颜色等，唯一的不足是IE6和IE7由于不支持:before选择器，导致无法显示这种字体，但可以通过一些其他方法实现，大家可以自己尝试下。下面是HTML代码
1、标签中有style和class，这个style就是必须属性，一定要有
2、最外围是用span来做包裹的，然后给了个inline-block属性，之所以用行内元素是为了以后布局的方便，换成块元素也是可以的，但很多时候块元素会伴随着float浮动等样式，控制起来比较麻烦
3、ficomoon icon-angle-bottom在定义字体
4、span的属性position是relative，下拉我就打算用ul定位来模拟，ul的position是absolute，top以后可以根据jquery来获取span的高度设置，left就写死了
5、li里面的内容我加了个a标签，这里就是想偷懒一下，a标签有个:hover伪类，移上去可以改变CSS，这样我就能少写这个移到内容上去变样式的特效
下面是CSS代码：
这里的comBox_border等样式可以自定义，可以加CSS3样式美化，我这里就做了个朴素的样式。
二、制作JS特效
在做JS的时候，碰到个奇怪的问题，就是放在任何浏览器中都不会报错，但是在IE6死活提示未设置的对象属性的错误，最后发现是因为js文件编码的问题，不是UTF-8，改变下编码就可以了。
};
})(jQuery);
动态的生成输入框，按钮，下拉框，附上样式和时间。我将三个渲染分别放在了三个函数中，这样清晰一点
function _initInput($border){//初始化输入框
$border.append('<input type="text" class="'+options.inputCss+'"/>');
$border.append('<font class="ficomoon icon-angle-bottom '+options.buttonCss+'" style="display:inline-block">');
//绑定下拉特效
$border.delegate('font','click',function() {
var $ul = $border.children('ul');
if($ul.css('display') == 'none') {
$ul.slideDown('fast');
$(this).removeClass('icon-angle-bottom').addClass('icon-angle-top');
}else {
$ul.slideUp('fast');
$(this).removeClass('icon-angle-top').addClass('icon-angle-bottom');
}
});
return $border;//IE6需要返回值
}
function _initSelect($border) {//初始化下拉列表
$border.append('<ul style="position:absolute;left:-1px;display:none" class="'+options.selectCss+'">');
var $ul = $border.children('ul');
$ul.css('top',$border.height()+1);
var length = options.datas.length;
for(var i=0; i<length ;i++)
$ul.append('
$ul.delegate('li',function() {
$border.children(':text').val($(this).text());
$ul.hide();
$border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//确定的时候要将下拉的icon改变
});
return $border;
}
三个函数中的参数我都加了个$符号，便于自己知道这是一个jquery对象。这几个函数中没什么技术难点，都是非常普通自然的逻辑，大家也可以随时根据自己的不同需求改变代码，插件总共只有50几行，非常容易修改。
下面是调用插件：