We'd love to help answer these questions over here: http://groups.google.com/group/jquery-ui
Thanks. - Richard On Mon, Dec 14, 2009 at 7:02 PM, David_ca <david.calling...@gmail.com>wrote: > Hi, > > 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"); > > }); > > BAnd 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<http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/%0Ajquery-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','#0a0','#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> >
