/pls

A simple JavaScript library for handling ajax overlays and messages.

Primary LanguageJavaScript

Pls

A simple JavaScript Library for launching request overlays

Pls helps you easily control common tasks for ajax overlays and general succes/error messaging.

Getting Started

  1. Include pls.js and waitpls.css in your html.

    <link rel="stylesheet" href="css/waitpls.css">
<script src="js/pls.js"></script>

  2. 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>

Usage

Pls overlay

Append new overlays via the wait() method.

pls('#bodyContainer').wait({
   text: 'Pls wait',
   main: true
});

wait() options

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 success/error messages

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');