Jquery-based code for editable drop-down boxes and jquery drop-down boxes

Jquery-based code for editable drop-down boxes and jquery drop-down boxes

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

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) "rel =" external nofollow "=" external nofollow "> Option 1 </a> </ li> <a href = "javascript: void (0) "rel =" external nofollow "=" external nofollow "> Option 2 </a> </ li> <a href = "javascript: void (0) "rel =" external nofollow "=" external nofollow "> Option 3 </a> </ li> <a href = "javascript: void (0) "rel =" external nofollow "=" external nofollow "> 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);

borderCss	The style of the outermost package is the span above
inputCss	Style of the input box
buttonCss	The button style is
selectCss	Style of the drop-down list
datas	Content in the drop-down list

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) "rel =" external nofollow "=" external nofollow "> '+ 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.
Demo: http://demo.jb51.net/js/2014/combox_jquery/
Demo download: http://www.bkjia.com/jiaoben/199034.html

How can I use jquery to implement the drop-down box functions that can be edited like extjs combobox?
Use jquery to remove it and then use jquery to edit a place to add it to the original place.
You can try it. I didn't try it.

Does jquery support any plug-in or plug-in that can be edited in the drop-down box? Is it recommended ??? Online rush
Hello:
You can write a widget for easy and flexible use!

Hope to help you