$.fn.smart = function (design) {
design = design || {};
return this.each(function (i, g) {
$(this).hide().after('<div class="smartoption"><div class="smartheader"></div><div class="smartoptions" style="display:none; position: absolute; height: 200px; overflow-y: scroll;"></div></div>');
// Добавление DIV'-а для каждого OPTION
$('option', this).each(function () {
$('div.smartoptions').eq(i).append('<div>' + this.innerHTML + '</div>');
});
// Настройка отступов
var pos = $('div.smartheader').eq(i).position();
$('div.smartoptions').eq(i).css({
left: pos.left,
top: pos.top + (design.width || '20px')
}).find('div').click(function () {
$('option:contains("' + this.innerHTML + '")', g).selected(),
$(this).parent().hide(),
$('div.smartheader').eq(i).html(this.innerHTML);
});
// Настройка содержимого первого DIV'-а
$('div.smartheader').eq(i).html($('option:first', this).html()).click(function () {
$('div.smartoptions').eq(i).toggle();
});
// Настройка CSS-стилей всех элементов
$('div.smartheader, div.smartoptions div').css({
width: design.width || '100px',
height: design.height || '20px',
backgroundColor: design.bg || '#555',
color: design.color || '#FFF',
cursor: 'pointer'
}).hover(function () {
$(this).css({
backgroundColor: design.hbg || '#eee',
color: design.hcolor || '#000'
});
},
function () {
$(this).css({
backgroundColor: design.bg || '#555',
color: design.color || '#FFF'
});
});
});
};
При нажатии на заголовок у остальных имитированных <option> непонятно откуда берётся отступ в ~50000 пикселей. Почему?
