過濾按鈕

Result HTML JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<div class="tabbox tabbox-uno" data-tabbox>
   <button class="tab-btn" data-tabbox-item="all" data-default>全部</button><!--
--><button class="tab-btn"
           data-tabbox-item="new">新訂單</button><!--
--><button class="tab-btn"
           data-tabbox-item="waiting">等待中</button><!--
--><button class="tab-btn"
           data-tabbox-item="confirming">確認中</button><!--
--><button class="tab-btn"
           data-tabbox-item="confirmed">已確認</button><!--
--><button class="tab-btn"
           data-tabbox-item="wait-for-shipping">待出貨</button><!--
--><button class="tab-btn"
           data-tabbox-item="shipping"
           >出貨中</button><!--
--><button class="tab-btn"
           data-tabbox-item="shipped">已出貨</button><!--
--><button class="tab-btn"
           data-tabbox-item="delay">延遲出貨</button><!--
--><button class="tab-btn"
           data-tabbox-dropdown
           data-target="menu-md-exchange">
           退換貨
     <i class="icon-chevron-down"></i>
   </button><!--
--><button class="tab-btn"
           data-tabbox-dropdown
           data-target="menu-md-other">
           其他
     <i class="icon-chevron-down"></i>
   </button><!--
--><button class="tab-btn"
           data-tabbox-item="invoice-unissued">未開發票</button><!--
--><button class="tab-btn"
           data-tabbox-item="invoice-issued">已開發票</button><!--
--><button class="tab-btn"
           data-tabbox-item="invoice-debited">發票折讓</button><!--
--><button class="tab-btn"
           data-tabbox-item="invoice-voided">發票作廢</button><!--
--><button class="tab-btn"
           data-tabbox-item="7days"
           >七日內出貨</button>
</div>

<div class="dropdown-menu"
     data-dropdown-menu="menu-md-other"
     data-place="bottom">
  <a class="dropdown-item"
    data-dropdown-item
    data-tabbox-item="temp">臨時</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="other">其他</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="cancelled">已取消</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="deleted">已刪除</a>
</div>

<div class="dropdown-menu"
     data-dropdown-menu="menu-md-exchange"
     data-place="bottom">
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="returning">退貨中</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="exchanging">換貨中</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="returned">已退貨</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="refunded">已退款</a>
</div>

1
2
3
4
const { Tabbox } = window.beyond

document.querySelectorAll('[data-tabbox]')
  .forEach(dom => new Tabbox(dom))

Result HTML JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<div class="tabbox tabbox-sm" data-tabbox>
  <div class="separator">
    <button class="tab-btn"
            data-tabbox-item="all"
            data-default>全部</button>
    <div class="inline-separator"></div>
      <button class="tab-btn tab-btn-type1"
              data-tabbox-item="new"
              data-active-color="#6dbc80">新訂單</button><!--
      --><button class="tab-btn tab-btn-type1"
                 data-tabbox-item="waiting"
                 data-active-color="#ff5c5c">等待中</button><!--
      --><button class="tab-btn tab-btn-type1"
                 data-tabbox-item="confirming"
                 data-active-color="#ff5c5c">確認中</button><!--
      --><button class="tab-btn tab-btn-type1"
                 data-tabbox-item="confirmed"
                 data-active-color="#19af95">已確認</button>
    <div class="inline-separator"></div>
      <button class="tab-btn tab-btn-type2"
              data-tabbox-item="wait-for-shipping"
              data-active-color="#993192">待出貨</button><!--
      --><button class="tab-btn tab-btn-type2"
                 data-tabbox-item="shipping"
                 data-active-color="#5d69e3">出貨中</button><!--
      --><button class="tab-btn tab-btn-type2"
                 data-tabbox-item="shipped"
                 data-active-color="#8b8b9e">已出貨</button><!--
      --><button class="tab-btn tab-btn-type2"
                 data-tabbox-item="delay"
                 data-active-color="#e03953">延遲出貨</button>
     <div class="inline-separator"></div>
     <button class="tab-btn"
             data-tabbox-dropdown
             data-target="menu-sm-exchange">退換貨<i class="icon-chevron-down"></i></button><!--
     --><button class="tab-btn"
                data-tabbox-dropdown
                data-target="menu-sm-other">其他<i class="icon-chevron-down"></i></button><!--
     --><button class="tab-btn"
                data-tabbox-item="incompelte-order"
                data-active-color="#5d69e3">未下單</button>
  </div>
  <div class="separator">
    <button class="tab-btn tab-btn-type3"
            data-tabbox-item="type3-unissued"
            data-active-color="#5d69e3">未開發票</button><!--
    --><button class="tab-btn tab-btn-type3"
               data-tabbox-item="type3-issued"
               data-active-color="#5d69e3">已開發票</button><!--
    --><button class="tab-btn tab-btn-type3"
               data-tabbox-item="type3-debited"
               data-active-color="#5d69e3">發票折讓</button><!--
    --><button class="tab-btn tab-btn-type3"
               data-tabbox-item="type3-voided"
               data-active-color="#5d69e3">發票作廢</button>
    <div class="inline-separator"></div>
    <button class="tab-btn tab-btn-others"
            data-tabbox-item="7days"
            data-active-color="#7d7d7d">七日內出貨</button>
  </div>
</div>

<div class="dropdown-menu"
     data-dropdown-menu="menu-sm-other"
     data-place="bottom"
     data-align="left">
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="temp"
     data-active-color="#e03953">臨時</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="other"
     data-active-color="#e03953">其他</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="cancelled"
     data-active-color="#8b8b9e">已取消</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="deleted"
     data-active-color="#313864">已刪除</a>
</div>

<div class="dropdown-menu"
     data-dropdown-menu="menu-sm-exchange"
     data-place="bottom"
     data-align="left">
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="returning"
     data-active-color="#19af95">退貨中</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="exchanging"
     data-active-color="#19af95">換貨中</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="returned"
     data-active-color="#8b8b9e">已退貨</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="refunded"
     data-active-color="#8b8b9e">已退款</a>
</div>

1
2
3
4
const { Tabbox } = window.beyond

document.querySelectorAll('[data-tabbox]')
  .forEach(dom => new Tabbox(dom))

Result HTML JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<div class="tabbox" data-tabbox>
   <button class="tab-btn" data-tabbox-item="all" data-default>全部</button><!--
--><button class="tab-btn tab-btn-type0"
           data-tabbox-item="new"
           data-active-color="#018972">新訂單</button><!--
--><button class="tab-btn tab-btn-type0"
           data-tabbox-item="waiting"
           data-active-color="#018972">等待中</button><!--
--><button class="tab-btn tab-btn-type0"
           data-tabbox-item="confirming"
           data-active-color="#018972">確認中</button><!--
--><button class="tab-btn tab-btn-type0"
           data-tabbox-item="confirmed"
           data-active-color="#018972">已確認</button><!--
--><button class="tab-btn tab-btn-type1"
           data-tabbox-item="wait-for-shipping"
           data-active-color="#018972">待出貨</button><!--
--><button class="tab-btn tab-btn-type1"
           data-tabbox-item="shipping"
           data-active-color="#018972">出貨中</button><!--
--><button class="tab-btn tab-btn-type1"
           data-tabbox-item="shipped"
           data-active-color="#018972">已出貨</button><!--
--><button class="tab-btn tab-btn-type1"
           data-tabbox-item="delay"
           data-active-color="#018972">延遲出貨</button><!--
--><button class="tab-btn"
           data-tabbox-dropdown
           data-target="menu-md-exchange">
           退換貨
     <i class="icon-chevron-down"></i>
   </button><!--
--><button class="tab-btn"
           data-tabbox-dropdown
           data-target="menu-md-other">
           其他
     <i class="icon-chevron-down"></i>
   </button><!--
--><button class="tab-btn tab-btn-type3"
           data-tabbox-item="invoice-unissued"
           data-active-color="#5d69e3">未開發票</button><!--
--><button class="tab-btn tab-btn-type3"
           data-tabbox-item="invoice-issued"
           data-active-color="#5d69e3">已開發票</button><!--
--><button class="tab-btn tab-btn-type3"
           data-tabbox-item="invoice-debited"
           data-active-color="#5d69e3">發票折讓</button><!--
--><button class="tab-btn tab-btn-type3"
           data-tabbox-item="invoice-voided"
           data-active-color="#5d69e3">發票作廢</button><!--
--><button class="tab-btn"
           data-tabbox-item="7days"
           data-active-color="#7d7d7d">七日內出貨</button>
</div>

<div class="dropdown-menu"
     data-dropdown-menu="menu-md-other"
     data-place="bottom">
  <a class="dropdown-item"
    data-dropdown-item
    data-tabbox-item="temp"
    data-active-color="#e03953">臨時</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="other"
     data-active-color="#e03953">其他</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="cancelled"
     data-active-color="#8b8b9e">已取消</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="deleted"
     data-active-color="#313864">已刪除</a>
</div>

<div class="dropdown-menu"
     data-dropdown-menu="menu-md-exchange"
     data-place="bottom">
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="returning"
     data-active-color="#19af95">退貨中</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="exchanging"
     data-active-color="#19af95">換貨中</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="returned"
     data-active-color="#8b8b9e">已退貨</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="refunded"
     data-active-color="#8b8b9e">已退款</a>
</div>

1
2
3
4
const { Tabbox } = window.beyond

document.querySelectorAll('[data-tabbox]')
  .forEach(dom => new Tabbox(dom))

Result HTML JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<div class="tabbox tabbox-lg" data-tabbox>
  <button class="tab-btn"
          data-tabbox-item="all"
          data-default>全部</button><!--
--><button class="tab-btn tab-btn-type1"
           data-tabbox-item="new"
           data-active-color="#018972">新訂單</button><!--
--><button class="tab-btn tab-btn-type1"
           data-tabbox-item="waiting"
           data-active-color="#018972">等待中</button><!--
--><button class="tab-btn tab-btn-type1"
           data-tabbox-item="confirming"
           data-active-color="#018972">確認中</button><!--
--><button class="tab-btn tab-btn-type1"
           data-tabbox-item="confirmed"
           data-active-color="#018972">已確認</button><!--
--><button class="tab-btn tab-btn-type2"
           data-tabbox-item="wait-for-shipping"
           data-active-color="#018972">待出貨</button><!--
--><button class="tab-btn tab-btn-type2"
           data-tabbox-item="shipping"
           data-active-color="#018972">出貨中</button><!--
--><button class="tab-btn tab-btn-type2"
           data-tabbox-item="shipped"
           data-active-color="#018972">已出貨</button><!--
--><button class="tab-btn"
           data-tabbox-dropdown
           data-target="menu-lg-other">其他<i class="icon-chevron-down"></i></button><!--
--><button class="tab-btn"
           data-tabbox-dropdown
           data-target="menu-lg-exchange">退換貨<i class="icon-chevron-down"></i></button><!--
--><button class="tab-btn"
           data-tabbox-item="incompelte-order"
           data-active-color="#5d69e3">未下單</button><!--
--><button class="tab-btn tab-btn-type3"
           data-tabbox-item="type3-unissued"
           data-active-color="#5d69e3">未開發票</button><!--
--><button class="tab-btn tab-btn-type3"
           data-tabbox-item="type3-issued"
           data-active-color="#5d69e3">已開發票</button><!--
--><button class="tab-btn tab-btn-type3"
           data-tabbox-item="type3-debited"
           data-active-color="#5d69e3">發票折讓</button><!--
--><button class="tab-btn tab-btn-type3"
           data-tabbox-item="type3-voided"
           data-active-color="#5d69e3">發票作廢</button><!--
--><button class="tab-btn tab-btn-others"
           data-tabbox-item="7days"
           data-active-color="#7d7d7d">七日內出貨</button>
</div>

<div class="dropdown-menu"
     data-dropdown-menu="menu-lg-other"
     data-place="bottom">
  <a class="dropdown-item"
    data-tabbox-item="temp"
    data-active-color="#e03953">臨時</a>
  <a class="dropdown-item"
     data-tabbox-item="other"
     data-active-color="#e03953">其他</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item"
     data-tabbox-item="cancelled"
     data-active-color="#8b8b9e">已取消</a>
  <a class="dropdown-item"
     data-tabbox-item="deleted"
     data-active-color="#313864">已刪除</a>
</div>

<div class="dropdown-menu"
     data-dropdown-item
     data-dropdown-menu="menu-lg-exchange"
     data-place="bottom">
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="returning"
     data-active-color="#19af95">退貨中</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="exchanging"
     data-active-color="#19af95">換貨中</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="returned"
     data-active-color="#8b8b9e">已退貨</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="refunded"
     data-active-color="#8b8b9e">已退款</a>
</div>

1
2
3
4
const { Tabbox } = window.beyond

document.querySelectorAll('[data-tabbox]')
  .forEach(dom => new Tabbox(dom))

Tabbox HTML

按鈕 HTML 需要符合 button[data-tabbox-item]，dropdown button 元素須符合 button[data-tabbox-dropdown]

<div class="tabbox">
   <button class="tab-btn" data-tabbox-item="all" data-default>全部</button>
   <button class="tab-btn"
           data-tabbox-item="new"
           data-active-color="#018972">新訂單</button>
   <button class="tab-btn"
           data-tabbox-dropdown
           data-target="menu-exchange">退換貨<i class="icon-chevron-down"></i></button>
</div>

<div class="dropdown-menu"
     data-dropdown-menu="menu-exchange"
     data-place="bottom"
     data-align="left">
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="returning"
     data-active-color="#19af95">退貨中</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="exchanging"
     data-active-color="#19af95">換貨中</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="returned"
     data-active-color="#8b8b9e">已退貨</a>
  <a class="dropdown-item"
     data-dropdown-item
     data-tabbox-item="refunded"
     data-active-color="#8b8b9e">已退款</a>
</div>

屬性名稱	用途
data-default	預設要設定為 active 的項目
data-tabbox-item	tabbox 項目的 unique ID，會用在 options.change 的回傳，例如 data-tabbox-item="item1"
data-active-color	指定項目 active 時的底線顏色

Tabbox JS

constructor

const tabbox = new Tabbox(dom, options)

名稱	型別	說明
dom	HTMLElement	需要顯示 tabbox 的元素
options	object	tabbox 的選項
options.change	function	tabbox 被更新時的 callback, 會回傳物件包含屬性 id - string - data-tabbox-item 設定的值 type - string - btn 或 dropdown
options.click	function	按鈕或選單被點擊時的 callback, 會回傳物件包含屬性 id - string - data-tabbox-item 設定的值 type - string - btn 或 dropdown

destroy

移除 Tabbox 產生的 dom 元素與 event listeners

tabbox.destroy()