FBJS/Examples/Dialogs
From Facebook Developer Wiki
One of the cool features of FBJS is the dialog creation support which lets you create a dialog using our pre-built wrappers. This helps your application maintain the look and feel of Facebook, and saves you a lot of time.
<a href="#" onclick="new Dialog().showMessage('Dialog', 'Hello World.'); return false;">
Vanilla DIALOG_POP.</a><br />
<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 />
<a href="#" onclick="var dialog = new Dialog(Dialog.DIALOG_CONTEXTUAL).setContext(document.getElementById('dialog_test_span')).showChoice('Dialog', 'Hello World.', 'Foo', 'Bar');
dialog.onconfirm = function() {
document.getElementById('dialog_test_span').setTextValue('Foo');
};
dialog.oncancel = function() {
document.getElementById('dialog_test_span').setTextValue('Bar');
};
return false;">
CONTEXTUAL_DIALOG with two buttons: Foo and Bar that responds</a> <span id="dialog_test_span">Here?</span><br />
<script>
function test2(context) {
var dialog = new Dialog(Dialog.DIALOG_CONTEXTUAL).setContext(context).showChoice('Dialog', 'Hello World.', 'Foo', 'Bar');
dialog.onconfirm = function() {
context.setTextValue('Foo');
};
dialog.oncancel = function() {
context.setTextValue('Bar');
};
}
</script>
<a href="#" onclick="test2(document.getElementById('dialog_test_span2')); return false;">
CONTEXTUAL_DIALOG with two buttons: Foo and Bar that responds via function </a> <span id="dialog_test_span2">Here?</span><br />
<a href="#" id="dialog_body" onclick="var dialog = new Dialog().showChoice('Important Dialog', dialog_color, 'Okay', 'Nevermind');
dialog.onconfirm = function() {
var color = document.getElementById('dialog_color_select').getValue();
document.getElementById('dialog_body').setStyle({background: color});
};
return false;">
A dialog that changes your colors...</a><br />
<fb:js-string var="dialog_color">
<b>What color would you like this set to be?</b><br />
<select id="dialog_color_select">
<option value="transparent">Default</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
</select>
</fb:js-string>
<!-- Note also, we chain the onconfirm hook at the end -->
<a href="#" onclick="new Dialog().showChoice('Take Me Away!', dialog_redirect).onconfirm = function() {
document.setLocation(document.getElementById('dialog_location').getValue());
return false;
}">
Where do you want to go?</a><br />
<fb:js-string var="dialog_redirect">
<div style="text-align: center">
<input id="dialog_location" value="http://www.facebook.com/fbml/console.php" size="50" />
</div>
</fb:js-string>
