A simple JavaScript Library for launching request overlays
Pls helps you easily control common tasks for ajax overlays and general succes/error messaging.
-
Include pls.js and waitpls.css in your html.
<link rel="stylesheet" href="css/waitpls.css"> <script src="js/pls.js"></script>
-
Add the overlay template in
<body>
<div class="pls-wait" id="pls-overlay"> <div class="container"> <div class="spinner"></div> <p class="pls-text"></p> </div> <div class="background"></div> </div>
Append new overlays via the wait()
method.
pls('#bodyContainer').wait({
text: 'Pls wait',
main: true
});
text: 'your initial message' // (e.g please wait, loading, etc.),
main: true // (Tells the overlay if it's going to be fixed position vs absolutely positioned to a relative parent),
success: 'Your success message',
error: 'Your error message',
delay: time in milliseconds // (how long message stays visible after displaying)
To trigger your success/error messages when the ajax call completes, use the send()
method.
pls('#bodyContainer').send('success'); // use error to trigger the error
Additionally, you can override the success/error messages set in the wait()
method. This is useful for displaying data that might be returning from the ajax call.
pls('#bodyContainer').send('success', data); // data will override the success/error message.
Pls also comes with a general messaging system to append messages at time using .message()
.
pls('#bodyContainer').message({
text: 'I am a success message',
type: 'success'
});
pls('#bodyContainer').message({
text: 'I am a error message',
type: 'error'
});
You can also pass in a delay which determines how long the message will display
pls('#bodyContainer').message({
text: 'I am a success message',
type: 'success',
delay: 4000
});
To remove all messages, use clearMessages()
.
pls(#bodyContainer).clearMessages();
You can remove only success or error messages by passing in 'success'
or 'error'
respectively.
pls(#bodyContainer).clearMessages('success');