menuMDUIDocs
color_lens
The new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.

Floating Action Button

mdui has a built-in lightweight JavaScript utility library with a jQuery-like API and chaining style, but it is only one-sixth the size of jQuery.

Usage

  1. Call via Attributes
  2. Call via JavaScript

Related Reading

You can use <code>mdui.$</code> to call the library, but it's better to store <code>mdui.$</code> in a short variable for convenience, for example:

Style

In the subsequent documentation, <code>$</code> is used to represent <code>mdui.$</code>.

Data Type Checking

codeplay_arrow
Example
<button class="mdui-fab mdui-ripple">
          <i class="mdui-icon material-icons">add</i>
        </button>
        <button class="mdui-fab mdui-color-theme-accent mdui-ripple">
          <i class="mdui-icon material-icons">add</i></button
        >

Object Access

codeplay_arrow
Example
<button class="mdui-fab mdui-fab-mini mdui-ripple">
          <i class="mdui-icon material-icons">add</i>
        </button>
        <button
          class="mdui-fab mdui-fab-mini mdui-color-theme-accent mdui-ripple"
        >
          <i class="mdui-icon material-icons">add</i></button
        >

Core

CSS Classes

codeplay_arrow
Example
<button
          class="mdui-fab mdui-color-theme-accent mdui-ripple"
          id="fab-animation"
        >
          <i class="mdui-icon material-icons">add</i>
        </button>

        <button class="mdui-btn" id="fab-animation-show">show</button>
        <button class="mdui-btn" id="fab-animation-hide">hide</button>

        <script>
          var fab = document.getElementById('fab-animation');
          document
            .getElementById('fab-animation-show')
            .addEventListener('click', function () {
              fab.classList.remove('mdui-fab-hide');
            });
          document
            .getElementById('fab-animation-hide')
            .addEventListener('click', function () {
              fab.classList.add('mdui-fab-hide');
            });
        </script>

Plugin Writing

Node Attributes

<button class="mdui-fab mdui-fab-fixed mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>
Run

Array and Object Operations

HTML Structure

Data Storage

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- Styles -->
    <i class="mdui-icon material-icons">add</i>

    <!-- Finding Nodes -->
    <i class="mdui-icon mdui-fab-opened material-icons">add</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>

Call via Attributes

Node Manipulation

<div class="mdui-fab-wrapper" mdui-fab="{trigger: 'hover'}">
  ......
</div>

Call via JavaScript

Forms

// Events
// More Common Methods
var inst = new mdui.Fab(selector, options);
Run

Param

Param NameTypeDefaultDescription
triggerstringhoverThis method has multiple usages:
  • A CSS selector can be passed as a parameter to return a JQ object containing the matching elements. This method is implemented via querySelectorAll.
  • DOM elements, any array, NodeList, or JQ objects can be passed to return a JQ object containing the specified elements.

Method

Method NameDescription
open()An HTML string can be passed to return a JQ object containing the DOM created based on the HTML.
close()A function can be passed, which will be called after the DOM is fully loaded.
toggle()If only one object is passed, the properties in that object will be merged into the JQ object, which is equivalent to adding new functionality under the JQ namespace.
show()Then the custom method can be called like this
hide()If two or more objects are passed, properties from all objects are added to the first object, and the merged object is returned.
getState()In this case, both the first object and the return value are { key1: val1, key2: val2, key3: val3 }

Event

Event NameDescriptionTargetParams
open.mdui.fabExtend methods on the JQ prototype chain.<div class="mdui-fab-wrapper"></div>Then the extended method can be used like this
opened.mdui.fabSerialize an object or array and return a string suitable for URL parameters.
close.mdui.fabIf the parameter is an array, it must be in the same format as the return format of <code>.serializeArray()</code>:
closed.mdui.fabTraverse an array or object. The return value is the first parameter, i.e., the array or object being traversed.

CSS Classes

Class NameDescription
.mdui-fabThe first parameter of the function is the index position of the array or the key of the object; the second parameter is the value at the corresponding position of the array or object.
.mdui-fab-miniThe <code>this</code> in the callback function points to the value at the corresponding position of the array or object. If the callback function returns <code>false</code>, the traversal stops.
.mdui-fab-hideTraverse an array
.mdui-fab-fixedResult:
.mdui-fab-wrapperTraverse an object
.mdui-fab-openedAppend elements of the second array to the first array and return the merged array.
.mdui-fab-dialFilter out duplicate elements in the array.
arrow_backPrevious
Button
arrow_forwardNext
Select