jQuery FAB Button

Complete example of jQuery FAB Button.

by Gabriel Correa

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/smachs/jquery-fab-button@master/css/jquery-fab-button.min.css">
<!-- Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Banner -->
<div id="banner-message">
  <p>jQuery FAB Button</p>
  <button class="banner-button" href="https://github.com/smachs/jquery-fab-button/issues" target="_blank">Issues</button>
  <button class="banner-button" href="https://github.com/smachs/jquery-fab-button" target="_blank">Documentation</button>
</div>
<!-- FAB -->
<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
    <a class="btn-floating btn-large red">
        <i class="large material-icons">mode_edit</i>
    </a>
    <ul>
        <li>
            <a id="first-fab" class="btn-floating" data-fabcolor="#45d1ff">
                <i class="material-icons">insert_chart</i>
            </a>
        </li>
        <li>
            <a id="second-fab" class="btn-floating" data-fabcolor="#7345ff">
                <i class="material-icons">format_quote</i>
            </a>
        </li>
        <li>
            <a id="third-fab" class="btn-floating" data-fabcolor="#0084ff">
                <i class="material-icons">publish</i>
            </a>
        </li>
        <li>
            <a id="fourth-fab" class="btn-floating" data-fabcolor="#ff7345">
                <i class="material-icons">attach_file</i>
            </a>
        </li>
    </ul>
</div>

CSS

/*!
 * Style
 */
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button.banner-button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

/*!
 * FAB
 */
.btn-floating {
    background-color: #3f51b5;
}
.btn-floating:hover {
    background-color: #3f51b5;
}

JavaScript

/*!
 * jQuery FAB Button v1.1.0 (https://github.com/smachs/jquery-fab-button)
 * Copyright 2014-2019 Materialize & Gabriel Correa
 * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
 */
$(document).ready(function () {
    // jQuery reverse
    $.fn.reverse = [].reverse;

    // Hover behaviour: make sure this doesn't work on .click-to-toggle FABs!
    $(document).on('mouseenter.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function (e) {
    		// Open
        var $this = $(this);
        openFABMenu($this);
        
        // Change background based in data attributes
        $("#first-fab").css('background', function () {
        	return $(this).data('fabcolor')
        });
        $("#second-fab").css('background', function () {
        	return $(this).data('fabcolor')
        });
        $("#third-fab").css('background', function () {
        	return $(this).data('fabcolor')
        });
        $("#fourth-fab").css('background', function () {
        	return $(this).data('fabcolor')
        });
    });
    $(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function (e) {
        var $this = $(this);
        closeFABMenu($this);
    });

    // Toggle-on-click behaviour.
    $(document).on('click.fixedActionBtn', '.fixed-action-btn.click-to-toggle > a', function (e) {
        var $this = $(this);
        var $menu = $this.parent();
        if ($menu.hasClass('active')) {
            closeFABMenu($menu);
        } else {
            openFABMenu($menu);
        }
    });
});

$.fn.extend({
    openFAB: function () {
        openFABMenu($(this));
    },
    closeFAB: function () {
        closeFABMenu($(this));
    }
});

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= '//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js';
head.appendChild(script);

var openFABMenu = function...