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();
});
});
}
评论前必须登录!
注册