Dialogs

Besides the <fb:dialog/> FBML tag, you can also use FBJS to render dialogs. FBJS dialogs give you slightly added flexibility that you don’t get from FBML. The way to initiate a dialog box is simply by instantiating a new Dialog object via the DOM. The following are the methods supported by the Dialog class:

Dialog(type)

The constructor for Dialog. Note that type can be one of either Dialog.DIALOG_POP or Dialog.DIALOG_CONTEXTUAL:

Dialog.DIALOG_POP

Renders a dialog box that looks like Figure 4-1.

Dialog.DIALOG_CONTEXTUAL

Renders a dialog box that looks like Figure 4-2.

DIALOG_POP
Figure 4-1. DIALOG_POP
DIALOG_CONTEXTUAL
Figure 4-2. DIALOG_CONTEXTUAL
onconfirm

Event handler that gets triggered when the leftmost button is clicked in the dialog.

oncancel

Event handler that gets triggered when the rightmost button is clicked in the dialog.

setStyle

Sets the style of the parent dialog box.

showMessage(title, content, button_confirm = 'Okay')

Renders a dialog box with just one confirm button, similar to an “alert” box. The title and content can be either pure text or FBML content using a variable from something like <fb:js-string/>.

showChoice(title, content, button_confirm = 'Okay', button_cancel = 'Cancel')

Renders a dialog box with both a confirm and a cancel button. The title and content can be either pure text or FBML content using a variable from something like <fb:js-string/> .

setContext

Useful only with DIALOG_CONTEXTUAL; sets where the pointer of the bubble should point (see Figure 4-2).

hide

Hides the dialog box.

You can initiate a dialog box using something like the following FBML code (this example is taken from the Developer Wiki):

<a href="#" onclick="new Dialog().showMessage
    ('Dialog', 'Hello World.'), return false;">
DIALOG_POP.</a><br />

Alternatively, you could use:

<a href="#" onclick="new Dialog
    (Dialog.DIALOG_CONTEXTUAL).setContext(this).showChoice
    ('Dialog', 'Hello World.', 'Foo', 'Bar'), return false;">
CONTEXTUAL_DIALOG with two buttons: Foo and Bar</a><br />

The first example renders a DIALOG_POPUP when you click on it, similar to the screenshot in Figure 4-1. The second example renders a DIALOG_CONTEXTUAL when you click on it, similar to the screenshot in Figure 4-2.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.223.10