jquery仿QQ登入帳號選擇下拉框效果，jquery下拉框

jquery仿QQ登入帳號選擇下拉框效果，jquery下拉框

QQ登入的時候，可以選擇以前登入過的賬戶，這個東西也可以在網站登入的時候用到，所以我就想做一個這樣的外掛程式；在網上查了很多，沒有找到合適自己的，所以決定自動製作一個。

原理就是一個textbox加一個ul類比下拉框，用font類比一個下拉按鈕。

一、製作靜態效果

先用css和html，做出一個應該有的樣子。這裡這兩個我使用的是字型，可以在icomoon網站上面自己製作。用字型的好處是和輸入框定位很方便，而且還可以控制大小顏色等，唯一的不足是IE6和IE7由於不支援:before選取器，導致無法顯示這種字型，但可以通過一些其他方法實現，大家可以自己嘗試下。下面是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)">選項一</a></li>    <li><a href="javascript:void(0)">選項二</a></li>    <li><a href="javascript:void(0)">選項三</a></li>    <li><a href="javascript:void(0)">選項四</a></li>  </ul></span>

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代碼：

@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"}/*下面的可根據自己的實際情況做修改*/.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樣式美化，我這裡就做了個樸素的樣式。

 二、製作JS特效

在做JS的時候，碰到個奇怪的問題，就是放在任何瀏覽器中都不會報錯，但是在IE6死活提示未設定的對象屬性的錯誤，最後發現是因為js檔案編碼的問題，不是UTF-8，改變下編碼就可以了。

先是一個jquery外掛程式格式

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

然後是添加預設參數

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

然後是一個渲染的方法

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

動態產生輸入框，按鈕，下拉框，附上樣式和時間。我將三個渲染分別放在了三個函數中，這樣清晰一點

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');//確定的時候要將下拉的icon改變        });        return $border;      }

三個函數中的參數我都加了個$符號，便於自己知道這是一個jquery對象。這幾個函數中沒什麼技術痛點，都是非常普通自然的邏輯，大家也可以隨時根據自己的不同需求改變代碼，外掛程式總共只有50幾行，非常容易修改。

下面是調用外掛程式：

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

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

補充說明：
最近在實際項目中使用了這個外掛程式，碰到了些新問題：

1.在實際項目中，最後是要取那個動態產生的輸入框中的值的，這樣的話就得定位這個輸入框，可以在預設參數中新增了一個inputId，控制它

2.如果下拉式清單中沒有內容，那就沒必要調用_initSelect這個方法了

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

3.點擊了下來按鈕後，下拉內容顯示，一定要選中某個內容後，才能把下拉框隱藏掉，這個不太方便，在網上搜尋了相關代碼

//點擊其他地方影藏下拉式清單$(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');//確定的時候要將下拉的icon改變  }});

以上就是本文的全部內容，希望對大家學習javascript程式設計有所協助。

您可能感興趣的文章:

• Jquery操作下拉框(DropDownList)實現取值賦值
• 利用jQuery實現可輸入搜尋文字的下拉框
• jquery及原生js擷取select下拉框選中的值樣本
• jquery動態載入select下拉框範例程式碼
• 一個簡單的jquery的多選下拉框(自寫)
• JQuery打造省市下拉框聯動效果
• jQuery操作select下拉框的text值和value值的方法
• 基於jquery實現的可編輯下拉框實現代碼
• jQuery製作簡潔的多級聯動Select下拉框
• jQuery+easyui中的combobox實現下拉框特效