Neki od načina da se napravi sopstveno rešenje za padajući izbornik.
Kako se uz pomoć CSS-a ne može uticati na izgled “kombo-boksa”, ideja je bila zamaskirati postojeći boks običnim “input” poljem. Rešenja koja sam našao na internetu nisu bila od pomoći jer sam morao da imam kontrolu nad drugim događajima. U ovom primeru korišćene su metode iz jQuery biblioteke.
Najpre iniciramo događaj:
js:
$().ready(function() {
/**
* napravi combo box-ove
* ovo mora na pocetku da bi pohvatao evente
*/
$(“.combo”).each(function(){
var elem = $(this);
var elem_id = elem.attr(‘id’);
var elem_value = $(“#” + elem_id + ” option:selected”).text();
var elem_width = elem.width() + ‘px’;
if (elem_width == ‘0px’) elem_width = elem.css(‘width’);
var attr_r = elem[0].attributes;
var elem_attrs = ”;
for(var i=0;i<attr_r.length;i++) {
if (attr_r[i].nodeValue!==null && attr_r[i].nodeValue!==false && attr_r[i].nodeValue!==” && attr_r[i].nodeValue!==0)
elem_attrs += ‘ ‘ + attr_r[i].nodeName + ‘=”‘ + attr_r[i].nodeValue + ‘”‘;
}
elem.replaceWith(‘<span onclick=”combobox(\” + elem_id + ‘\’);”>’+ ‘<input id=”‘ + elem_id + ‘_mask” readonly=”readonly” type=”text” value=”‘ + elem_value + ‘” /><span>’+ ”+ elem.html() + ‘</span></span>’); })
});
Ovaj deo treba da ide na početak skripte, pre nego što se dodele ostali događaji (events).
Sledi izvršni deo, kontrola događaja
/**
* combobox emulation
*/
combobox = function(elemname){
var elem = document.getElementById(elemname);
var holder = document.getElementById(elemname+’_mask’);
var dd = elem.selectedIndex;
var ss = elem[dd].text;
holder.active = true;
if (elem.style.display == ‘block’){
elem.size = 0;
elem.style.display = ‘none’;
elem.blur();
holder.value = ss;
} else {
if (!elem.length || elem.length<2) return false;
elem.style.display = ‘block’;
var el_len = elem.length;
if (el_len>9) el_len=9;
elem.size = el_len;
elem.focus();
$(holder).mouseover(function () {
holder.active = true
});
$(holder).mouseout(function () {
holder.active = false;
});
$(elem).blur(function () {
if (holder.active) return;
$(this).css(‘display’,’none’).size = 0;
});
}
}
i na kraju stil…
css:
.combobox{
float:left;
margin-right:5px;
}
.combobox span{
position:relative;
display:block;
}
.combobox select{
position:absolute; left:2px; z-index:9999;
display:none;
}
.combobox input{
background:url(selector.gif) no-repeat right top #fff;
cursor:default;
}
.combobox input:hover{
background:url(selector.gif) no-repeat right bottom #fff;
}
Prilagođeni izbornik pozivate dodavanjem klase “combo” u “select” elementu. Naravno, primremite sličicu za selector.gif…
Npr:
<select name=”primer” class=”combo”><option></option></select>
Ovo je jedno od rešenja koje sam primenio na sajtovima. O ostalim načinima uskoro…