布尔马js

非官方丢失的 JavaScript 库 布玛 网站.

开始

下载 bulma-js.js (英语) 在这里, 使用该 jsDelivr CDN 请检查url=值 (帮助), (中文(简体) ), 或从 npm 安装.

npm install @cityssm/bulma-js

在您的 HTML 中添加以下内容 .

<script src="dist/bulma-js.js"></script>
<script>
  bulmaJS.init()
</script>

选项

切换功能

bulmaJS.setConfig('bulma.burger', true)
bulmaJS.setConfig('bulma.dropdown', true)
bulmaJS.setConfig('dropdown', true)
bulmaJS.setConfig('tabs', true)
bulmaJS.setConfig('window.collapse', true) // close dropdowns when clicked outside

设置唯一元素 Id 前缀

bulmaJS.setConfig('bulmaJS.elementIdPrefix', 'bulma-js-')

设置“ 初始化” 属性名称

bulmaJS.setConfig('bulmaJS.initAttribute', 'data-bulma-js-init')

初始化完整页面上的功能

在页面内容更改后可多次调用 .

bulmaJS.init()

一项要素的儿童初始功能化

在使用 AJAX 调用区域后有所帮助 .

bulmaJS.init(document.getElementById('container-element'))

特长如此之远

• 切换合适的 Bulma 类 和 ARIA 属性。 。 。 .
• 关闭 dropdown 财务报告和审定财务报表 navbar-dropdown 元素,当网页的其他部分被点击时.

删除按钮( 信件、 通知和标签)

https://bulma.io/documentation/elements/notification/ 页面存档备份,存于互联网档案馆, (中文(简体) ), https://bulma.io/documentation/communitys/messages/ 页面存档备份,存于互联网档案馆, (中文(简体) ), https://bulma.io/documentation/elements/tag/ 页面存档备份,存于互联网档案馆

• 支助 delete 按钮 notification, (中文(简体) ), message,以及 tag 要素. (谢谢) 硫磺酰胺 (为特写. )

导航

https://bulma.io/documentation/communitys/navbar/ 页面存档备份,存于互联网档案馆

• 支助 navbar-burger 键.
• 支助 navbar-dropdown 要素.

下坠

https://bulma.io/documentation/组件/滴入/

• 支助 dropdown 要素.

标签

https://bulma.io/documentation/communitys/tabs/ (中文(简体) )

• 支助 tabs 要素.
• 使用 href 要链接到 相应的标签面板.
• 所有标签板都应该是兄弟姐妹。 用不活动标签面板隐藏 is-hidden 课.

模块提醒和确认

建立无障碍警报和确认的方法.

bulmaJS.alert('This is a basic alert!')

bulmaJS.alert({
  title: 'Alert',
  message: 'This is a <strong>more complex</strong> alert.',
  messageIsHtml: true,
  contextualColorName: 'success',
  okButton: {
    text: 'Yes, But Not Too Complex',
    callbackFunction: () => {
      console.log('OK Button Pressed')
    }
  }
})

bulmaJS.confirm({
  title: 'Question',
  message: 'Have you ever been to Sault Ste. Marie, Ontario?',
  contextualColorName: 'primary',
  okButton: {
    text: 'Yes, I Have',
    callbackFunction: () => {
      console.log('OK Button Pressed')
    }
  },
  cancelButton: {
    text: "No, But I'd Like To",
    callbackFunction: () => {
      console.log('Cancel Button Pressed')
    }
  }
})

替代 Bulma JavaScript 工程

这个 布尔马JS 项目 也为 Bulma 提供 JavaScript 功能, 已经 更完整一点 比这个计划. 我建议你看看 如果你需要比这里更多的功能.

这个项目在几个方面走向不同的方向.

• 在 HTML 中优先使用简单的用法 script 标签。 没有 import 或者说 require 有必要.
• 可用类型脚本 .
• 超越了 仅仅想着 is-active Bulma课程,并管理ARIA属性,同时增加无障碍性.
• 试图纠正可能影响无障碍的常见问题(即角色缺失,身份缺失).