JavaScript中应用Bulma

JavaScript中应用Bulma，Bulma框架的实现没有用到JavaScript。本文介绍如何使用原生JavaScript控制之前开发的管理页面的不同组件，内容涵盖管理页面中以下组件的使用：

• 问题报告模态框；
• 移动端toggle菜单组件；
• 通知组件；
• 下拉菜单；
• 删除图书；
• 删除用户。

问题报告模态框

开发问题报告模态框会用到如下组件：

• 按钮；
• modal组件；
• notification元素。

在我们的示例中，需要一个带有data-target属性的按钮，属性值为对应模态框的id。在Bulma中，可以使用is-active类来控制模态框的显示和隐藏。使用原生JavaScript通过dom元素的classList属性来添加或删除is-active类，从而实现对应模态框的显示或隐藏。

    <! -- 触发按钮标记-->
    <button class="button is-white open-modal-button" data-target="report-a-bug">
        <span class="icon">
          <i class="fa fa-bug"></i>
        </span>
        <span>
          Report a bug
        </span>
    </button>

也可以添加一个notification元素类显示子元素的成功或错误状态。如下是可在模态框中使用的notification元素的代码片段。

    <! -- 通知元素 -->
    <div  class="notification is-success is-hidden modal-success-notification">
        <span class="fa fa-bug"></span> Thank You. Your bug has been reported.
    </div>

利用delete类给模态框添加一个关闭按钮。为了通过JavaScript控制模态框的关闭，需要给按钮添加close-modal-button类，JavaScript将通过该类来关联按钮触发模块框关闭功能。关闭按钮的代码如下：

    <button class="delete close-modal-button" aria-label="close"></button>
模态框UI代码实现如下：

    <! -- modal标记 -->
    <div class="modal" id="report-a-bug">
        <div class="modal-background"></div>
        <div class="modal-card">
          <header class="modal-card-head">
              <p  class="modal-card-title">Report a Bug</p>
              <! -- 关闭按钮 -->
              <button class="delete close-modal-button" aria-label="close"></button>
          </header>
          <section class="modal-card-body">
          <! -- 通知元素 -->
              <div  class="notification is-success is-hidden modal-success-notification">
                  <span  class="fa fa-bug"></span> Thank You. Your bug has been reported.
              </div>
              <textarea  class="textarea" placeholder="Let us know what prob-lems you faced.">
              </textarea>
          </section>
          <footer class="modal-card-foot">
              <button class="button is-success send-bug-report">Send</button>
              <button class="button close-modal-button">Cancel</button>
          </footer>
        </div>
    </div>

下面这段JavaScript代码是问题报告模态框的逻辑脚本，适用于应用程序中的所有模态框。也可以根据需求决定是否添加通知组件并使用JavaScript来控制显示与否。

    // 选择所有模态框、关闭按钮和触发按钮
    var modals = document.querySelectorAll('.modal');
    var modalButtons = document.querySelectorAll('.open-modal-button');
    var modalClose = document.querySelectorAll('.close-modal-button');
    // 成功的消息通知
    var successMessages = document.querySelectorAll('.modal-success-
    notification');
    // 给触发按钮添加事件监听器
    if (modalButtons.length > 0) {
        modalButtons.forEach(button => {
          button.addEventListener('click', function() {
              document.getElementById(this.dataset.target).classList.add('is-
    active');
          });
        });
    }
    // 给所有关闭按钮添加事件监听器
    if (modalClose.length > 0) {
        modalClose.forEach(closeButton => {
          closeButton.addEventListener('click', function() {
              modals.forEach(modal => {
                  modal.classList.remove('is-active');
                  // 关闭模态框，隐藏成功的通知
                  successMessages.forEach(message => {
                      message.classList.add('is-hidden');
                  });
              });
          });
        });
    }
    // 展示成功的通知
    var sendBugReport = document.querySelector('.send-bug-report');
    if (sendBugReport ! == null) {
        sendBugReport.addEventListener('click', function() {
uccessMessages.forEach(message => {
              message.classList.remove('is-hidden');
          });
        });
    }

解释一下以上JavaScript代码，对于这个问题报告模态框，我们给触发模态框触发按钮（含有类名open-modal-button）添加了一个事件监听器，然后通过close-modal-button按钮关闭模态框。

移动端toggle菜单

当视口宽度小于特定断点，Bulma导航栏会用一个汉堡图标代替，需要使用JavaScript脚本来控制导航的显示和隐藏。给汉堡图标添加事件监听器，当点击展开的时候给汉堡元素和菜单项添加is-active类。

    var burger = document.querySelector('.burger');
    var menu = document.querySelector('.navbar-menu')
    if (burger ! == null) {
        burger.addEventListener('click', function() {
          burger.classList.toggle('is-active');
          menu.classList.toggle('is-active');
      });
    }

通知

通知组件可用于对用户操作反馈信息，如下示例给问题报告模态框添加了一条通知消息：

    <div class="notification is-success is-hidden modal-success-notification">
        <button class="delete close-notification"></button>
          <span class="fa fa-bug"></span> Thanks. Your bug has been reported.
    </div>

当点击按钮的时候会显示通知，点击通知消息组件的关闭图标即可关闭通知消息。可以使用．close-notification类给通知的关闭图标添加JavaScript事件监听器来实现关闭逻辑，实现脚本如下：

    var closeNotification = document.querySelectorAll('.close-notification');
    if (closeNotification.length > 0) {
        closeNotification.forEach(closeIcon => {
          closeIcon.addEventListener('click', () => {
              closeIcon.closest('.notification').remove();
          });
        });
    }

删除图书功能

在图书列表中添加删除图书功能的实现代码如下，给图书列表的每一本书添加一个删除按钮并监听点击删除事件，点击删除对应图书。

    // 删除一项
    var deleteItem = document.querySelectorAll('.delete-item');
    if (deleteItem.length > 0) {
        deleteItem.forEach(button => {
          button.addEventListener('click', function() {
              button.closest('.column').remove();
          });
        })
    }

删除客户功能

如下代码用于删除客户列表中的客户，在客户表格中添加删除按钮并监听点击删除事件，点击删除对应客户。

    // 删除一位客户
    var deleteUserButton = document.querySelectorAll('.delete-user');
    if (deleteUserButton.length > 0) {
        deleteUserButton.forEach(button => {
          button.addEventListener('click', function() {
              button.closest('tr').remove();
          });
        });
    }