Накатал небольшой плагинчик:
(function($){
$.fn.select = function(opt){
// предварительно
def = {
"list":{},
};
set = $.extend({},def,opt);
var $this = $(this);
return this.each(function(){
// наполнение
for(i in opt.list){
$this.append('<li val="'+i+'">'+opt.list[i]+'</li>');
}
// стиль
$this.addClass('jquery_select');
$this.children('li').addClass('jquery_select_off');
// выбор
$.test = function(){alert('test');}
$this.children('li').toggle(
function(){
index = $this.children('li').index(this);
$this.children('li:eq('+index+')').removeClass('jquery_select_off').addClass('jquery_select_on');
},
function(){
index = $this.children('li').index(this);
$this.children('li:eq('+index+')').removeClass('jquery_select_on').addClass('jquery_select_off');
}
);
});
}
})(jQuery);
ul.jquery_select {padding:0px;list-style:none;width:100%;overflow:auto;height:100px;background:#E6E6E6;border-left:1px solid #A61919;}
ul.jquery_select li {cursor:pointer;padding:0px 13px 0px 13px;}
li.jquery_select_off {border-bottom:1px solid #D9D9D9;border-top:1px solid #F2F2F2;}
li.jquery_select_on {background:#A61919;color:#fff;border-bottom:1px solid #991717;border-top:1px solid #B31B1B;}
В данный момент работает, но он не завершен. Для полного счастья хочется получать выбранные элементы при каждом клике через callback функцию. Следуя логике я делаю так:
(function($){
$.fn.select = function(opt){
// предварительно
def = {
"list":{},
"func":function(){}
};
set = $.extend({},def,opt);
var $this = $(this);
return this.each(function(){
// наполнение
for(i in opt.list){
$this.append('<li val="'+i+'">'+opt.list[i]+'</li>');
}
// стиль
$this.addClass('jquery_select');
$this.children('li').addClass('jquery_select_off');
// выбор
$.test = function(){alert('test');}
$this.children('li').toggle(
function(){
index = $this.children('li').index(this);
$this.children('li:eq('+index+')').removeClass('jquery_select_off').addClass('jquery_select_on');
set.func.call(this);
},
function(){
index = $this.children('li').index(this);
$this.children('li:eq('+index+')').removeClass('jquery_select_on').addClass('jquery_select_off');
set.func.call(this);
}
);
});
}
})(jQuery);
И вот казалось бы:
$('#select').select({
"list":["Россия","Украина","Беларусь","Болгария","Словакия","Словения"],
"func":function(dat){alert(dat);}
});
<ul id="select"></ul>
но, стоит только поместить функцию обратного вызова в нутрь какого либо события и она перестаёт работать.
Буду рад услышать ваши мысли по данному вопросу.