Como ejecutar funciones como jquery

pato12 · #1 (**permalink**) 04/04/2009, 18:21

Hola,
Quisiera saber como hacer como jQuey que activa sus funcuiones como:
$('#id').mifuncion();
Gracias
Salu2

David · #2 (**permalink**) 04/04/2009, 18:27

No entendí exactamente lo que quieres, ¿lo de $? ¿mifuncion()?

pato12 · #3 (**permalink**) 04/04/2009, 18:31

Hola,
Viste la funcion queme ayudaste a crear hace rato ($css). Queiro en ves de usarla:
$css('id_div',{color:'#ffffff'});
sea
$('id_div').$css({color:'#ffffff'}); como en jQuery.
Gracias
Salu2

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

Creo que te referís al encadenamiento (chaining). Se logra extendiendo los objetos para agregarle funcionalidad y haciendo que cada una de estas extensiones retorne el mismo objeto. Un ejemplo reducido:

Código PHP:

  <!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=utf-8" />
<title></title>
<script>
var fw=(function(){
    var metodosPrivados={
        css:function(prop,valor){
            if(!valor)
                return this.style[prop];
            else
                 this.style[prop]=valor;
            return this;
        },
        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;
            }
            return this;
        }
    }
    return {
        extend:function(molde,obj){
            for(var i in molde)
                obj[i]=molde[i];
            return obj;
        },
        get:function(id){
            return fw.extend(metodosPrivados,document.getElementById(id))
        }
    }
})();
var $=fw.get;
onload=function(){
    $('p').css('backgroundColor','orange').css('width','500px').addEvent('click',function(){this.css('backgroundColor','red');});
}
</script>
</head>

<body>
<div id="p" style="background-color:#F00">test</div>
</body>
</html>

Notar el return this en cada funcionalidad agregada.
pato12, un favor: usá títulos más descriptivos así le sirven a alguien que use el buscador del foro.

pato12 · #5 (**permalink**) 05/04/2009, 08:38

Hola,
Muchas gracias!.
Ya le cambio el titulo.
Salu2

Panino5001 · #6 (**permalink**) 05/04/2009, 08:49

Gracias por cambiar el título! Por las dudas, aclaro que hay otras formas de hacer lo mismo. Ejemplo:

Código PHP:

  <!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=utf-8" /> 
<title></title> 
<script> 
function css(p,v){ 
    if(!v) 
        return this.style[p] 
    this.style[p]=v; 
    return this; 
} 
 
function $(x){ 
    document.getElementById(x).css=function(){ 
            return css.apply(document.getElementById(x),[].slice.call(arguments)); 
    } 
    return document.getElementById(x); 
} 
onload=function(){ 
    $('p').css('backgroundColor','orange').css('width','500px'); 
} 
</script> 
</head> 
 
<body> 
<div id="p" style="background-color:#F00">test</div> 
 
</body> 
</html>