jquery仿QQ登錄賬號(hào)選擇下拉框效果

更新時(shí)間：2016年03月22日 14:19:34 作者：咖啡機(jī)（K.F.J）

這篇文章主要為大家詳細(xì)介紹了jquery仿QQ登錄賬號(hào)選擇下拉框效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

QQ登錄的時(shí)候，可以選擇以前登錄過(guò)的賬戶，這個(gè)東西也可以在網(wǎng)站登錄的時(shí)候用到，所以我就想做一個(gè)這樣的插件；在網(wǎng)上查了很多，沒(méi)有找到合適自己的，所以決定自動(dòng)制作一個(gè)。

原理就是一個(gè)textbox加一個(gè)ul模擬下拉框，用font模擬一個(gè)下拉按鈕。

一、制作靜態(tài)效果

先用css和html，做出一個(gè)應(yīng)該有的樣子。這里這兩個(gè)我使用的是字體，可以在icomoon網(wǎng)站上面自己制作。用字體的好處是和輸入框定位很方便，而且還可以控制大小顏色等，唯一的不足是IE6和IE7由于不支持:before選擇器，導(dǎo)致無(wú)法顯示這種字體，但可以通過(guò)一些其他方法實(shí)現(xiàn)，大家可以自己嘗試下。下面是html代碼

<span style="display:inline-block;position:relative" class="combox_border">
 <input type="text" class="combox_input"/><font class="ficomoon icon-angle-bottom combox_button" style="display:inline-block"></font>
 <ul style="position:absolute;top:29px;left:-1px" class="combox_select">
  <li><a href="javascript:void(0)">選項(xiàng)一</a></li>
  <li><a href="javascript:void(0)">選項(xiàng)二</a></li>
  <li><a href="javascript:void(0)">選項(xiàng)三</a></li>
  <li><a href="javascript:void(0)">選項(xiàng)四</a></li>
 </ul>
</span>

1、標(biāo)簽中有style和class，這個(gè)style就是必須屬性，一定要有

2、最外圍是用span來(lái)做包裹的，然后給了個(gè)inline-block屬性，之所以用行內(nèi)元素是為了以后布局的方便，換成塊元素也是可以的，但很多時(shí)候塊元素會(huì)伴隨著float浮動(dòng)等樣式，控制起來(lái)比較麻煩

3、ficomoon icon-angle-bottom在定義字體

4、span的屬性position是relative，下拉我就打算用ul定位來(lái)模擬，ul的position是absolute，top以后可以根據(jù)jquery來(lái)獲取span的高度設(shè)置，left就寫死了

5、li里面的內(nèi)容我加了個(gè)a標(biāo)簽，這里就是想偷懶一下，a標(biāo)簽有個(gè):hover偽類，移上去可以改變CSS，這樣我就能少寫這個(gè)移到內(nèi)容上去變樣式的特效

下面是CSS代碼：

@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot?-fl11l');
 src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'),
  url('fonts/icomoon.woff?-fl11l') format('woff'),
  url('fonts/icomoon.ttf?-fl11l') format('truetype'),
  url('fonts/icomoon.svg?-fl11l#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}
.ficomoon{font-family:'icomoon';}
.icon-angle-top:before {content: "\f102"}.icon-angle-bottom:before {content: "\f103"}
/*下面的可根據(jù)自己的實(shí)際情況做修改*/
.combox_border{border:1px solid #c2c2c2;height:28px;width:245px}
.combox_input{border:0;line-height:25px;height:25px;padding-left: 5px;width:85%;vertical-align: middle;}
.combox_button{width:12%;text-align:center;vertical-align: middle;cursor:pointer;border-left:1px solid #c2c2c2}
.combox_select{border:1px solid #c2c2c2;border-top:0;width:100%}
.combox_select li{overflow:hidden;height:30px;line-height:30px;cursor:pointer;}
.combox_select a {display: block;line-height: 28px;padding: 0 8px;text-decoration: none;color: #666;}
.combox_select a:hover {text-decoration: none;background:#f5f5f5}

這里的combox_border等樣式可以自定義，可以加CSS3樣式美化，我這里就做了個(gè)樸素的樣式。

二、制作JS特效

在做JS的時(shí)候，碰到個(gè)奇怪的問(wèn)題，就是放在任何瀏覽器中都不會(huì)報(bào)錯(cuò)，但是在IE6死活提示未設(shè)置的對(duì)象屬性的錯(cuò)誤，最后發(fā)現(xiàn)是因?yàn)閖s文件編碼的問(wèn)題，不是UTF-8，改變下編碼就可以了。

先是一個(gè)jquery插件格式

(function($){
  $.fn.combox = function(options) {
   
  };
})(jQuery);

然后是添加默認(rèn)參數(shù)

var defaults = { 
    borderCss: "combox_border", 
    inputCss: "combox_input", 
    buttonCss: "combox_button", 
    selectCss: "combox_select",
    datas:[]
};
var options = $.extend(defaults, options);

然后是一個(gè)渲染的方法

this.each(function() {
  var _this = $(this);
  _this = _initBorder(_this);//初始化外框CSS IE6中需要有返回值
  _this = _initInput(_this);//初始化輸入框
  _initSelect(_this);//初始化下拉列表
});

動(dòng)態(tài)的生成輸入框，按鈕，下拉框，附上樣式和時(shí)間。我將三個(gè)渲染分別放在了三個(gè)函數(shù)中，這樣清晰一點(diǎn)

function _initBorder($border) {//初始化外框CSS
    $border.css({'display':'inline-block', 'position':'relative'}).addClass(options.borderCss);
    return $border;
   }
   
   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"></font>');
    //綁定下拉特效
    $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('<li><a href="javascript:void(0)">'+options.datas[i]+'</a></li>');
    $ul.delegate('li', 'click', function() {
     $border.children(':text').val($(this).text());
     $ul.hide();
     $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//確定的時(shí)候要將下拉的icon改變
    });
    return $border;
   }

三個(gè)函數(shù)中的參數(shù)我都加了個(gè)$符號(hào)，便于自己知道這是一個(gè)jquery對(duì)象。這幾個(gè)函數(shù)中沒(méi)什么技術(shù)難點(diǎn)，都是非常普通自然的邏輯，大家也可以隨時(shí)根據(jù)自己的不同需求改變代碼，插件總共只有50幾行，非常容易修改。

下面是調(diào)用插件：

<script type="text/javascript">
$(document).ready(function() {
 $('#combox').combox({datas:['選項(xiàng)一','選項(xiàng)二','選項(xiàng)三']});
})
</script>
</head>
<body>
　　<span id="combox"></span>
</body>
</html>

一句話就可以了，挺方便的。

補(bǔ)充說(shuō)明：
最近在實(shí)際項(xiàng)目中使用了這個(gè)插件，碰到了些新問(wèn)題：

1.在實(shí)際項(xiàng)目中，最后是要取那個(gè)動(dòng)態(tài)生成的輸入框中的值的，這樣的話就得定位這個(gè)輸入框，可以在默認(rèn)參數(shù)中新增了一個(gè)inputId，控制它

2.如果下拉列表中沒(méi)有內(nèi)容，那就沒(méi)必要調(diào)用_initSelect這個(gè)方法了

if(options.datas.length > 0)
 _initSelect(_this, this);//初始化下拉列表

3.點(diǎn)擊了下來(lái)按鈕后，下拉內(nèi)容顯示，一定要選中某個(gè)內(nèi)容后，才能把下拉框隱藏掉，這個(gè)不太方便，在網(wǎng)上搜索了相關(guān)代碼

//點(diǎn)擊其他地方影藏下拉列表
$(document).click(function(e) {
 e = window.event || e; // 兼容IE7
 var $obj = $(e.srcElement || e.target);
 if($obj.closest($border).length <= 0) {
  $ul.hide();
  $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//確定的時(shí)候要將下拉的icon改變
 }
});

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: