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>