Select the drop-down box for jquery QQ login account, and click the jquery drop-down box.

Select the drop-down box for jquery QQ login account, and click the jquery drop-down box.

When logging on to QQ, you can select an account you have previously logged on to. This item can also be used when logging 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.

<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) "> Option 1 </a> </li> <a href =" javascript: void (0) "> Option 2 </a> </li> <a href =" javascript: void (0) "> Option 3 </a> </li> <a href =" javascript: void (0) "> Option 4 </a> </li> </ul> </span>

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 ('<input type = "text" class = "' + options. inputCss + '"/>'); $ border. append ('<font class = "ficomoon icon-angle-bottom' + options. buttonCss + '"style =" display: inline-block "> </font>'); // 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 ('<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 ('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:

<Script type = "text/javascript"> $ (document ). ready (function () {$ ('# combox '). combox ({datas: ['option 1', 'option 2', 'option 3']});}) </script> 
One sentence is enough, which is quite convenient.
Note:
Recently, this plug-in has been used in actual projects and encountered some new problems:
1. In the actual project, the value in the dynamically generated input box must be obtained. In this way, you must locate the input box and addInputId, Control it
2. If there is no content in the drop-down list, it is unnecessary to call the _ initSelect method.
If (options. datas. length> 0) _ initSelect (_ this, this); // initialize the drop-down list
3. After clicking the drop-down button, the drop-down content is displayed. You must select a content to hide the drop-down box. This is not convenient. You have searched the relevant code online.
// Click the drop-down list of shadow from other places $ (document ). click (function (e) {e = window. event | e; // compatible with IE7 var $ obj = $ (e. srcElement | e.tar get); if ($ obj. closest ($ border ). length <= 0) {$ ul. hide (); $ border. children ('font '). removeClass ('icon-angle-top '). addClass ('icon-angle-bottom '); // change the icon in the drop-down list when you are sure }});
The above is all the content of this article, and I hope it will help you learn javascript programming.
Articles you may be interested in:

 

 
  
Implement value assignment in the drop-down list of Jquery operations
 
  
Use jQuery to implement a drop-down box that allows you to enter Search Text
 
  
Jquery and native js get the selected value example in the select drop-down box
 
  
Sample Code for jquery to dynamically load the select drop-down box
 
  
A simple jquery multi-choice drop-down box (self-writing)
 
  
JQuery creates provincial/municipal drop-down box linkages
 
  
How does jQuery operate the text and value values in the select drop-down box?
 
  
Jquery-based code for editable drop-down boxes
 
  
JQuery creates a simple multi-level linkage Select drop-down box
 
  
Combobox in jQuery + easyui implements drop-down box Effects