This time I will share jQuery Plugin and tutorial about jQuery Plugin To Create Inline Confirm Action Buttons, hope it will help you in programming stack.
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.
1 |
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> |
2 |
<script src="src/confirmableActionButton.js"></script> |
2. Call the function to transform an element into a default confirm action button.
1 |
$("#el").confirmativeActionButton(); |
3. Style the confirm action button like this.
03 |
display: inline-block; |
04 |
color: rgba(255, 255, 255, 0.7); |
05 |
background-color: rgba(255, 255, 255, 0.08); |
06 |
border-color: rgba(255, 255, 255, 0.2); |
09 |
border-radius: 0.3rem; |
10 |
transition: color 0.2s, background-color 0.2s, border-color 0.2s; |
13 |
button:focus { outline: 0 !important; } |
15 |
.confirmativeActionButton { background-color: green; } |
17 |
.confirmativeActionButtonWaitingForConfirmation { |
18 |
background-color: red; |
19 |
animation: blinker 1s linear infinite; |
22 |
.confirmativeActionButtonConfirmed { background-color: blue; } |
4. All customization options.
01 |
$("#el").confirmativeActionButton({ |
02 |
id: methods.guid.apply(this), |
03 |
caption: "Confirmative Action Button", |
04 |
confirmationCaption: "Click to confirm", |
06 |
cssNormalClass: "confirmativeActionButton", |
07 |
cssWaitingClass: "confirmativeActionButtonWaitingForConfirmation", |
08 |
cssActivatedClass: "confirmativeActionButtonConfirmed", |
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.
