ejWaitingPopup
11 Jul 201821 minutes to read
The WaitingPopup control for JavaScript is a visual element that provides support for displaying a pop-up indicator over a target area and preventing the end user’s interaction with the target area while loading.
Syntax
$(element).ejWaitingPopup()Example
<div id="target"></div>
<script>
// Simple waiting popup creation.
$("#target").ejWaitingPopup({ showOnInit: true });
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style>Requires
-
module:jQuery
-
module:jquery.easing.1.3.js
-
module:ej.core.js
-
module:ej.waitingpopup.js
Members
cssClass string
Sets the root class for the WaitingPopup control theme
Default Value
- null
Example
<div id="target"></div>
<script>
//To Initialize the WaitingPopup with the cssClass value specified.
$("#target").ejWaitingPopup({showOnInit: true, cssClass : 'gradient-lime '});
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style>htmlAttributes object
Specifies the list of HTML attributes to be added to waitingpopup control.
Default Value
- {}
Example
<div id="target"></div>
<script>
//To set htmlAttributes API value during initialization.
$("#target").ejWaitingPopup({showOnInit: true, htmlAttributes:{"aria-label":"waitingpopup"} });
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style>showImage boolean
Enables or disables the default loading icon.
Default Value
- true
Example
showOnInit boolean
Enables the visibility of the WaitingPopup control
Default Value
- false
Example
<div id="target"></div>
<script>
//To set showOnInit API value during initialization
$("#target").ejWaitingPopup({ showOnInit: true});
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style>target string
Specified a selector for elements, within the container.
Default Value
- null
Example
<div id="waiting"></div>
<script>
//To set target API value during initialization
$("#waiting").ejWaitingPopup({ showOnInit: true,target: "body"});
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style>appendTo string
Waitingpopup element append to given container element.
Default Value
- null
Example
<div id="waiting"></div>
<script>
//To set target API value during initialization
$("#waiting").ejWaitingPopup({ showOnInit: true,appendTo: "body"});
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style>template object
Loads HTML content inside the popup panel instead of the default icon
Default Value
- null
Example
<div id="content">
<div class="block">
<div class="logo">
</div>
<div class="text">
<p> Content is loading ... </p>
</div>
</div>
<div class="loader">
</div>
</div>
<script>
//To Initialize the WaitingPopup control with the template value specified.
$("#target").ejWaitingPopup({ showOnInit: true,template: $('#content') });
</script>
<style>
.block {
height: 76px;
}
.logo {
background-image: url("themes/images/waitingpopup/js_logo.png");
float: left;
height: 100%;
width: 77px;
margin-right: 15px;
}
.txt {
float: left;
font-size: 17px;
height: 100%;
text-align: left;
}
.txt p {
margin: 0;
}
.loader {
background: url("themes/images/waitingpopup/load_light.gif") no-repeat scroll -5px 18px transparent;
height: 40px;
width: 100%;
}
.darktheme .loader {
background-image: url("themes/images/waitingpopup/load_dark.gif");
}
#content {
cursor: default;
height: 112px;
width: 275px;
}
</style>text string
Sets the custom text in the pop-up panel to notify the waiting process
Default Value
- null
Example
<div id="target"></div>
<script>
//To Initialize the WaitingPopup with the text value specified
$("#target").ejWaitingPopup({showOnInit: true, text: 'waiting…' });
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style>Methods
hide()
To hide the waiting popup
Example
<div id="target"></div>
<script>
$("#target").ejWaitingPopup({showOnInit: true});
// Initialize the WaitingPopup object.
var popupObj = $("#target").data("ejWaitingPopup");
// Calls the hide method of WaitingPopup not to display.
popupObj.hide();
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style><div id="target"></div>
<script>
$("#target").ejWaitingPopup({showOnInit: true});
// hide WaitingPopup using the hide method.
$("#target").ejWaitingPopup('hide');
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style>refresh()
Refreshes the WaitingPopup control by resetting the pop-up panel position and content position
Example
<div id="target"></div>
<script>
$("#target").ejWaitingPopup({showOnInit: true});
// Initialize the WaitingPopup object.
var popupObj = $("#target").data("ejWaitingPopup");
popupObj.refresh();
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style><div id="target"></div>
<script>
$("#target").ejWaitingPopup({showOnInit: true});
// Refresh the WaitingPopup using refresh method.
$("#target").ejWaitingPopup('refresh');
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style>show()
To show the waiting popup
Example
<div id="target"></div>
<script>
$("#target").ejWaitingPopup({showOnInit: true});
// Initialize the WaitingPopup object.
var popupObj = $("#target").data("ejWaitingPopup");
// Calls the show method of WaitingPopup to display.
popupObj.show();
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style><div id="target"></div>
<script>
$("#target").ejWaitingPopup({showOnInit: true});
// Display WaitingPopup using the show method.
$("#target").ejWaitingPopup("show");
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style>Events
create
Fires after Create WaitingPopup successfully
| Name | Type | Description |
|---|---|---|
| cancel | boolean | returns the cancel option value |
| model |
|
returns the WaitingPopup model |
| type | string | returns the name of the event |
Example
<div id="target"></div>
<script>
//To Initialize the WaitingPopup with the text value specified with create event
$("#target").ejWaitingPopup({showOnInit: true, text: 'waiting…',create: function (args) {} });
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style>destroy
Fires after Destroy WaitingPopup successfully
| Name | Type | Description |
|---|---|---|
| cancel | boolean | returns the cancel option value |
| model |
|
returns the WaitingPopup model |
| type | string | returns the name of the event |
Example
<div id="target"></div>
<script>
//To Initialize the WaitingPopup with the text value specified with destroy event
$("#target").ejWaitingPopup({showOnInit: true, text: 'waiting…',destroy: function (args) {} });
</script>
<style>
#target {
height: 200px;
width: 600px;
margin: 0 auto;
}
#target_WaitingPopup .e-image {
display: block;
height: 70px;
}
</style>