FBJS/Examples/Dialogs
From Facebook Developers 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 lots 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> |
