jQuery

套用 beyond 的 jQuery plugin

JavaScript Modules
import $ from 'jquery'
import * as beyond from '@superlanding/beyond'
import bindJQuery from '@superlanding/beyond/dist/beyond-jquery'

bindJQuery(beyond, $)
Browser
const { $, beyond } = window
const bindJQuery = window['beyond-jquery'].default

bindJQuery(beyond, $)

各元件範例

Alert
// 綁定 alert 的行為到 dom 上
// 所以有 data-dismiss="alert" 的元素被點擊後可以關閉 alert 訊息
const $alerts = $('[data-alert]').alert()

// 移除 alerts 的 listeners
$alert.destroy()
Checkbox
// 綁定 checkbox 的 focus style 到 dom 上
const $checkboxes = $('input[type="checkbox"]').checkbox()

// 移除 checkbox 的 listeners
$checkboxes.destroy()
Dropdown
// 綁定 dropdown 的行為到 dom 上
// options 請參考 Dropdown 元件頁面的說明
$dropdowns = $('[data-dropdown]').dropdown(options)

// 移除 dropdown 的 listeners
$dropdowns.destroy()
Menu
// 綁定 menu 的行為到 dom 上
$menus = $('[data-menu-toggle]').menu()

// 移除 menu 的 listeners
$menus.destroy()
Navbar
// 綁定 navbar 的 到 dom 上
$navbars = $('[data-navbar]').navbar()

// 移除 navbar 的 listeners
$navbars.destroy()
Radio
// 綁定 radio 的 focus style 到 dom 上
$radios = $('input[type="radio"]').radio()

// 移除 radio 的 listeners
$radios.destroy()
Sidebar
// 綁定 sidebar 的行為到 dom 上
$sidebar = $('[data-sidebar-opener]').sidebar()

// 移除 sidebar 的 listeners
$sidebar.destroy()
Tabbox
// 綁定 tabbox 的行為到 dom 上
$tabboxes = $('[data-tabbox]').tabbox()

// 移除 tabbox 的 listeners
$tabboxes.destroy()
Tooltip
// 綁定 tooltip 的行為到 dom 上
$tooltips = $('[data-tooltip]').tooltip()

// 移除 tooltip 的 listeners
$tooltips.destroy()
Autocomplete
// 綁定 autocomplete 的行為到 dom 上
// options 請參考 Autocomplete 元件說明頁
$autocompletes = $('[data-autocomplete]').autocomplete(options)

// 移除 autocomplete 的 listeners
$autocompletes.destroy()
Btn
// 綁定 btn 的行為到 dom 上
$btns = $('[data-btn]').btn()

// 移除 autocomplete 的 listeners
$btns.destroy()
DateTimeRanger
// 綁定 dateTimeRanger 的行為到 dom 上
// options 請參考 DateTimeRanger 元件說明頁
$dateTimeRangers = $('[data-date-time-ranger]').dateTimeRanger(options)

// 移除 dateTimeRanger 的 listeners
$dateTimeRangers.destroy()
Datepicker
// 綁定 datepicker 的行為到 dom 上
// options 請參考 Datepicker 元件說明頁
const timestamp = +new Date() / 1000
$datepickers = $('[data-datepicker]').datepicker(timestamp, options)

// 移除 datepicker 的 listeners
$datepickers.destroy()
Modal
// 綁定 modal 的行為到 dom 上
// options 請參考 Modal 元件說明頁
$modals = $('[data-modal-opener]').modal(options)

// 移除 modal 的 listeners
$modals.destroy()
SearchDropdown
// 綁定 searchDropdown 的行為到 dom 上
// options 請參考 SearchDropdown 元件說明頁
$searchDropdowns = $('[data-search-dropdown]').searchDropdown(options)

// 移除 searchDropdown 的 listeners
$searchDropdowns.destroy()
Toast
// 建立 Toast 控制物件
const toast = $.fn.toast()

toast.send('Hello World')

// 移除 toast 建立在 document 上的 dom 與 listeners
toast.destroy()