Emulating Facebook’s Dialogue Using Jquery UI Dialogues

Follow Me on Pinterest

Facebook & JQuery UIWhen working on applications for Facebook one thing that I really wanted to be able to do is to have more control over the javascript dialogues to display content to the user.

It is true that FB.ui can perform this task but it involves loading the dialogue from Facebook’s Graph API which can be fairly slow and does not really offer me enough flexibility for my applications.

Because of this I decided to write my own styles that successfully inherit and overwrite the JQuery UI default theme and skins the dialogue with the Facebook style!

The following code assumes that you have loaded the JQuery & JQuery UI libraries.

This will now allow you set any content you like as normal by calling the following javascript in your application:

//function to show an emulated Facebook dialogue
function ShowFacebookDialogue(){
	//setup dialogues
	var dialogue = $("#dialogue").dialog({autoOpen: false, modal: true, draggable:false, resizable:false, bgiframe:true});

	//setup options for this dialogue
	$("#dialogue").dialog( "option", "title", 'Facebook - Adding Entry' );
	$("#dialogue").dialog({ buttons: { "Close": function() { $(this).dialog("close"); } } });
	$("#dialogue").dialog( "open" );
	$("#dialogue").html("<p>An example of a JQuery UI dialogue emulating Facebook's styles!</p>");
	$("#dialogue").bind( "dialogbeforeclose", function(event, ui) {
		alert("You can bind events as you normally would to JQuery UI dialogues.");
	});
}

This should now show the following dialogue box styled to Facebook’s default style:

Facebook Dialogue Using JQueryUI

From this you can now utilise all the functionality of the JQuery library and Facebook’s Graph API for your JQuery UI dialogues.

Filed Under: Blog, Code Share, Social
Tags: , , , , .
Bookmark: permalink.

Let me know what you think:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>