Homemade jquery editable drop-down box

Yesterday when I saw the QQ login, you can choose to log on the account, this thing can also be used in the site login, so I would like to do a plug-in, on-line search a lot, did not find the right one, so decided to automatically make a.

The principle is a TextBox plus a UL simulation drop-down box, using the font to simulate a drop-down button.

First, the production of static effects

Use CSS and HTML first to make a look. Here are the two I use fonts, can be made on the Icomoon website. The advantage of the font is that the input box is convenient to locate, but also control the size of the color, and so on, the only shortage is IE6 and IE7 because not supported: before selector, resulting in the inability to display this font, but can be achieved through some other methods, you can try it yourself. Here is the HTML code

<spanstyle= "Display:inline-block;position:relative"class= "Combox_border">    <inputtype= "text"class= "Combox_input"/><Fontclass= "Ficomoon icon-angle-bottom Combox_button"style= "Display:inline-block"></Font>    <ulstyle= "position:absolute;top:29px;left:-1px"class= "Combox_select">        <Li><ahref= "javascript:void (0)">Option One</a></Li>        <Li><ahref= "javascript:void (0)">Option two</a></Li>        <Li><ahref= "javascript:void (0)">Option three</a></Li>        <Li><ahref= "javascript:void (0)">Option Four</a></Li>    </ul></span>

1, the label has style and class, this style is a must attribute, must have

2, the most peripheral is to use span to do the package, and then gave a inline-block attribute, the reason is to use the line element is for the sake of the layout of the convenience, changed to block elements is also possible, but many times the block element will be accompanied by float float style, control more trouble

3.Ficomoon icon-angle-bottom in defining fonts

4, the attributes of the span position is relative, pull down I intend to use the UL positioning to simulate, UL position is absolute,top can be based on jquery to obtain the height of the span settings, left to write dead

5, Li inside content I added a label, here is want to lazy, a tag has a: hover pseudo class, move up can change CSS, so I can write less this move to the content to change the style of the effect

Here 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"}/ * The following can bemake changes according to your own 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}

Combox_border and other styles here can be customized, can add CSS3 style beautification, I have done a simple style here.

Second, make JS effect

In doing JS, encountered a strange problem, is placed in any browser will not error, but in IE6 dead and alive hint not set the object property error, the last discovery is because JS file encoding problem, not UTF-8, change the code on it.

First a jquery plugin format

(function($) {        function(options) {                    };}) (jQuery);

Then add the default parameters

 var  defaults = {bordercss:  "Combox_border"  "combox_input" , Buttoncss:  "Combox_button" " c Ombox_select " datas:[]};  var  options = $.extend (defaults, options); 

Bordercss	The outermost style of wrapping is the span above
Inputcss	Style of the input box
Buttoncss	The style of the button is
Selectcss	Style of drop-down list
Datas	Content in the drop-down list

Then there is a rendering method

this. All (function() {      var _this = $ (this);       = _initborder (_this); // A return value is required in the initial textbox CSS IE6      _this = _initinput (_this); // Initialize input box      _initselect (_this); // Initialize the drop-down list});

Dynamic build input box, button, drop down box, attach style and time. I put three renderings in three functions, so it's a little clearer

function_initborder ($border) {//initial textbox CSS$border. css ({' Display ': ' Inline-block ', ' position ': ' relative '}). addclass (OPTIONS.BORDERCSS); return$border; }                        function_initinput ($border) {//Initialize 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>"); //binding Pull 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;//IE6 need return value            }                        function_initselect ($border) {//Initialize 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); varLength =options.datas.length;  for(vari=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 ');//Make sure you change the icon in the dropdown                }); return$border; }

Three parameters in the function I have added a $ symbol to make it easy to know that this is a jquery object. There are no technical difficulties in these functions, are very common natural logic, we can at any time according to their own different needs to change the code, plug-in a total of only 50 lines, very easy to modify.

Here is the call plugin:

<Scripttype= "Text/javascript">$ (document). Ready (function() {    $('#combox'). Combox ({datas:['Option One','option two','option three']});})</Script></Head><Body> 　　 <spanID= "Combox"></span></Body></HTML>

A word on it, very convenient.

Demo Download:

http://download.csdn.net/download/loneleaf1/7703033