Editable drop-down box implementation code based on jquery

The principle is to add a textbox to a 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. Here are the two I use fonts, which 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. Below 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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项一</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项二</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项三</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项四</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 many times block elements will be accompanied by float Floating and other styles are 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. 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 special effects of moving it up to the content to change the style.

Below 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

borderCss	最外面包裹的样式，就是上面的span
inputCss	输入框的样式
buttonCss	按钮的样式，就是
selectCss	下拉列表的样式
datas	下拉列表中的内容

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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+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 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.

demo demo: http://demo.jb51.net/js/2014/combox_jquery/

Demo download: http://www.jb51.net/jiaoben/199034.html