自写Jquery插件 Combobox

时间:2024-04-29 01:03:18

原创文章,转载请注明出处,https://www.cnblogs.com/GaoAnLee/p/9092421.html

上效果

自写Jquery插件 Combobox

html

<span id='combobox' class='combobox'>城市</span>
<span id='combobox1' class='combobox'>城市</span>

css

@CHARSET "UTF-8";
body, html {
height: 100%;
} ul, li {
list-style: none;
} .combobox {
-webkit-border-radius: 5px 5px;
-moz-border-radius: 5px 5px;
-ms-border-radius: 5px 5px;
-o-border-radius: 5px 5px;
border-radius: 5px 5px;
display: inline-block;
} .combobox+i, #dropdown-list {
position: absolute;
} .combobox, #dropdown-list {
border: 1px solid #AAAAAA;
} .combobox, #dropdown-list>li {
text-align: left;
padding: 0 10px;
} .combobox, .combobox+i, #dropdown-list>li {
cursor: pointer;
font-size: 13px;
} #dropdown-list {
display: none;
} #dropdown-list>li {
color: #ffffff;
background-color: #42485b;
display: block;
}

jquery.combobox.js

/*
* combobox
* authoer:GaoAnLee
* <b id='combobox'></b>
*/
;
(function($, window, document, undefined) {
function _init(combobox, b, options) {
var _this = combobox.element;
var obj = document.getElementById(options.id);
var r = new Array();
if (b) {
_this.css('width', options.width).css('height', options.height).css('line-height', options.height + 'px');
r['x'] = _this.position().top;
r['y'] = _this.position().left;
var t = {
'height': _this.outerHeight(),
'width': _this.outerWidth()
};
_this.parent().css('position', 'relative');
_this.after('<i class=\"fa fa-caret-down dropdown-icon\"></i>');
$(options.combobox).next().css('left', r['y'] + t.width - 30).css('top', r['x'] + 8);
warpList(options, r, t);
}
actions(options);
} function warpList(options, r, t) {
var len = options.list.length;
var buffer = '';
buffer += '<ul id=\"dropdown-list\">';
for (var i = 0; i < len; i++) {
buffer += '<li>' + options.list[i] + '</li>';
}
buffer += '</ul>';
$(options.combobox).next().after(buffer);
$(options.combobox).next().next().css('left', r['y'] + 2).css('top', r['x'] + t.height - 1);
$(options.combobox).next().next().children('li').css('width', options.width + 1).css('height', options.height).css('line-height', options.height + 'px');
} function actions(options) {
$(options.combobox).on('click', function(event) {
var value = $(options.combobox).next().next().css('display');
if (value == 'block') {
$(options.combobox).css('border-radius', '5px 5px 5px 5px');
$(options.combobox).next().next().slideUp('fast');
} else {
$(options.combobox).css('border-radius', '5px 5px 0 0');
$(options.combobox).next().next().slideDown('fast');
}
event.stopPropagation(); //关键在于阻止冒泡
});
$(options.combobox).next().on('click', function(event) {
var value = $(options.combobox).next().next().css('display');
if (value == 'block') {
$(options.combobox).css('border-radius', '5px 5px 5px 5px');
$(options.combobox).next().next().slideUp('fast');
} else {
$(options.combobox).css('border-radius', '5px 5px 0 0');
$(options.combobox).next().next().slideDown('fast');
}
event.stopPropagation(); //关键在于阻止冒泡
});
$(options.combobox).next().next().on('mouseover', 'li', function() {
$(this).css('background-color', '#00C1DE');
});
$(options.combobox).next().next().on('mouseout', 'li', function() {
$(this).css('background-color', '#42485b');
});
$(options.combobox).next().next().on('click', 'li', function() {
var value = $(this).html();
$(options.combobox).html(value);
$(options.combobox).next().next().slideUp('fast');
});
$(document).on('click', function() {
$(options.combobox).css('border-radius', '5px 5px 5px 5px');
$(options.combobox).next().next().slideUp('fast');
});
}
var Combobox = function(e, options) {
this.element = e,
this.defaults = {
width: 100,
height: 30,
combobox: '#combobox',
id: 'combobox'
},
this.options = $.extend({}, this.defaults.options);
};
Combobox.prototype = { };
$.fn.myCombobox = function(target, parm) {
var combobox = new Combobox(this, target);
var options = {};
if (typeof target == 'string' && typeof parm == 'string') {
return combobox[target](parm);
}
if (typeof target == 'string' && typeof parm == 'object') {
options = $.extend({}, combobox.defaluts, parm);
return combobox[target](options);
}
var state = $.data(this, target.id);
if (state) {
options = $.extend({}, state.options, target);
} else {
options = $.extend({}, combobox.defaluts, target);
}
$.data(this, target.id, {
options: options
});
this.each(function() {
_init(combobox, true, options);
});
};
})(jQuery, window, document); $(function() {
var list = ['北京', '上海', '深圳', '广州', '厦门', '杭州', '成都', '重庆'];
$('#combobox').myCombobox({
list: list, //必填
width: 100,
height: 30,
combobox: '#combobox', //必填
id: 'combobox' //必填
}); //加载启动
$('#combobox1').myCombobox({
list: list, //必填
width: 100,
height: 30,
combobox: '#combobox1',
id: 'combobox1'
}); //加载启动 });