Sido van Gennip

I like to create things that make people smile.

It’s nice to have some options, in your custom UI Widget that is!

So yesterday we created a little flashcard widget with jQuery UI. One side had a question, click on it and the answer was shown. Wouldn’t it be cool if it had a timer, so the answer will be shown automatically within a couple of seconds. Of course we want this time to be adjustable so it can be match to your experience. This is where the widget options come in.

First let add the behavior to show the answerer after a certain time. For this we will use the setTimeout() function, which takes a callback and time in milliseconds. So we add the following to _create():
```
JS
 setTimeout(function() {
   widget.show();
 }, 5 * 1000);
```
Each Widget come with an options property. JQuery UI will automatically merge these with the object passed when creating the widget. This results in the following code:
```
JS
 $.widget("ui.flashcard", {
   options: {
     time: 5
   },
   _create: function() {
     setTimeout(function() {
       widget.show();
     }, this.options.time * 1000);
   }
 });
```
Now we can simple set the time of the delay when we create the widget: $("#myFlashcard").flashcard({ time: 10 });. If you don’t it uses the default of 5 defined in the widget code.

Posted 11 months ago

11 notes

Tags: jquery, ui, widget, factory,
1. molecules0de liked this
2. moraitesqu liked this
3. sido posted this

Likes

Photo via humansofnewyork

The Joys of Parenthood

Photo via humansofnewyork
Photo via charliebowater

Another work in progress! I still suck balls as far as environments are concerned, but I’m...

Photo via charliebowater
Photo via hoekhoek

new bowl is making progress!
Rotterdam, Heemraadssingel.

Like ‘em here: ...

Photo via hoekhoek
Photo via boagworld

A great illustration of the relationship between the various roles in web design. Thanks...

Photo via boagworld
Photo via marco

Photo via marco

Following