Hi, I originally posted this over at the jquery group but was suggested to post it here instead. I'm really excited about using the ui widget factory and hopefully you can help me get over these initial hurdles.
With help from this tutorial http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/ I started to create my own custom ui objects based on the ui widget factory. I am hoping somebody could help me with the object syntax. ////////////////////////////////////////////////////////// Question 1) Alternate way to call a method of the widget. I am able to call method darker() of my widget using this syntax: $().ready(function() { var aGreen = $('#test4 .target').green4(); $('#test4 .target').green4('darker'); }); For me it is more natural to do the same thing using the below syntax but it does not work. Can someone tell me why it doesn't work and/or show my the best practice approach to create a variable of a widget object instantiation and reference it later. $().ready(function() { var aGreen = $('#test4 .target').green4(); aGreen.darker(); }); /////////////////////////////////////////////////////////////////// Question 2) How make a function return something. Supposing my widget has a getHello() method that returns a "hello" string. How do I call that method of my widget. I tried the below code but it does not work. $().ready(function() { var aGreen = $('#test4 .target').green4(); console.log("response: "+ $('#test4 .target').green4 ('getHello')); }); /////////////////////////////////////////////////////////////////// Question 3) How to pass a parameter to a function. Supposing I have setDarker(value) function that takes a parameter How do I invoke that function. Below is the syntax I hope would work but it doesn't. $().ready(function() { var aGreen = $('#test4 .target').green4(); aGreen.setDarker("big"); }); And finally below is the html code I used for testing, Also a link to the same code is here http://docs.google.com/Doc?docid=0AbxHJxs0V9KvZGRucDVyNnJfMTdmZ3ZmOG4zNA&hl=en Thank you for any help David ////////////////////////////////////////////////////////////////////////////////// <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"; lang="en- US"><head profile="http://gmpg.org/xfn/11";> <title>Hacking at 0300 : Understanding jQuery UI widgets: A tutorial</ title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/ 1.3.2/ jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/ 1.7.2/ jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> $.widget('ui.green4', { getLevel: function () { return this._getData('level'); }, setLevel: function (x) { var greenlevels = this._getData('greenlevels'); var level = Math.floor(Math.min(greenlevels.length-1, Math.max (0,x))); this._setData('level', level); this.element.css({background: greenlevels[level]}); }, _init: function() { this.setLevel(this.getLevel()); }, darker: function() { this.setLevel(this.getLevel()-1); }, setDarker: function(value){console.log("value: "+value)}, getHello: function(){"hello"}, lighter: function() { this.setLevel(this.getLevel()+1); }, off: function() { this.element.css({background: 'none'}); this.destroy(); } }); $.ui.green4.defaults = { level: 15, greenlevels: ['#000','#010','#020','#030','#040','#050','#060','#070','#080','#090','#0a 0','#0b0','#0c0','#0d0','#0e0','#0f0', '#fff'] }; </script> <script type="text/javascript"> $().ready(function() { var aGreen = $('#test4 .target').green4(); $('#test4 .target').green4('darker'); }); </script> </head> <body> <div id ="test4"> <p class="target" >This is a test paragraph</p> </div> </body> </html> -- You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to jquery...@googlegroups.com. To unsubscribe from this group, send email to jquery-ui+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.
