Comments on: Understanding jQuery UI widgets: A tutorial http://bililite.com/blog Thoughts on web design and programming from a very occasional volunteer webmaster Sun, 28 Feb 2010 22:17:06 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Виджеты jQuery UI: учебное пособие http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/comment-page-1/#comment-1299 Виджеты jQuery UI: учебное пособие Tue, 23 Feb 2010 11:15:19 +0000 http://bililite.com/blog/?page_id=286#comment-1299 [...] Нестрогий перевод статьи Understanding jQuery UI widgets: A tutorial. [...] [...] Нестрогий перевод статьи Understanding jQuery UI widgets: A tutorial. [...]

]]> By: rob http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/comment-page-1/#comment-1295 rob Sun, 21 Feb 2010 20:41:43 +0000 http://bililite.com/blog/?page_id=286#comment-1295 great, thanks..that finally somebody understands the f*kn pain of the plugindevelopment! br rob great, thanks..that finally somebody understands the f*kn pain of the plugindevelopment!

br
rob

]]> By: Danny http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/comment-page-1/#comment-1268 Danny Sun, 14 Feb 2010 03:27:37 +0000 http://bililite.com/blog/?page_id=286#comment-1268 @Pipeman: Technically, jQuery UI is a project independent from jQuery itself, so you can write plugins without UI, but I agree. Saving state is so often useful that I almost always start my plugins from a UI widget. The problem is that if you aren't using the whole UI, you are including a huge amount of unnecessary stuff, so you may want to include just the widget code (which has been refactored out in release candidate 1.8 in <a href="http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.widget.js" rel="nofollow">jquery.ui.widget.js</a>. --Danny @Pipeman:
Technically, jQuery UI is a project independent from jQuery itself, so you can write plugins without UI, but I agree. Saving state is so often useful that I almost always start my
plugins from a UI widget. The problem is that if you aren’t using the whole UI, you are including a huge amount of unnecessary stuff, so you may want to include just the widget code (which has been refactored out in release candidate 1.8 in jquery.ui.widget.js.
–Danny

]]> By: Danny http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/comment-page-1/#comment-1267 Danny Sun, 14 Feb 2010 03:22:25 +0000 http://bililite.com/blog/?page_id=286#comment-1267 @Kragen Javier Sitaker: Yes, <code>this._foo</code> works for private data. <code>this._getData('foo')</code> actually uses <code>this.options.foo</code> so it can be used for both private data and public options (with <code>$(selector).widget('option', 'foo')</code>). I tried to keep the tutorial as limited as possible; for all the details I would look at the source code (<a href="http://jquery-ui.googlecode.com/svn/tags/1.7.2/ui/ui.core.js" rel="nofollow">jquery-ui.googlecode.com/svn/tags/1.7.2/ui/ui.core.js</a> for the most recent release version); it's not that complicated. Be aware, though, that many things are changing for <a href="http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.widget.js" rel="nofollow">version 1.8</a>. I'll try to update the tutorial when it is officially released (meaning when it's on the Google Ajax API server). --Danny @Kragen Javier Sitaker:
Yes, this._foo works for private data. this._getData('foo') actually uses this.options.foo so it can be used for both private data and public options (with $(selector).widget('option', 'foo')). I tried to keep the tutorial as limited as possible; for all the details I would look at the source code (jquery-ui.googlecode.com/svn/tags/1.7.2/ui/ui.core.js for the most
recent release version); it’s not that complicated.
Be aware, though, that many things are changing for version 1.8. I’ll try to update the tutorial when it is officially released (meaning when it’s on the Google Ajax API server).
–Danny

]]> By: Pipeman http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/comment-page-1/#comment-1264 Pipeman Sat, 13 Feb 2010 11:33:05 +0000 http://bililite.com/blog/?page_id=286#comment-1264 Amazing, I can't believe they don't mention this widget structure in the 'authoring a plugin' docs - this is essential for plugins with states - many thanks & a link to this should definitely go here: http://docs.jquery.com/Plugins/Authoring Amazing, I can’t believe they don’t mention this widget structure in the ‘authoring a plugin’ docs – this is essential for plugins with states – many thanks & a link to this should definitely go here: http://docs.jquery.com/Plugins/Authoring

]]> By: Kragen Javier Sitaker http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/comment-page-1/#comment-1262 Kragen Javier Sitaker Thu, 11 Feb 2010 15:31:06 +0000 http://bililite.com/blog/?page_id=286#comment-1262 Thanks for the excellent tutorial! I just wrote my first jQuery UI widget using it (nothing useful to anyone else, at the moment...) At some point I got confused by the text, "$.widget defines two more functions that let us store and retrieve data for each instance individually: _setData and _getData," and ended up using _setData and _getData to set and get some widget-private data: this._setData('foo', something). Then I realized that I could just use this._foo = something, and my life got easier. It may not be worthwhile incorporating this into the tutorial — if you incorporate a clarification for everything anyone ever gets confused by, you will end up with something like the unusably-verbose Perl documentation — but I submit it for your consideration. Thanks for the excellent tutorial! I just wrote my first jQuery UI widget using it (nothing useful to anyone else, at the moment…)

At some point I got confused by the text, “$.widget defines two more functions that let us store and retrieve data for each instance individually: _setData and _getData,” and ended up using _setData and _getData to set and get some widget-private data: this._setData(‘foo’, something). Then I realized that I could just use this._foo = something, and my life got easier.

It may not be worthwhile incorporating this into the tutorial — if you incorporate a clarification for everything anyone ever gets confused by, you will end up with something like the unusably-verbose Perl documentation — but I submit it for your consideration.

]]> By: 25 Tutorials and Resources for Learning jQuery UI - Speckyboy Design Magazine http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/comment-page-1/#comment-1117 25 Tutorials and Resources for Learning jQuery UI - Speckyboy Design Magazine Wed, 20 Jan 2010 09:31:34 +0000 http://bililite.com/blog/?page_id=286#comment-1117 [...] Understanding jQuery UI widgets – A tutorial [...] [...] Understanding jQuery UI widgets – A tutorial [...]

]]> By: Danny http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/comment-page-1/#comment-1102 Danny Fri, 08 Jan 2010 16:56:17 +0000 http://bililite.com/blog/?page_id=286#comment-1102 @Lindsay: The only other documentation on building widgets is the <a href="http://jqueryui.com/docs/Developer_Guide" rel="nofollow">official one</a>, which isn't very helpful. That's why I had to write this, as a tutorial for myself! There is no keypress mixin code; you would have to write your own with something like <code class="language-javascript">this.element.bind("keypress."+this.widgetName, function(){...})</code>. The <code>widgetName</code> is there to allow you to unbind your handlers without affecting others. <code>$.ui.keyCode</code> exposes some useful names for key codes; use the <a href="http://dev.jqueryui.com/browser/trunk/ui/jquery.ui.core.js" rel="nofollow">Source</a> to see them. I have some keypress-simulating code in my <a href="/blog/2008/08/20/the-fnsendkeys-plugin/" rel="nofollow">sendkeys plugin</a> that may be helpful. Hope this helps! --Danny @Lindsay:
The only other documentation on building widgets is the official one, which isn’t very helpful. That’s why I had to write this, as a tutorial for myself! There is no keypress mixin code; you would have to write your own with something like
this.element.bind("keypress."+this.widgetName, function(){...}). The widgetName is there to
allow you to unbind your handlers without affecting others. $.ui.keyCode exposes some useful names for key codes; use the Source to see them.

I have some keypress-simulating code in my sendkeys plugin that may be helpful.

Hope this helps!

–Danny

]]> By: Lindsay http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/comment-page-1/#comment-1101 Lindsay Thu, 07 Jan 2010 19:36:19 +0000 http://bililite.com/blog/?page_id=286#comment-1101 Hi Danny. First I wanted to say a huge thank you for this tutorial. It is one of the only ones I have found that goes into detail about how to use the jQuery widget framework and has been extremely helpful to me. You mention the ui.core "mixin" for the mouse. Do you know if there is also one for keypress events? And, is there any documentation out there that details those extensions and any others that are available via ui.core? I have had a heck of a time finding documentation on the jQuery ui that doesn't involve the widgets they have prebuilt. Any help is much appreciated! Thanks again for the tutorial! Hi Danny. First I wanted to say a huge thank you for this tutorial. It is one of the only ones I have found that goes into detail about how to use the jQuery widget framework and has been extremely helpful to me.

You mention the ui.core “mixin” for the mouse. Do you know if there is also one for keypress events? And, is there any documentation out there that details those extensions and any others that are available via ui.core? I have had a heck of a time finding documentation on the jQuery ui that doesn’t involve the widgets they have prebuilt. Any help is much appreciated!

Thanks again for the tutorial!

]]> By: Bryan Berry http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/comment-page-1/#comment-1100 Bryan Berry Tue, 05 Jan 2010 10:57:50 +0000 http://bililite.com/blog/?page_id=286#comment-1100 Awesome tutorial, tks a lot. Awesome tutorial, tks a lot.

]]>