jQuery Plugin To Create Inline Confirm Action Buttons

A lightweight jQuery used for creating a highly customizable confirm button to help confirm an action on click of an element before proceeding.

Basic usage:

1. Include jQuery library and the jQuery ConfirmativeActionButton's script in your web page preferably before the end of body tag.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="src/confirmableActionButton.js"></script>

2. Call the function to transform an element into a default confirm action button.

$("#el").confirmativeActionButton();

3. Style the confirm action button like this.

button {
  margin: 5px;
  display: inline-block;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  border-style: solid;
  border-width: 1px;
  border-radius: 0.3rem;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

button:focus { outline: 0 !important; }

.confirmativeActionButton { background-color: green; }

.confirmativeActionButtonWaitingForConfirmation {
  background-color: red;
  animation: blinker 1s linear infinite;
}

.confirmativeActionButtonConfirmed { background-color: blue; }
@keyframes 
blinker {  50% {
opacity: 0.0;
}
}

4. All customization options.

$("#el").confirmativeActionButton({
  id: methods.guid.apply(this),
  caption: "Confirmative Action Button",
  confirmationCaption: "Click to confirm",
  actionHandler: null,
  cssNormalClass: "confirmativeActionButton",
  cssWaitingClass: "confirmativeActionButtonWaitingForConfirmation",
  cssActivatedClass: "confirmativeActionButtonConfirmed",
  waitingTime: 3000
});

Change log:

2016-05-18

• Added pointer cursor for button as default

---

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