File Explorer Requirements

This theme come with two dialog types and two alert msg. types.

• 1. Fallr is a premium JQuery plugin from Codecanyon and default dialogs created by JQueryUI.
• 2. Toast messages and simple inline alert messages(notifications).

Fallr

1. Initialize the plugin

jQuery(document).ready(function(){
	
	var method = {	        
		alertlike : function(){
			jQuery.fallr('show', {
				content : '<p>Howdy.</p>'
			});
		}
	};
	
	jQuery('a[href^="#fallr-"]').click(function(){
		var id = jQuery(this).attr('href').substring(7);
		method[id].apply(this,[this]);
		return false;
	});
});

2. HTML formating.

<a href="#fallr-alertlike" class="button" >Click this</a>

Options

buttons    : { 
	// object contains buttons definition
	button1 : {
		text    : 'OK',         // default button text
		danger  : false,        // is the button trigger dangerous action?
		onclick : function(){   // default button function 
				$.fallr('hide'); 
			  }
	}
	},
icon            : 'check',          // [string] icon displayed (see custom icon explanation)
content         : 'Hello',          // [string] fallr content
position        : 'top',            // [string] top/center/bottom
closeKey        : false,            // [bool] close fallr with ESC key
closeOverlay    : false,            // [bool] close fallr on overlay click
useOverlay      : true,             // [bool] should overlay be shown
autoclose       : false,            // [int] autoclose duration in miliseconds, false to disable
easingDuration  : 300,              // [int] animation duration
easingIn        : 'swing',          // [string] easing type when appear
easingOut       : 'swing',          // [string] easing type when disappear
height          : 'auto',           // [string] css value for exact height
width           : 'auto',           // [string] css value for exact width
zIndex          : 100               // [int] set z-index

jQueryUI Dialog

Unlike Fallr? You have an alternative option. You can use jQueryUI dialogs which, I think is much easier to use.

1. Initialize the plugin

$(function() {
	$( "#dialog" ).dialog({
		autoOpen: false,
		show: "blind",
		hide: "explode",
		buttons: {
			OK: function() {
				$( this ).dialog( "close" );
			}
		}
	});

	$( "#opener" ).click(function() {
		$( "#dialog" ).dialog( "open" );
		return false;
	});
});

2. Create dialog text

<div id="dialog" title="Basic dialog">
	<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

3. Create button

<button id="opener">Open Dialog</button>

Toast Messages

How to use?

1. Initialize the plugin

function showStickySuccessToast() {
	jQuery().toastmessage('showToast', {
		text     : 'Success Dialog which is sticky', //text to display
		sticky   : true, // disable auto hide
		type     : 'success', //type: success, error, warning or notification
	});

}

3. Create button

<a href="javascript:showSuccessToast();" class="button">Click me</a>

Notifications

<div class="alert info_msg ">My info text is here....</div>
<div class="alert error_msg">My error text is here....</div>

File Explorer Requirements