Permalink
Browse files

Added example of defining defaults using the widget factory.

  • Loading branch information...
scottgonzalez committed Oct 13, 2011
1 parent a05bc40 commit 38d7e9d5c57a6846c287c82eff35da3fd28b6f80
Showing with 23 additions and 9 deletions.
  1. +5 −5 how-jquery-ui-works.md
  2. +18 −4 why-use-the-widget-factory.md
View
@@ -67,7 +67,7 @@ We can also get the current value for an option.
$( "#elem" ).progressbar( "option", "value" );
-In addition, we can update multiple options at once by passing an object to the option method.
+In addition, we can update multiple options at once by passing an object to the `option` method.
$( "#elem" ).progressbar( "option", {
value: 100,
@@ -79,20 +79,20 @@ The only difference is that you have to pass the string "option" as the first pa
#### disable
-As you might guess, the `disable` method disabled the widget.
+As you might guess, the `disable` method disables the widget.
In the case of progressbar, this changes the styling to make the progressbar look disabled.
$( "#elem" ).progressbar( "disable" );
-Calling the disable method is equivalent to setting the `disabled` option to `true`.
+Calling the `disable` method is equivalent to setting the `disabled` option to `true`.
#### enable
The `enable` method is the opposite of the `disable` method.
$( "#elem" ).progressbar( "enable" );
-Calling teh enable method is equivalent to setting the `disabled` option to `false`.
+Calling the `enable` method is equivalent to setting the `disabled` option to `false`.
#### destroy
@@ -124,7 +124,7 @@ For example, we can bind to progressbar's change event which is triggered whenev
});
Each event has a corresponding callback, which is exposed as an option.
-We could hook into progressbar's `change` callback instead of binding to the `progressbarchange` event, if we wanted to.
+We can hook into progressbar's `change` callback instead of binding to the `progressbarchange` event, if we wanted to.
$( "#elem" ).progressbar({
change: function() {
@@ -25,10 +25,9 @@ removing the boilerplate and creating a consistent API across plugins.
## Consistent API
The widget factory defines how to create and destroy widgets,
-how to get and set options, how to invoke methods,
-and how to listen to events triggered by the widget.
+get and set options, invoke methods, and listen to events triggered by the widget.
By using the widget factory to build your stateful plugins,
-you're automatically conforming to a defined standard,
+you are automatically conforming to a defined standard,
making it easier for new users to start using your plugins.
In addition to defining the interface,
the widget factory also implements much of this functionality for you.
@@ -55,4 +54,19 @@ A common pattern in jQuery plugins looks like this:
};
The widget factory provides this functionality and even takes it a bit further.
-TODO: Talk about passing multiple option hashes on init.
+Let's see what this looks like with the widget factory.
+
+ $.widget( "ns.plugin", {
+
+ // default options
+ options: {
+ param1: "foo",
+ param2: "bar",
+ param3: "baz"
+ },
+
+ _create: function() {
+ // options are already merged and stored in this.options
+ // plugin logic goes here
+ }
+ });

0 comments on commit 38d7e9d

Please sign in to comment.