jquery imitation QQ login account selection drop-down box effect

When logging in with QQ, you can choose the account you have logged in before. This thing can also be used when logging in to the website, so I want to make a plug-in like this; I searched a lot online and didn’t find one that suits me. So decided to make one automatically.

The principle is to add a textbox and an ul to simulate a drop-down box, and use font to simulate a drop-down button.

1. Create static effects

First use css and html to make it look like it should. The two fonts I use here are fonts that can be made by yourself on the icomoon website. The advantage of using fonts is that it is very convenient to position the input box, and you can also control the size, color, etc. The only disadvantage is that IE6 and IE7 cannot display this font because they do not support the :before selector, but it can be achieved through some other methods. You can try it yourself. The following is the html code

<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>

Copy after login

1. There are style and class in the tag. This style is a required attribute and must have

2. The outermost part is wrapped with span, and then given an inline-block attribute. The reason why inline elements are used is for the convenience of future layout. It is also possible to replace them with block elements, but in many cases block elements will With float and other styles, it is more troublesome to control

3. Ficomoon icon-angle-bottom is defining the font

4. The attribute position of span is relative. I plan to use ul positioning to simulate the drop-down. The position of ul is absolute. In the future, top can get the height setting of span according to jquery, and left is hard-coded

5. I added an a tag to the content in li. I just want to be lazy here. The a tag has a :hover pseudo-class. Moving it up can change the CSS, so I can write less and move it up to the content to change the style. special effects

Here is the CSS code:

@font-face {
  font-family: 'icomoon';
  src:url('fonts/icomoon.eot&#63;-fl11l');
  src:url('fonts/icomoon.eot&#63;#iefix-fl11l') format('embedded-opentype'),
    url('fonts/icomoon.woff&#63;-fl11l') format('woff'),
    url('fonts/icomoon.ttf&#63;-fl11l') format('truetype'),
    url('fonts/icomoon.svg&#63;-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}

Copy after login

Combox_border and other styles here can be customized, and CSS3 styles can be added to beautify them. I made a simple style here.

2. Create JS special effects

When I was doing JS, I encountered a strange problem, that is, no error would be reported in any browser, but in IE6, it would prompt an error of unset object properties. Finally, I found out that it was because of the encoding problem of the js file. , not UTF-8, just change the encoding.

First is a jquery plug-in format

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

Copy after login

Then add default parameters

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

Copy after login

Then there is a rendering method

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

Copy after login

Dynamicly generate input boxes, buttons, drop-down boxes, attach styles and times. I put the three renderings in three functions respectively to make it clearer

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;
      }

Copy after login

I added a $ symbol to the parameters in the three functions so that I can know that this is a jquery object. There are no technical difficulties in these functions. They are all very common and natural logic. You can also change the code at any time according to your own different needs. The plug-in only has a total of 50 lines, which is very easy to modify.

The following is the calling plug-in:

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

Copy after login

It only takes one sentence, which is very convenient.

Additional instructions:
I recently used this plug-in in an actual project and encountered some new problems:

1. In the actual project, the value in the dynamically generated input box must be taken in the end. In this case, the input box must be positioned, and a new inputId can be added to the default parameters. , control it

2. If there is no content in the drop-down list, there is no need to call the _initSelect method

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

Copy after login

3. After clicking the down button, the drop-down content is displayed. You must select a certain content before you can hide the drop-down box. This is not convenient. I searched for relevant codes on the Internet

//点击其他地方影藏下拉列表
$(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改变
  }
});

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.