Comunidad de diseño web y desarrollo en internet online

Pluing Jquery Ayuda

Citar            
MensajeEscrito el 05 Ene 2011 09:04 pm
Hola:
Estuve haciendo unos script con jquery es como un pluing para crear botones XD (jquery tiene su propia ui pero no la quiero usar XD) aqui les dejo el codigo. asta ahora anda perfecto.

Pero ,es decir, crea los botones, le aplica el estilo y los eventos,etc, anda perfecto.
E aqui el problema: No se como hacer para agrgarle una propiedad a mi pluing ej:

El Pluing se utiliza de este modo :) :

Código Javascript :

$().ready(function() {
   $("#Boton1").button({label:"Continuar >",toggle:false,defaultClass:{
                     default:"ui-button-blue-default",
                     active:"ui-button-blue-active"}
                    })
         
   $("#Boton2").button({label:"Salir de la aplicacion",toggle:true});
   
   $("#Boton3").button();
   
   $("#Boton4").button().click(function(){
                     alert("Click Boton4");
                  });
         
   
});

Los botones se crean son parecidos a los del facebook XD

Pero como tengo que hacer para que el pluing tambien tenga metodos ,es decir, en caso de que quiera poner un boton como disabled seria:

Código Javascript :

  $("#Boton4").button.disabled() // <- Boton ya creado
o
   $("#Boton4").button({label:"Mi texto del boton"}).disabled()


Es decir, que sea un metodo de mi pluing jquery

Ese metodo anda agregando en el code del pluing

Código Javascript :

    $.fn.button.disabled= function () {  // Aqui la funcion };


anda e puesto un alerta y todo y anda cando pongo "$("#Boton4").button.disabled()" pero cuando dentro utilizo

Código Javascript :

$.fn.button.disabled= function () {
   $(this).attr("id") // este es un ejemplo e probado de todo Me da un error.
 };



Código Javascript :

(function($) {
    $.fn.button =function( options ) { 
   
     var options = $.extend({},$.fn.button.defaults, options);
    
     $(this).attr("toggle",options.toggle);
      
     return this.each(function() {  
        $(this).addClass(options.defaultClass.default);
      // Obtiene las propiedades en caso de q sea un boton
        if($(this).attr("type")=="button" || $(this).attr("type")=="reset" || $(this).attr("type")=="submit"){
         options.label= (options.label==null && $(this).attr("value")!="")? $(this).attr("value") : options.label;
         $(this).attr("value",options.label);
         $(this).css("height","22px");
      }
      
      if(options.toggle){ 
          $(this).attr("toggle",true);
         $(this).toggle(
           function () {
            $(this).addClass(options.defaultClass.active);
            $(this).attr("select",true);
           },
           function () {
            $(this).removeClass(options.defaultClass.active);
            $(this).attr("select",false);
           }
         );  
         if(options.defaultClass.hover!=null){
            $(this).bind({
                mouseout: function() {
                  $(this).removeClass(options.defaultClass.hover);
                },
                mouseover: function() {
                  $(this).addClass(options.defaultClass.hover);
                }
            });
         }
      }else{
         $(this).bind({
             mousedown: function(){
               $(this).addClass(options.defaultClass.active);
              },
               mouseup: function(){
               $(this).removeClass(options.defaultClass.active);
               },
             mouseout: function() {
               $(this).removeClass(options.defaultClass.active);
             }
         });
         if(options.defaultClass.hover!=null){
            $(this).bind({
                mouseout: function() {
                  $(this).removeClass(options.defaultClass.active);
                  $(this).removeClass(options.defaultClass.hover);
                },
                mouseover: function() {
                  $(this).addClass(options.defaultClass.hover);
                }
            });
         }
      }
     });  
   
  };

       $.fn.button.disabled= function () {
             alert("anda");
        $(this).attr("id") // este es un ejemplo e probado de todo Me da un error.
        };
    $.fn.button.defaults = {  
            label: null,
            toggle: false,
            disabled: false,
            defaultClass:{
               default:"ui-button-default",
               hover:null,
               active:"ui-button-active",
               disabled:"ui-button-disabled"
            }
   };  
   
})(jQuery);


Algien tiene alguna idea de porque no anda $(this), e intentado con "css","addClass","removeClass" y nada :( esa funcion
disabled tiene que cambiar el estilo el boton pero no me deja.

aquie les dejo los archivos http://rapidshare.com/files/440995362/Cross.button.rar

Por bycross02

16 de clabLevel



 

chrome
Citar            
MensajeEscrito el 05 Ene 2011 09:22 pm
al poner $.fn.botton.disabled en el pluguin y $(this) dento de la funcion no funciona poruque $(this) hace referencia a la funcion
$.fn.botton() y no al objeto.

Ese es en parte el problema, como aria para q $(this) aga referencia al objeto y no a la funcion $.fn.botton()
???

Por bycross02

16 de clabLevel



 

chrome
Citar            
MensajeEscrito el 05 Ene 2011 09:56 pm
lo solucione poniendo en el pluing (Puse hide para probar XD)

Código Javascript :

$.fn.button.disabled= function(src){
      $(src).hide();
   }


y se utiliza:

Código Javascript :

      
   $("#Div").button({label:"My boton"});
   $.fn.button.disabled("#Div"); <- lo hace invisible 
   


Alguien conose una manera mas elegante para hacerlo ??? GRACIAS desde ya :)

Por bycross02

16 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.