HTML
CSS
JavaScript
play_arrow
HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <title>浮动操作按钮 - 通过自定义属性调用</title>
  <link rel="stylesheet" href="../assets/mdui-v0.3.0/css/mdui.min.css"/>
</head>
<body style="margin-top: 20px;">

<div class="mdui-container">

  <button id="open" class="mdui-btn mdui-color-pink-accent mdui-m-a-1">open</button>
  <button id="close" class="mdui-btn mdui-color-pink-accent mdui-m-a-1">close</button>
  <button id="hide" class="mdui-btn mdui-color-pink-accent mdui-m-a-1">hide</button>
  <button id="show" class="mdui-btn mdui-color-pink-accent mdui-m-a-1">show</button>
  <button id="getState" class="mdui-btn mdui-color-pink-accent mdui-m-a-1">getState</button>

  <div class="mdui-fab-wrapper" id="fab">
    <button class="mdui-fab mdui-ripple mdui-color-pink-accent">
      <i class="mdui-icon material-icons">add</i>
      <i class="mdui-icon mdui-fab-opened material-icons">mode_edit</i>
    </button>
    <div class="mdui-fab-dial">
      <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-pink"><i class="mdui-icon material-icons">backup</i>
      </button>
      <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red"><i class="mdui-icon material-icons">bookmark</i>
      </button>
      <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange"><i class="mdui-icon material-icons">access_alarms</i>
      </button>
      <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-blue"><i class="mdui-icon material-icons">touch_app</i>
      </button>
    </div>
  </div>
</div>


<script src="../assets/mdui-v0.3.0/js/mdui.min.js"></script>
</body>
</html>
CSS

    

    

        
JavaScript

        
var inst = new mdui.Fab('#fab');

// method
document.getElementById('open').addEventListener('click', function () {
  inst.open();
});

document.getElementById('close').addEventListener('click', function () {
  inst.close();
});

document.getElementById('hide').addEventListener('click', function () {
  inst.hide();
});

document.getElementById('show').addEventListener('click', function () {
  inst.show();
});

document.getElementById('getState').addEventListener('click', function () {
  mdui.alert(inst.getState());
});

// event
var fab = document.getElementById('fab');
fab.addEventListener('open.mdui.fab', function () {
  console.log('open');
});

fab.addEventListener('opened.mdui.fab', function () {
  console.log('opened');
});

fab.addEventListener('close.mdui.fab', function () {
  console.log('close');
});

fab.addEventListener('closed.mdui.fab', function () {
  console.log('closed');
});