jQuery插件按钮 - GoButton

2017-05-23      19      JavaScript
项目简介

GoButton

This button is used for displaying an animation while a request is going. It could be run with infinite animation loop or with finit animation as well.

Current version: 1.0.0

Installation

Standalon:

<link rel="stylesheet" href="dist/css/gobutton.css" />

<script src="jquery.min.css"></script>
<script src="dist/js/gobutton.js"></script>

How to use

<button class="foo"><img src="https://image.svg" style="height: 100%;"></button>
<button>Some Text</button>

<script>
    $('button').gobutton(options);
</script>

As a result:

<div class="circle gobutton" style="width: 100px; height: 100px; padding: 6px;">
    <div class="loader" style="background-image: url('data:image/svg+xml;base64...'); background-color: rgba(37, 206, 209, 0.2);"></div>
    <button class="foo main circle" style="width: 100px; height: 100px; background-color: rgb(37, 206, 209);">
        <img src="https://image.svg" style="height: 100%;">
    </button>
</div>

<div class="circle gobutton" style="width: 100px; height: 100px; padding: 6px;">
    <div class="loader" style="background-image: url('data:image/svg+xml;base64...'); background-color: rgba(37, 206, 209, 0.2);"></div>
    <button class="main circle" style="width: 100px; height: 100px; background-color: rgb(37, 206, 209);">
        Some Text
    </button>
</div>

Configuration

Setting name Description Type Default value
size A button size (pixels) string "100"
color A button color (please, use CSS supported formats - RGB, RGBA, HEX ect.). string "#25CED1"
loaderGap A gap between loader and button's body (pixels). string "6"
loaderWidth A loader element width (pixels). string "3"
loaderColor A loader color (RGB, RGBA or HEX format). string "#25CED1"
infiniteSpin Infinite animation flag. boolean false
animationSpeed A time of the initial animation (seconds). The total animation time varies depending on the "infiniteSpin" flag. If the animation is finite then its time is equal to: animationSpeed + 0.5s. int 2.5
classes Classes which will be added to the wrapper element. string ""
disable This setting adds the "disabled" attribute to the button. (Similarly to the native way - elem.disabled = true) boolean false
Callbacks
onStart() An event that triggers when the animation starts. function null
onStop() An event that triggers after the download is completed. function null
onAnimationStart(event) An event that triggers after the start of each animation (see the list of animations). Animation event as a parameter. function null
onAnimationStop(event) An event that triggers after the end of each animation (see the list of animations). Animation event as a parameter. function null

Animations list

  • spin - the main animation of the unwinding of the loader
  • infinitespin - run after spin . Animation of infinite rotation, it works if the flag was set.
  • stopspin - run after spin . Animation stops rotation, it works depending on the set flag of infinite animation.
  • stop - the rotation stop animation is triggered by a second press of the button or stopping via the stop method.

Methods

Available via gobutton object:

var gobutton = $('#gobutton').gobutton(options)[0].gobutton;
gobutton.start();

or

var button = document.getElementById('gobutton');
$(button).gobutton(options);
button.gobutton.start();
Name Description
start() Start animation.
stop() Stop animation.
infiniteStart(speed) Run infinite roatation animation. A time of one spin in seconds as a parameter.
changeOption(nameOrOptions, valueOrNothing || {}) Change one of options. Option name and value, or options object as parameters.

Examples

Base usage

<button>GO</button>
    <script type="text/javascript">
        $('button').gobutton();
    </script>

Custom size with infinite spin

<button>GO</button>
    <script type="text/javascript">
        $('button').gobutton({
            size: 150,
            loaderGap: '20',
            loaderWidth: '3',
            loaderColor: 'rgb(255,0,0)',
            infiniteSpin: true
         });
    </script>

To make the loader rotation smoother, it should be supplemented with a semitransparent background of the same color. But there are cases when it loses its nicety: too large button sizes (>100 pixels), a big gap between the button and the loader, low animation speed. Therefore, in these cases, you have to remove the background by writing the following style to the loader:

<style>
  .loader {
    background-color: transparent!important;
  }
</style>