Checkbox dentro de un select

sofway · #1 (**permalink**) 11/04/2009, 16:53

Buenas tardes a todos.

Necesito tener un listado de checkbox dentro de una lista desplegable.

Se que no es posible utilizando el control normal select, sino con alguna especie de div que los contenga y le de un comportamiento similar al de un select.

El único framework que puedo utilizar es mootools.

Gracias por la ayuda

David · #2 (**permalink**) 11/04/2009, 19:04

Tal vez te resultará más práctico usar una lista de selección múltiple:

Código html:

Ver original<select multiple="multiple">
    <option value="1">Primera opción</option>
    <option value="2">Segunda opción</option>
    <option value="3">Tercera opción</option>
</select>

sofway · #3 (**permalink**) 11/04/2009, 19:09

Gracias David, pero no me sirve. Necesito que la lista se despliegue

Panino5001 · #4 (**permalink**) 11/04/2009, 20:08

Quizá te sirva algo así:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style>
*{ margin:0px; padding:0px; outline:none;}
#lista{ width:200px;; margin: 50px;font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; visibility:hidden}
#lista dt{ border: 1px solid #000; background-color:#666; color:#FFF;  padding-left:3px; margin-top:3px; line-height:16px}
#lista dd{ padding:3px; border-bottom:1px solid #000;border-left:1px solid #000; border-right:1px solid #000; overflow:hidden}
body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;}
#flecha{border-bottom:0; border-right:6px solid #666; border-top:7px solid #FFF; border-left:6px solid #666; width:0; height:0; position:relative; left:175px; top:-10px}
</style>

<script>
var EvRegister=[]; 
var panino=(function(){
/* ---- métodos privados ---- */
	var metodosPrivados={
		addEvent: function(type, fn ) {
			if ( this.addEventListener ) {
				this.addEventListener( type, fn, false );
			} else if(this.attachEvent){
				var _this=this;
				var f= function(){fn.call(_this,window.event);}
				this.attachEvent( 'on'+type, f);
				this[fn.toString()+type]=f;
			}else{
				this['on'+type]=fn;
			}
			var ev={_obj:this,_evType:type,_fn:fn};
    		window.EvRegister.push(ev);
			return this;
		},
		removeEvent: function(type, fn ) {
			if( this.removeEventListener){
				this.removeEventListener( type, fn, false );
			}
    		else if(this.detachEvent){
				this.detachEvent('on'+type,this[fn.toString()+type]);
				this[fn.toString()+type]=null;
			}
			else{
	 	 		this['on'+type]=function(){};
			}
			for (var ii= 0, l=window.EvRegister.length; ii < l ; ii++) {
        		if (window.EvRegister[ii]._evType== type && window.EvRegister[ii]._obj==this && window.EvRegister[ii]._fn==fn) {
            		window.EvRegister.splice(ii, 1);
            		break;
					
        		}
    		} 
    		return this;
   		 },
		 css:function(propiedad,valor){
		 	if(!valor)
				return this.style[propiedad];
			this.style[propiedad]=valor;
			return this;
		 },
		 hover:function(a,b){
		 	this.addEvent('mouseover', a );
			this.addEvent('mouseout', b );
			return this;
		 },
		 alfa:function(value){
			this.style.opacity = value;
    		this.style.MozOpacity = value;
    		this.style.KhtmlOpacity = value;
    		this.style.filter = 'alpha(opacity=' + value*100 + ')';
    		this.style.zoom=1;
			return this;
		},
		toggle:function(a,b){
			this.style.display=this.style.display=='none'?'block':'none';
			if(!!a && !!b)
				a.parentNode.replaceChild(b,a);
			return this;
		},
		extendido:true
		 
	}
/* ---- métodos públicos ---- */
	return{
		extend:function(el,obj){
			if(el.extendido && el!=metodosPrivados)return el;
			for(var i in obj)
				el[i]=obj[i];
			return el;
		},
		get:function(id){
			if(!document.getElementById(id))return false;
			return panino.extend(document.getElementById(id),metodosPrivados);
		},
		getO:function(obj){
			return panino.extend(obj,metodosPrivados);
		},
		add:function(obj){
			panino.extend(metodosPrivados,obj);
		}
	}	
})();
function unregisterAllEvents() {
    while (EvRegister.length > 0) {
        panino.getO(EvRegister[0]._obj).removeEvent(EvRegister[0]._evType,EvRegister[0]._fn);
    }
}
var $=panino.get;
panino.getO(window).addEvent('unload',unregisterAllEvents);

function Acordeon(id,abierto){
	this.abierto=abierto || 0;
	this.id=id;
	this.init=function(){
		var _this=this;
		for(var i=0,els; els=$(this.id).getElementsByTagName('dt')[i];i++){
			var maxExpand=$(this.id).getElementsByTagName('dd')[i].offsetHeight;
			if(!this.abierto || this.abierto!=i+1){
				$(this.id).getElementsByTagName('dd')[i].style.height=0;
				$(this.id).getElementsByTagName('dd')[i].style.display='none';
				$(this.id).getElementsByTagName('dd')[i].creciendo=1;
			}else{
				$(this.id).getElementsByTagName('dd')[i].creciendo=0;
				$(this.id).getElementsByTagName('dd')[i].style.height=maxExpand+'px';
			}
			
			(function(){
				var _maxExpand=maxExpand;
				var numero=i;
				panino.getO(els).addEvent('click',function(){_this.efectuar(_maxExpand,numero);}).css('cursor','pointer');
				panino.getO(window).addEvent('unload',function(){$(_this.id).getElementsByTagName('dd')[numero].t=null;$(_this.id).getElementsByTagName('dd')[numero].creciendo=null;});
			})()
		}
		$(this.id).css('visibility','visible');
	}
	this.efectuar=function(maximo,elemento){
		var _this=this;
		if($(_this.id).getElementsByTagName('dd')[elemento].t!=null && typeof $(_this.id).getElementsByTagName('dd')[elemento].t!='undefined' && $(_this.id).getElementsByTagName('dd')[elemento].t.done_!=true)return;
		var inicio=parseInt($(this.id).getElementsByTagName('dd')[elemento].style.height);
		var fin= $(_this.id).getElementsByTagName('dd')[elemento].creciendo ? maximo  : 0; 
		$(_this.id).getElementsByTagName('dd')[elemento].creciendo=!$(_this.id).getElementsByTagName('dd')[elemento].creciendo;
		$(_this.id).getElementsByTagName('dd')[elemento].t=new Transition(SineCurve, 500, function(percentage) {
			if(fin<inicio){
				var delta=inicio-fin;
    			$(_this.id).getElementsByTagName('dd')[elemento].style.height=(inicio-(percentage*delta))+'px';
			}
			else{
				var delta=fin-inicio;
				$(_this.id).getElementsByTagName('dd')[elemento].style.height=(inicio+(percentage*delta))+'px';
			}
			if(parseInt($(_this.id).getElementsByTagName('dd')[elemento].style.height)<1)
				$(_this.id).getElementsByTagName('dd')[elemento].style.display='none';
			else
				$(_this.id).getElementsByTagName('dd')[elemento].style.display='block';
			});
		$(_this.id).getElementsByTagName('dd')[elemento].t.run();
	}
	
}
function Transition(curve, milliseconds, callback) {
		this.done_=false;
    	this.curve_ = curve;
    	this.milliseconds_ = milliseconds;
    	this.callback_ = callback;
    	this.start_ = new Date().getTime();
		this.run=function() {
			var _this=this;
   			if(!this.hasNext()) {
				window['globalIntervalo']=0;
				return;
			}
    		this.callback_(this.next());
			setTimeout(function(){_this.run.call(_this);}, 0);
		}
		this.hasNext=function() {
    		if(this.done_)
				return false;
    		var now = new Date().getTime();
    		if ((now - this.start_) > this.milliseconds_) {
       			this.done_ = true;
    		}
    		return true;
		}
		this.next=function() {
    		var now = new Date().getTime();
    		var percentage = Math.min(1, (now - this.start_) / this.milliseconds_);
			return this.curve_(percentage);
		}
}

function SineCurve(percentage) {
	return (1 - Math.cos(percentage * Math.PI)) / 2;
}
onload=function(){
var t=new Acordeon('lista');
t.init();
}
</script>
</head>

<body>

<form id="form1" name="form1" method="post" action="">
<dl id="lista">
<dt>seleccionar<div id="flecha"></div></dt>
<dd>
<input name="" type="checkbox" value="" /> uno<br />

<input name="" type="checkbox" value="" /> dos<br />

<input name="" type="checkbox" value="" /> tres<br />

<input name="" type="checkbox" value="" /> cuatro
</dd>
</dl>

</form>
</body>
</html>

sofway · #5 (**permalink**) 11/04/2009, 20:10

Panino!!! eres lo máximo!
Ya mismo trato de implementarlo en mi sistema. Te contaré como me va

platini_07 · #6 (**permalink**) 04/09/2010, 10:07

Hola que tal, panino esta muy bien tu código.. Pero queria que la lista desplegable se generara con un for:Each y no lo logro hacer, se genera un error, sabes cual es la causa..? Espero respondas.. Gracias por el codigo..