├── package.json ├── example └── index.html ├── js ├── jquery-fab-button.min.js └── jquery-fab-button.js ├── css ├── jquery-fab-button.min.css └── jquery-fab-button.css └── README.md /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-fab-button", 3 | "version": "1.0.1", 4 | "description": "Extracted from materializecss to those who want speed and flexibility without adhering to the complete materializecss framework.", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/smachs/jquery-fab-button.git" 8 | }, 9 | "keywords": [ 10 | "material", 11 | "javascript", 12 | "materiliaze", 13 | "fab button" 14 | ], 15 | "author": "smachs", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/smachs/jquery-fab-button/issues" 19 | }, 20 | "homepage": "https://github.com/smachs/jquery-fab-button#readme" 21 | } 22 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 |
11 | 12 | mode_edit 13 | 14 | 36 |
-------------------------------------------------------------------------------- /js/jquery-fab-button.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery FAB Button v1.0.0 (https://github.com/smachs/jquery-fab-button) 3 | * Copyright 2014-2018 Materialize & Smachs 4 | * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE) 5 | */ 6 | /*! 7 | * jQuery FAB Button v1.1.0 (https://github.com/smachs/jquery-fab-button) 8 | * Copyright 2014-2019 Materialize & Smachs 9 | * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE) 10 | */ 11 | $(document).ready(function(){$.fn.reverse=[].reverse;$(document).on('mouseenter.fixedActionBtn','.fixed-action-btn:not(.click-to-toggle)',function(e){var $this=$(this);openFABMenu($this);$("#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)});$(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(btn){$this=btn;if($this.hasClass('active')===!1){var horizontal=$this.hasClass('horizontal');var offsetY,offsetX;if(horizontal===!0){offsetX=40}else{offsetY=40} 12 | $this.addClass('active');$this.find('ul .btn-floating').velocity({scaleY:".4",scaleX:".4",translateY:offsetY+'px',translateX:offsetX+'px'},{duration:0});var time=0;$this.find('ul .btn-floating').reverse().each(function(){$(this).velocity({opacity:"1",scaleX:"1",scaleY:"1",translateY:"0",translateX:'0'},{duration:80,delay:time});time+=40})}};var closeFABMenu=function(btn){$this=btn;var horizontal=$this.hasClass('horizontal');var offsetY,offsetX;if(horizontal===!0){offsetX=40}else{offsetY=40} 13 | $this.removeClass('active');var time=0;$this.find('ul .btn-floating').velocity("stop",!0);$this.find('ul .btn-floating').velocity({opacity:"0",scaleX:".4",scaleY:".4",translateY:offsetY+'px',translateX:offsetX+'px'},{duration:80})} 14 | -------------------------------------------------------------------------------- /css/jquery-fab-button.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery FAB Button v1.0.0 (https://github.com/smachs/jquery-fab-button) 3 | * Copyright 2014-2018 Materialize & Smachs 4 | * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE) 5 | */ 6 | .z-depth-1,.btn-large,.btn-floating{box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)}.z-depth-1-half,.btn:hover,.btn-large:hover,.btn-floating:hover{box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15)}nav ul a.btn,nav ul a.btn-large,nav ul a.btn-large,nav ul a.btn-flat,nav ul a.btn-floating{margin-top:-2px;margin-left:15px;margin-right:15px}.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating){color:#ffab40;margin-right:20px;transition:color .3s ease;text-transform:uppercase}.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating):hover{color:#ffd8a6}.btn.disabled,.disabled.btn-large,.btn-floating.disabled,.btn-large.disabled,.btn:disabled,.btn-large:disabled,.btn-large:disabled,.btn-floating:disabled{background-color:#DFDFDF!important;box-shadow:none;color:#9F9F9F!important;cursor:default}.btn.disabled *,.disabled.btn-large *,.btn-floating.disabled *,.btn-large.disabled *,.btn:disabled *,.btn-large:disabled *,.btn-large:disabled *,.btn-floating:disabled *{pointer-events:none}.btn.disabled:hover,.disabled.btn-large:hover,.btn-floating.disabled:hover,.btn-large.disabled:hover,.btn:disabled:hover,.btn-large:disabled:hover,.btn-large:disabled:hover,.btn-floating:disabled:hover{background-color:#DFDFDF;color:#9F9F9F}.btn i,.btn-large i,.btn-floating i,.btn-large i,.btn-flat i{font-size:1.3rem;line-height:inherit}.btn-floating{display:inline-block;color:#fff;position:relative;overflow:hidden;z-index:1;width:37px;height:37px;line-height:37px;padding:0;background-color:#3f51b5;border-radius:50%;transition:.3s;cursor:pointer;vertical-align:middle}.btn-floating i{width:inherit;display:inline-block;text-align:center;color:#fff;font-size:1.6rem;line-height:37px}.btn-floating:hover{background-color:#3f51b5}.btn-floating:before{border-radius:0}.btn-floating.btn-large{width:55.5px;height:55.5px}.btn-floating.btn-large i{line-height:55.5px}button.btn-floating{border:none}.fixed-action-btn ul a.btn-floating{opacity:0}.fixed-action-btn{position:fixed;right:23px;bottom:23px;padding-top:15px;margin-bottom:0;z-index:998}.fixed-action-btn.active ul{visibility:visible}.fixed-action-btn.horizontal{padding:0 0 0 15px}.fixed-action-btn.horizontal ul{text-align:right;right:64px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:100%;left:initial;width:500px}.fixed-action-btn.horizontal ul li{display:inline-block;margin:15px 15px 0 0}.fixed-action-btn ul{left:0;right:0;text-align:center;position:absolute;bottom:64px;margin:0;visibility:hidden}.fixed-action-btn ul li{margin-bottom:15px}.fixed-action-btn ul a.btn-floating{opacity:0} 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery FAB Button 2 | 3 | 4 | A **small** module for **jQuery** and **Javascript** based in **MaterializeCSS** one day I was looking for some alternative to **floating action buttons** but with no result and the **floating action buttons** that I thought were either incomplete or not feasible I remembered that I used **MaterializeCSS** and I decided to adapt only the **floating action button** to be used separately from framework. 5 | 6 | ## Resources 7 | 8 | * [API Reference](https://materializecss.com/floating-action-button.html) 9 | * [Release Notes](https://github.com/smachs/jquery-fab-button/releases) 10 | * [Gallery]() 11 | * [Wiki](https://github.com/smachs/jquery-fab-button/wiki) 12 | * [Live Demo](https://jsfiddle.net/smachs/bLj5p1st/41/) 13 | 14 | ## Table of Resources 15 | 16 | * [Getting Started](#getting-started) 17 | 18 | ## Getting Started 19 | 20 | 1. Clone the repository using url 21 | 22 | ```bash 23 | $ git clone https://github.com/smachs/jquery-fab-button 24 | ``` 25 | [CDN](https://cdn.jsdelivr.net/gh/smachs/jquery-fab-button) 26 | 27 | 2. Copy all dependencies from directory 28 | 29 | ```bash 30 | $ cd /js or /css 31 | ``` 32 | 33 | 3. Add to your template 34 | 35 | ```bash 36 |