jquery.responsiveDialog.js

A extension to the jquery.ui dialog that makes it responsive. When the screen size is reached a certain limit, it will display the dialog full screen.

Usage /tldr;

Add the js after the jquery ui js:

    <script type="text/javascript" src=".../jquery-ui.min.js"></script>
    <script type="text/javascript" src=".../jquery.responsiveDialog.js"></script>

Init the dialog as normal and add responsive configuration options.

Note: this works only when creating the dialog, not when setting the options later:

$detail.dialog({
	responsive: {
		limit: 600,	// become responsive and full screen when screen width is <= 600 pixel
		left: {
			'class': 'red-style',
			text: '<img src="chreron-left.png"/> Icon',
			click: function() { 
				$(this).dialog("close"); 
			}
		},
		center: { 'class': 'green-background' },
		right: true
	},
	closeOnEscape: true,
	buttons: [
	    {
	    	text: i18n.dialog_ok,
	    	responsive: {
	    		html: '<i class="icon24 icon-ok-m"></i>',
	    		position: 1
	    	},
	    	click: function() {
	    		alert("OK");
	    	}
	    },
		{ 
			text: i18n.dialog_cancel,
			responsive: false,
			click: function() { 
				$(this).dialog("close"); 
			}
		}
	]
};

Configuration

When the dialog is converted to full screen the button-pane and the header will be hidden and instead a combined header created that looks like:

.---.-----------------.---------------.
| < | Dialog Title    | |OK| |ACTION| |
.---.-----------------.---------------.
| ...

responsive

In order for the dialog to become responsive you need ad least "responsive: true" in your configuration. You can also set responsive to a configuration object with any of the following options:

• limit (default: 1000) sets the limit when to convert the dialog into full-screen
• left options for the left part of the header
  • class: (optional) allows to define extra css-classes
  • text: (default: '') a text/html that is the content
  • click: (optional) a onclick function
• center options for the center/title part of the header
  • class: (optional) allows to define extra css-classes
  • text: (default: dialog title) a text/html that is the content
  • click: (optional) a onclick function
• right options for the center/title part of the header
  • class: (optional) allows to define extra css-classes
  • content: (default: see buttons) a text/html that is the content

buttons

The dialog buttons are automatically added to the "right" part of the header. This is done only for buttons that have a "responsive" configuration (minimum: responsive:true).

• html (optional) a html code that will be used instead of simply creating a default button
• position (optional) a number that allows re-ordering of the buttons for the header (0=left to right)