ComboBox

[hunternh 2]

combo.js

/**************************************** Select v1.0						** Autor: Wagner B. Soares			****************************************/Select = function(p,id){	// refêrencia ao próprio combo 	var obj = this;	// container do combo	var parent = document.getElementById(p);	if(isNull(parent)){document.write("Container indefinido!"); return;}	// cria o combo	jQuery(parent).append("<select id=\""+id+"\" name=\""+id+"\"></select>");	// recupera o combo adicionado na tela	var sl = document.getElementById(id);	jQuery(sl).css({"display":"none"});	// variável para verificar se o mouse está sobre o combo	var sobre = false;	// scroll do combo	var llc = jQuery.create("div",{"id":id+"-scroll","class":"scrollContainer"},[]); //scrollContainer	jQuery(llc).css({"visibility":"hidden"});		jQuery(llc).mouseover(function(){sobre = true;});	jQuery(llc).mouseout(function(){sobre = false;});		if(jQuery.browser.msie)	{		jQuery("body").mousedown(function(){if(!sobre){llc.style.visibility = 'hidden';}}); //Para IE	}	else	{		jQuery(window).mousedown(function(){if(!sobre){llc.style.visibility = 'hidden';}}); // Para FireFox	}	// container do texto selecionado no combo	var sc = jQuery.create("div",{"id":"select-"+id,"class":"selectContainer"},[]); //selectContainer		var combo = jQuery.create("table",{"class":"combo"},["tbody",{},[]]);	var row_head = jQuery.create("tr",{},["td",{},["span",{},[]]]);		var cel_head = jQuery.create("td",{"class":"seta"},[" "]);	jQuery(cel_head).click(function()	{		jQuery(llc).css({"visibility":((jQuery(llc).css("visibility") == "hidden") ? "visible" : "hidden")});	});	jQuery(cel_head).mouseover(function(){jQuery(this).css({"background-color":"#E0E0E0"});});	jQuery(cel_head).mouseout(function(){jQuery(this).css({"background-color":"#FFFFFF"});});		jQuery(row_head).append(cel_head);	jQuery("tbody:first",combo).append(row_head);		var combo_body = jQuery.create("table",{"class":"combo"},["tbody",{},[]]);	// devolve o indice do item selecionado	this.selectedIndex = function()	{		return sl.selectedIndex;	};	// devolve o valor do item selecionado	this.getValue = function()	{		return sl.options[sl.selectedIndex].value;	};	// devolve o texto do item selecionado	this.getText = function()	{		return sl.options[sl.selectedIndex].text;	};	// seleciona um item pelo indice	this.setSelected = function(x)	{		if(!isInteger(x)){x = 0;}				jQuery("span",combo).html(sl.options[x].text);		sl.options[x].selected = true;	};	// configura os options do combo	this.setOptions = function(t,v,i)	{		if((t == " " || t == "") || (v == " " || v == "")){return;}		jQuery(sl).append(jQuery.create("option",{"value":v},[t]));		var row_body = jQuery.create("tr",{"id":jQuery("tr",combo_body).length},["td",{},["span",{},[t]]]);		if(!isNull(i)) jQuery("span:first",row_body).css({"padding-left":"20px","background": "transparent url("+i+") no-repeat left center"});				jQuery(row_body).mouseover(function(){jQuery(this).css({"background-color":"#000066","color":"#FFFFFF","cursor":"pointer"});});		jQuery(row_body).mouseout(function(){jQuery(this).css({"background-color":"#FFFFFF","color":"#000000"});});		jQuery(row_body).click(function()		{			sl.options[jQuery(this).attr("id")].selected = true;						jQuery("span:first",combo).html(jQuery("span:first",this).html());			jQuery(llc).css({"visibility":"hidden"});			try			{				obj.Change();			}			catch(e){alert(e.description);}		});		jQuery("tbody:first",combo_body).append(row_body);	};	// executa uma ação quando um option é selecionado	this.Change = function(){};	// desenha o combo na tela	this.draw = function()	{		jQuery(sc).append(combo);		jQuery(llc).append(combo_body);		jQuery(sc).append(llc);		jQuery(parent).append(sc);				jQuery("span:first",combo).html(sl.options[sl.selectedIndex].text);				jQuery(combo_body).css({"width":(combo_body.offsetWidth+20)+'px'});		jQuery(sc).css({"width":(combo_body.offsetWidth)+'px'});		jQuery(combo).css({"width":(combo_body.offsetWidth)+'px'});		if(sl.options.length > 5)		{			jQuery(llc).css({"height":"100px","overflow":"auto","width":(combo_body.offsetWidth+17)+'px'});			jQuery(sc).css({"width":(combo_body.offsetWidth+17)+'px'});			jQuery(combo).css({"width":(combo_body.offsetWidth+17)+'px'});		}	};};

combo.css

div.selectContainer{	border: 1px solid #000000;	margin: 0px;	padding: 0px;	text-align: left;	background-color: #FFFFFF;}div.selectContainer table,td{	border-collapse: collapse;	margin: 0px;	padding: 0px;	border: 0px;	font-size: 11px;	font-family: Verdana, Arial, Helvetica, Garamond, sans-serif, serif;}div.selectContainer td span{	margin: 3px;	display: block;}div.scrollContainer{	position: absolute;	margin:0px;	margin-left:-1px;	background-color:#FFFFFF;	border: 1px solid #000000;	font-size: 11px;	font-family: Verdana, Arial, Helvetica, Garamond, sans-serif, serif;}div.selectContainer td.seta{	cursor: pointer;	width: 17px; /* 2px bigger than image */	background: url(arrow.gif) no-repeat center center;   /* arrow image, 15x15px */}

[hunternh 2]

Quando eu colocar novas funcionalidades, eu atualizo aqui.

[bimonti 0]

Muito bom, ficou excelente, realmente emulou um select, mas qual o objetivo dessa função ? Fica mais fácil formatar uma div do que um select e deixar o site mais atraente ?Porque esse select não pode ser enviardo por um formulário normal, no caso só resgatando o valor selecionado (como foi feito através do alert) e passando por AJAX por exemplo. Além do que perde em acessibilidade, não dá pra usar o teclado pra selecionar as opções.Desculpe se eu perdi algum tópico anterior e falei algo errado, mas tenho que tirar o chapéu, ficou muito bom o script.

[hunternh 2]

Opa vlw.

O objetivo é não ter problemas com sobreposição, o que acontece com a tag select que se sobrepõe aos outros elementos da tela.

Mas eu esqueci de mencinar como utilizar em um fomulário, é o seguinte:

Com php o valor é resgatado da seguinte maneira: $_POST['nome do select'] ou $_GET['nome do select']

Na função Change, coloquei esse exemplos apenas para mostrar o funcionamento e pode ser executada qualquer função dentro do Change funciona do mesmo modo que o onchange da tag select.

 

Em relação a AJAX se você utiliza algo como a função abaixo tb funciona:

 

/**************************Função para retornar os valores de um formulário em uma string para uma requisição**************************/this.mountValues = function(x){ 	var queryString = new Array();	var form = document.getElementById(x);		if(!isNull(form))	{		for (var i = 0; i < form.elements.length; i++)		{ 			if(form.elements[i].type == "text"	   || form.elements[i].type == "password" || 			   form.elements[i].type == "textarea" || form.elements[i].type == "hidden")			{			 	if(form.elements[i].value.length > 0)					queryString[queryString.length] = form.elements[i].name + "=" + form.elements[i].value;			} 			else if (form.elements[i].type == "checkbox" || form.elements[i].type == "radio")			{				if(form.elements[i].checked == true)					queryString[queryString.length] = form.elements[i].name + "=" + form.elements[i].value; 			}			else if(form.elements[i].type == "select-one")			{				queryString[queryString.length] = form.elements[i].name + "=" + form.elements[i].options[form.elements[i].selectedIndex].value;			}			else if(form.elements[i].type == "select-multiple")			{				selected = new Array();					for (var j = 0; j < form.elements[i].options.length; j++)						if (form.elements[i].options[j].selected)							selected.push(form.elements[i].options[j].value);					  				if(selected.length > 0)					queryString[queryString.length] = form.elements[i].name + "=" + selected;				} 		}		return queryString.join("&");	}	else	{	 	alert("Formulário desconhecido!");		return;	}}

[hunternh 2]

Fiz algumas alterações e agora os valores podem ser acessados por getElementById como no ultimo exemplo.

[hunternh 2]

Aew pessoal implementei o fechamento ao clicar fora do combo. Só há um problema, como o IE interpreta o height do corpo até onde vai o conteúdo, para clicar em qualquer lugar do corpo, no css deve ser colocado body{height: 100%}.

 

http://hunternh.110mb.com/exemplos/combo.html

[hunternh 2]

Código totalmente reformulado, agora suportando imagens.

[gtso86 0]

Cara, sou leigo pacas e não entendi muita coisa, teria como você postar um exemplo funcionando (ou pelo menos o arquivo .html que funde o js com o css)?

[hunternh 2]

http://hunternh.110mb.com/exemplos/combo.html mais acima j ahavia postado esse link

[hunternh 2]

Pessoal, reformulei totalmente o combo, agora o mais parecido possível com o select do html:

 

ComboBox