Select a drop-down box for jquery QQ-like login account _ jquery

This article describes in detail how to select a drop-down box for jquery QQ Login Account, which has some reference value. If you are interested, refer to QQ login, you can select an account you have previously logged on to. This item can also be used when you log on to the website, so I want to create such a plug-in. I checked a lot on the Internet, I didn't find a suitable one, so I decided to make one automatically.

PrincipleIt is a textbox with a ul simulated drop-down box, and a drop-down button with font.

I. create static results

First use css and html to make a proper look. Here these two fonts are used and can be created on the icomoon website. The advantage of using a font is that it is convenient to locate the font with the input box and can control the size and color. The only disadvantage is that IE6 and IE7 cannot display the font because they do not support the before selector, however, you can use some other methods. The following is the html code.

    
 
 
    
  
  
Option 1
    
  
  
Option 2
    
  
  
Option 3
    
  
  
Option 4
  
 
 

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

2. the perimeter is wrapped with span, and an inline-block attribute is given. The reason why the in-line element is used for future layout convenience is that it is also possible to replace the block element, however, in many cases, block elements are accompanied by float and other styles, which makes it difficult to control.

3. ficomoon icon-angle-bottom defines the font

4. The position attribute of span is relative. from the drop-down list, I plan to use ul positioning to simulate the position. ul's position is absolute. In the future, I can use jquery to obtain the span Height settings, left is written to death.

5. I added a label a to the content in li. Here I want to be lazy. The label a has a: hover pseudo class. Moving it up can change CSS, in this way, I will be able to write less special effects that move to the content and change the style.

The following is the CSS code:

@ 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"}/* you can modify the following content based on your actual situation */. 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}

Here, combox_border and other styles can be customized, and CSS 3 styles can be added for beautification. Here I have made a simple style.

Ii. Create JS Special Effects

When I was doing JS, I encountered a strange problem, that is, no error will be reported in any browser, but the error message about unset object attributes will be reported in IE6, finally found that because of the js file encoding problem, not the UTF-8, change the encoding can be.

First, a jquery plug-in format

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

Then add the default parameters.

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

Then there is a rendering method.

This. each (function () {var _ this = $ (this); _ this = _ initBorder (_ this ); // return value _ this = _ initInput (_ this) is required in CSS IE6; // initialize the input box _ initSelect (_ this); // initialize the drop-down list });

Dynamically generate input box, button, drop-down box, and attach style and time. I put the three renders in three functions, which is clear.

Function _ initBorder ($ border) {// initialize the CSS extension border.css ({'display': 'inline-Block', 'position': 'relative '}) in the external frame '}). addClass (options. borderCss); return $ border;} function _ initInput ($ border) {// initialize the input box $ border. append (''); $ Border. append (''); // bind the drop-down effect $ 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; // return value required for IE6} function _ initSelect ($ border) {// initialization drop-down list $ border. append ('
 
 

  
  
'); Var $ ul = $ border. children ('ul '); $ul.css ('top', $ border. height () + 1); var length = options. datas. length; for (var I = 0; I
  
   
'+ Options. datas [I] +''); $ Ul. delegate ('lil', 'click', function () {$ border. children (': text '). val ($ (this ). text (); $ ul. hide (); $ border. children ('font '). removeClass ('icon-angle-top '). addClass ('icon-angle-bottom '); // change the icon in the drop-down list}); return $ border ;}
  
 
 

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

The following is the call plug-in: