/jQuery-iPad-Overlay-Plugin

Creates iPad style drop-in overlays for editing or displaying content.

Primary LanguageJavaScript

#iPad Style Overlays with CSS3 & jQuery

While working on a project with the superb guys at Hydrant i was looking for an overlay or modal window that could be used for presenting edit forms or just any general content in a nice way.

Then i noticed the overlay that the iPad uses for most 'compose' windows - it doesn't occupy the full width of the window, and sticks to the top, perfect for the web! so i set out on a mission to create a flexible plugin that could be used with either ajax or DOM content.

So here it is! in it's 0.1 release - a plugin for creating iPad style editing overlays that you can inject or load content into, totally customizable with CSS, and doesn't rely on any images.

##Triggering it.

Just call the .JS plugin file, and the .CSS stylesheet in the <head> section of your page:

<script type="text/javascript" src="js/ipadoverlays.js"></script>
		
<link href="css/ipadoverlays.css" type="text/css" rel="stylesheet" />

###Initialisation

Triggering the overlay is done by simply calling the $.ipadoverlay() function with whatever options you want to pass through.

Call it on the jQuery function like so:

$.ipadoverlay({

title:'Contact Me',
loaded: function() { $('#ipad_textarea').focus(); },
rightButton: true,
rightButtonLabel: 'Save',
rightButtonFunction: function() {
	
	$('.you_typed_header').show();
	$('#you_typed').html($('#ipad_textarea').val());

},
content: '<textarea rows="10" cols="10" id="ipad_textarea"></textarea>'


});

###Options

  • content (string):
  • Any HTML content you want to insert into the overlay's content area. This will over-ride any AJAX URL you pass to the function.
  • url (string):
  • A URL to be loaded into the overlay's content area using a GET request.
  • title (string):
  • The title to be displayed at the top of the overlay.
  • loaded (function):
  • A function to be called once the content has been inserted or the URL has finished loading.
  • rightButton (boolean):
  • Place a button on the right-hand side of the overlay for use with custom functions, like saving etc.
  • rightButtonLabel (string):
  • The label to be applied to the right-hand button.
  • rightButtonFunction (function):
  • Custom code to be executed when the right-hand button is clicked.
  • closeAfter (boolean):
  • Specify if the overlay should close after the custom code has been executed.