Lightweight Inline Confirmation Plugin For jQuery - Inline Affirm

File Size: 6.07 KB
Views Total: 920
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight Inline Confirmation Plugin For jQuery - Inline Affirm

Inline Affirm is a really small jQuery plugin that adds an inline confirmation box with YES / NO buttons to your call to action button using HTML5 data attributes.

How to use it:

1. Load the required jquery-inline-affirm.css file in the head section of the webpage. This style sheet currently provides 3 styles for your confirmation box. You can also add your own styles directly in the CSS file.

<link rel="stylesheet" href="jquery-inline-affirm.css">

2. Create a 'button' style confirmation button following the markup structure like this:

  • class="button": Confirmation style. "light", "dark" or "button".
  • data-id="1": Unique ID for the confirmation button.
  • data-title="Save": Text for the confirmation button.
  • data-question="Are You Sure?": Confirmation message.
<div class="affirm button" 
     data-id="1" 
     data-title="Save" 
     data-question="Are You Sure?"
     >
</div>

3. Initialize the plugin and done.

$(".affirm").inlineAffirm();

4. Execute a callback after you click on the 'YES' button.

$(".affirm").inlineAffirm({
  callback : function(ele){
    // do some cool stuffs
  }
});

This awesome jQuery plugin is developed by theashcraig. For more Advanced Usages, please check the demo page or visit the official website.