magicButtons v.1.0.0 - jQuery plugin

Version: 1.0.0.
Author: [email protected]
License: MIT

Try demo here ! Demo

Dependencies

The following plugin is based on jquery. The default icons are those of FontAwesome 5 (solid).

• jQuery (minimum) version v 1.12.4 Site - License
• Font Awesome 5 Site - License

Get start

Inclusion

Inclusion via js

<script src="/magicBtn.js"></script>

Inclusion via compiled css

<link rel="stylesheet" href="/magicBtn.css">

Inclusion via .scss

@import "magicBtn";

New instance of plugin

/**  * @param string selector - Target  * @param obj options - Options to customize plugins  */   $.magicBtn(selector,options);

1. The first parameter represents the container on which the plugin will take effect. By default the scope is global (on all the document).
2. The second parameter is an object, which contains the initialization options.

You can initialize the plugin with the following options:

options = {     buttonType: 'type', // 'material','outline'     rounded: false, // (bool) - add class '.round', border-radius: 5px     fill: false // Just for 'outline', fill effect on button:hover }

Methods applicable to any button

1. Start loading

var options = {     loadginText: 'Your loading text',     loadingIcon: bool(true),     icon: '<i></i>' }      $('#selector').startLoading(options);

Options of this method

• The initial text is saved as an attribute: <button data-initial-text="$text">$text</button>.
• Append text.
• If the 'icon' option is true then the html string is hung.

2. Result status

var options = {      initialText: data-initial-text     status: '',//One of success, warning, error. Empty for default. }    $('#selector').resultLoading(options);

There may be four types of results:

1. success:
   • statusText: 'Result text'
   • statusIcon: ''
   • disalbed: bool(false)
2. warning
   • statusText: 'Result text'
   • statusIcon: ''
   • disalbed: bool(false)
3. error
   • statusText: 'Result text'
   • statusIcon: ''
   • disalbed: bool(false)
4. Default: The initial text saved by attribute with the method is returned startLoading();

3. Remove loading

var options = {     text: 'Your custom text for the button' }      $('#selector').removeLoading(options);

Actions of this mehod

• text: data-initial-text
• remove class: 'success','warning' or 'error'

4. Disabled status

var options = {}      $('#selector').disabled(options);

Actions of this mehod

• Add class 'disabled'
• Add attribute 'disabled'

Helper classes and functions

Button block

The button has 100% width.

  <button class="block"></button>

Icon rotating

If the loading icons are static, just add the rotating class.

  $(selector).startLoading({     'icon': '<i class="fas fa-cog rotating"></i>'   })

Errors

Elect errors that are returned by the plugin:

1. resultLoading(); If multiple states are initialized as true, returns an error can be just one (success, warning, error).