Skip to content

Plugins

Jump to bottom
Jong Won Kim edited this page Nov 10, 2025 · 3 revisions

Interfaces

plugin

Property
component Component[]
action action

Classes

UtilAction

Static Methods

Method
plugin plugin
component Component | Component[] require

Actions

sub-select

  • 메인 select의 값 변경 시 해당값을 부모 값으로 가지고 있는 하위 select의 옵션 목록 표시 변경
    • data-eu-target: 하위 select의 data-eu-name 값
    • data-eu-name: 하위 select의 구분값
    • data-eu-main: 메인 select의 option에 연결 할 value
  • 이벤트
    • change
<select data-sce-action="sub-select" data-sce-target="{target-select}">
  <option value="{main-value-a}">A</option>
  <option value="{main-value-b}">B</option>
</select>
<select data-sce-name="{target-select}">
  <option style="display: none" data-sce-main="{main-value-a}" value="1">1</option>
  <option style="display: none" data-sce-main="{main-value-a}" value="2">2</option>
  <option style="display: none" data-sce-main="{main-value-a}" value="3">3</option>
  <option style="display: none" data-sce-main="{main-value-b}" value="4">4</option>
  <option style="display: none" data-sce-main="{main-value-b}" value="5">5</option>
  <option style="display: none" data-sce-main="{main-value-b}" value="6">6</option>
</select>

check-all

  • 메인 input:checkbox의 check상태를 변경 시 해당 input:checkbox의 모든 하위 input:checkbox의 check상태 변경
    • data-eu-target: 하위 input:checkbox의 data-eu-name 값
    • data-eu-name: 하위 input:checkbox의 구분값
  • 이벤트
    • click
<input type="checkbox" data-sce-action="check-all" data-sce-target="{target-input}">
<input type="checkbox" data-sce-name="{target-input}">
<input type="checkbox" data-sce-name="{target-input}">

number-only

  • input:text의 입력을 숫자만 허용하도록 한다.
  • data-eu-type
    • A: 숫자만 허용
    • B: 소숫점 및 음수 허용
    • C: #,###.# 형식으로 변환
    • optional
    • defalut: A
  • data-eu-min: 최소값
    • optional
  • data-eu-max: 최대값
    • optional
  • data-eu-decimals: 소숫점 아래 자리 수
    • optional
    • defalut: 0
  • 이벤트
    • keydown
    • input
    • blur
<input type="text" data-sce-action="number-only" [ data-sce-type="{( A | B | C )}" ] [ data-sce-min="{min-value}" ] [ data-sce-max="{max-value}" ] [ data-sce-decimal="{decimal-value}" ]>

check

  • input:check의 check 상태에 따라 하위 input의 값을 변경 한다.
    • data-eu-target: 하위 input의 data-eu-name 값
    • data-eu-name: 하위 input의 구분값
    • data-eu-true: input:check의 check 상태가 true 일 경우 value
    • data-eu-false: input:check의 check 상태가 false 일 경우 value
  • 이벤트
    • click
<input type="checkbox" data-sce-action="check" data-sce-target="{target-input}">
<input type="hidden" value="{false-value}" data-sce-name="{target-input}" data-sce-true="{true-value}" data-sce-false="{false-value}">

Clone this wiki locally