1. HTML Class の使い方
このClassはJavaScriptの class {} ではありません。 HTML要素の class="" に機能Classを設定し、そのClassと1対1のPublic APIを呼び出すための宣言的な入口です。
- Class一覧から使用する機能を選ぶ
- HTML要素の
class="" にClass名を設定する data-bone-event でいつ呼ぶかを設定するdata-bone-args / data-bone-arg-N でAPI引数を渡す- 戻り値はResult / State契約から取得する
<div class="bone-html-class-use bone-combobox-defaults" data-bone-event="manual"></div>
Class一覧
左側の Class一覧 38件 からClassを選択すると、そのClass専用の説明・引数・HTML例・実行・Resultを表示します。
2. Class共通引数契約
HTMLの class="" は「どのPublic APIを使うか」を指定します。Public APIへ渡す引数と呼出タイミングは、以下の共通 data-bone-* 属性で指定します。
実行マーカー: 機能Classは bone-html-class-use と組み合わせて使用します。例: class="bone-html-class-use bone-bone-combobox-defaults"。既存CSS Classを誤実行しないための共通契約です。
| 属性 | 役割 | 値 / Default | 説明 |
|---|
class | 機能Class | bone-html-class-use bone-...-... | bone-html-class-use とClass一覧の機能Classを同じ class="" に設定します。対応Public APIと1対1です。 |
data-bone-event | 起動タイミング | load / click / input / change / manual 等
Default: load | 複数指定は空白またはカンマ区切り。manual は自動実行せず、Bridgeの invoke() から実行します。 |
data-bone-args | 引数一括指定 | JSON Array | Public APIの引数順そのままのJSON配列です。例: ["$self","$value",{}] |
data-bone-arg-N | 引数個別指定 | Nは0始まり | data-bone-arg-0, data-bone-arg-1 のように1引数ずつ指定します。一括指定より個別値を補完できます。 |
data-bone-once | イベント1回限定 | true / Default: false | click等のイベント監視を1回だけ実行したい場合に指定します。 |
data-bone-append-result | Element戻り値 | false でappend停止
Default: append | Public APIがElementを返した場合、既定ではClass設定要素へappendします。 |
data-bone-throw | Debug再throw | true / Default: false | Class実行エラーをResultへ保存した後、Debug用に非同期で再throwします。 |
特殊値
| 値 | 解決内容 |
|---|
$self | Classを設定したHTML要素そのものを渡します。element / target / root などの第1引数に使用します。 |
$event | Class起動の原因になったDOM Eventを渡します。click / input / change等のイベント情報が必要なAPI用です。 |
$value | input / textarea / select等の現在の value を渡します。 |
$checked | checkbox / radio等の現在の checked(Boolean)を渡します。 |
$text | Classを設定した要素の textContent を渡します。 |
$dataset | Classを設定した要素の dataset を通常Objectとして渡します。 |
$files | file input の FileList を渡します。 |
$selector:... | ...をCSS selectorとして document.querySelector() で解決し、そのElementを渡します。 |
$id:... | ...をDOM idとして document.getElementById() で解決し、そのElementを渡します。 |
$global:... | window / globalThis上の指定名の値を渡します。 |
$handler:... | window / globalThis上の指定名のFunctionをコールバック引数として渡します。 |
引数の優先順
data-bone-args で配列を読み込み、未指定位置を data-bone-arg-N と自動補完（第1引数のelement系は $self、event系は $event）で埋めます。
3. Result / State 契約
Class経由のPublic API実行結果は、Class設定要素自身へ保存されます。成功・失敗をHTMLとEventの両方から確認できます。
| 結果 | 内容 | 用途 |
|---|
element.__boneClassResult | Public APIの生の戻り値 | JavaScript側で元のObject / Element / primitiveをそのまま参照します。 |
data-bone-class-status | ok / error | HTML属性だけで直近のClass実行成否を確認します。 |
data-bone-class-result | 戻り値のserialize結果 | DOM Inspectorやテストから結果概要を確認します。長い結果は1000文字で省略します。 |
bone-html-class-result | 成功CustomEvent | detail に componentId / className / api / value を持ちます。 |
bone-html-class-error | 失敗CustomEvent | detail に componentId / className / api / error を持ちます。 |
このガイドRuntime実行結果をClass別画面に表示
左のClass一覧からClassを選択し「このClassを実行」を押すと、実Public APIのStatus / Resultを表示します。
bone-combobox-defaults
BoneComboBox.defaults の公開機能をHTML Classから呼び出します。
| HTML Class | bone-combobox-defaults |
|---|
| 対応Public API | BoneComboBox.defaults |
|---|
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-defaults" data-bone-event="manual"></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-normalize-options
設定をComboBoxの正式契約に沿う形へ正規化します。
| HTML Class | bone-combobox-normalize-options |
|---|
| 対応Public API | BoneComboBox.normalizeOptions |
|---|
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | input | API定義値 | data-bone-arg-0
または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-normalize-options" data-bone-event="manual" data-bone-args='[null]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-validate-value
ComboBoxの入力・状態を検証し、Validation結果を返します。
| HTML Class | bone-combobox-validate-value |
|---|
| 対応Public API | BoneComboBox.validateValue |
|---|
| 使用する場面 | HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | value | String / API許容値 | data-bone-arg-0
または data-bone-args[0] | null |
| 1 | options | Object | data-bone-arg-1
または data-bone-args[1] | {} |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-validate-value" data-bone-event="manual" data-bone-args='[null,{}]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-find-item
BoneComboBox.findItem の公開機能をHTML Classから呼び出します。
| HTML Class | bone-combobox-find-item |
|---|
| 対応Public API | BoneComboBox.findItem |
|---|
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | its | API定義値 | data-bone-arg-0
または data-bone-args[0] | null |
| 1 | value | String / API許容値 | data-bone-arg-1
または data-bone-args[1] | "$value" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-find-item" data-bone-event="manual" data-bone-args='[null,"$value"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-create
ComboBoxの新しい要素またはRuntimeオブジェクトを生成します。
| HTML Class | bone-combobox-create |
|---|
| 対応Public API | BoneComboBox.create |
|---|
| 使用する場面 | HTML上のホスト要素からUI生成・描画を開始したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | input | API定義値 | data-bone-arg-0
または data-bone-args[0] | null |
| 1 | options | Object | data-bone-arg-1
または data-bone-args[1] | {} |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-create" data-bone-event="manual" data-bone-args='[null,{}]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-is-instance
対象がComboBoxの「Instance」条件を満たすか判定します。
| HTML Class | bone-combobox-is-instance |
|---|
| 対応Public API | BoneComboBox.isInstance |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-is-instance" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-get-bone
ComboBoxの「Bone」を取得します。
| HTML Class | bone-combobox-get-bone |
|---|
| 対応Public API | BoneComboBox.getBone |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | state(e | API定義値 | data-bone-arg-0
または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-get-bone" data-bone-event="manual" data-bone-args='[null]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-get-value
ComboBoxの「Value」を取得します。
| HTML Class | bone-combobox-get-value |
|---|
| 対応Public API | BoneComboBox.getValue |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | state(e | API定義値 | data-bone-arg-0
または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-get-value" data-bone-event="manual" data-bone-args='[null]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-get-editing-value
ComboBoxの「Editing Value」を取得します。
| HTML Class | bone-combobox-get-editing-value |
|---|
| 対応Public API | BoneComboBox.getEditingValue |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | state(e | API定義値 | data-bone-arg-0
または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-get-editing-value" data-bone-event="manual" data-bone-args='[null]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-get-committed-value
ComboBoxの「Committed Value」を取得します。
| HTML Class | bone-combobox-get-committed-value |
|---|
| 対応Public API | BoneComboBox.getCommittedValue |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | state(e | API定義値 | data-bone-arg-0
または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-get-committed-value" data-bone-event="manual" data-bone-args='[null]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-get-options
ComboBoxの「Options」を取得します。
| HTML Class | bone-combobox-get-options |
|---|
| 対応Public API | BoneComboBox.getOptions |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | state(e | API定義値 | data-bone-arg-0
または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-get-options" data-bone-event="manual" data-bone-args='[null]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-get-items
ComboBoxの「Items」を取得します。
| HTML Class | bone-combobox-get-items |
|---|
| 対応Public API | BoneComboBox.getItems |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | state(e | API定義値 | data-bone-arg-0
または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-get-items" data-bone-event="manual" data-bone-args='[null]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-get-input
ComboBoxの「Input」を取得します。
| HTML Class | bone-combobox-get-input |
|---|
| 対応Public API | BoneComboBox.getInput |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-get-input" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-get-trigger
ComboBoxの「Trigger」を取得します。
| HTML Class | bone-combobox-get-trigger |
|---|
| 対応Public API | BoneComboBox.getTrigger |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-get-trigger" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-get-text-box
ComboBoxの「Text Box」を取得します。
| HTML Class | bone-combobox-get-text-box |
|---|
| 対応Public API | BoneComboBox.getTextBox |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-get-text-box" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-get-select
ComboBoxの「Select」を取得します。
| HTML Class | bone-combobox-get-select |
|---|
| 対応Public API | BoneComboBox.getSelect |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-get-select" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-get-label
ComboBoxの「Label」を取得します。
| HTML Class | bone-combobox-get-label |
|---|
| 対応Public API | BoneComboBox.getLabel |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-get-label" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-get-dropdown
ComboBoxの「Dropdown」を取得します。
| HTML Class | bone-combobox-get-dropdown |
|---|
| 対応Public API | BoneComboBox.getDropdown |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-get-dropdown" data-bone-event="manual"></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-open
ComboBoxの対象UI・データを開きます。
| HTML Class | bone-combobox-open |
|---|
| 対応Public API | BoneComboBox.open |
|---|
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-open" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-close
ComboBoxの対象UI・データを閉じます。
| HTML Class | bone-combobox-close |
|---|
| 対応Public API | BoneComboBox.close |
|---|
| 使用する場面 | HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-close" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-toggle
BoneComboBox.toggle の公開機能をHTML Classから呼び出します。
| HTML Class | bone-combobox-toggle |
|---|
| 対応Public API | BoneComboBox.toggle |
|---|
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-toggle" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-select
ComboBoxの選択状態または選択範囲を設定します。
| HTML Class | bone-combobox-select |
|---|
| 対応Public API | BoneComboBox.select |
|---|
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
| 1 | value | String / API許容値 | data-bone-arg-1
または data-bone-args[1] | "$value" |
| 2 | deliverIt | Function | data-bone-arg-2
または data-bone-args[2] | "$handler:handlerName" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-select" data-bone-event="manual" data-bone-args='["$self","$value","$handler:handlerName"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-set-value
ComboBoxの「Value」を設定します。
| HTML Class | bone-combobox-set-value |
|---|
| 対応Public API | BoneComboBox.setValue |
|---|
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
| 1 | value | String / API許容値 | data-bone-arg-1
または data-bone-args[1] | "$value" |
| 2 | deliverIt | Function | data-bone-arg-2
または data-bone-args[2] | "$handler:handlerName" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-set-value" data-bone-event="manual" data-bone-args='["$self","$value","$handler:handlerName"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-set-editing-value
ComboBoxの「Editing Value」を設定します。
| HTML Class | bone-combobox-set-editing-value |
|---|
| 対応Public API | BoneComboBox.setEditingValue |
|---|
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
| 1 | value | String / API許容値 | data-bone-arg-1
または data-bone-args[1] | "$value" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-set-editing-value" data-bone-event="manual" data-bone-args='["$self","$value"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-commit
ComboBoxの現在値を正式値としてcommitします。
| HTML Class | bone-combobox-commit |
|---|
| 対応Public API | BoneComboBox.commit |
|---|
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
| 1 | source | String / API許容値 | data-bone-arg-1
または data-bone-args[1] | "html-class" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-commit" data-bone-event="manual" data-bone-args='["$self","html-class"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-build-output
ComboBoxで使用する出力・定義オブジェクトを構築します。
| HTML Class | bone-combobox-build-output |
|---|
| 対応Public API | BoneComboBox.buildOutput |
|---|
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-build-output" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-apply-joint-input
ComboBoxへ指定内容を適用します。
| HTML Class | bone-combobox-apply-joint-input |
|---|
| 対応Public API | BoneComboBox.applyJointInput |
|---|
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
| 1 | payload | API定義値 | data-bone-arg-1
または data-bone-args[1] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-apply-joint-input" data-bone-event="manual" data-bone-args='["$self",null]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-create-group-image-editor
ComboBoxの新しい要素またはRuntimeオブジェクトを生成します。
| HTML Class | bone-combobox-create-group-image-editor |
|---|
| 対応Public API | BoneComboBox.createGroupImageEditor |
|---|
| 使用する場面 | HTML上のホスト要素からUI生成・描画を開始したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
| 1 | gi | API定義値 | data-bone-arg-1
または data-bone-args[1] | null |
| 2 | o | API定義値 | data-bone-arg-2
または data-bone-args[2] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-create-group-image-editor" data-bone-event="manual" data-bone-args='["$self",null,null]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-create-item-image-editor
ComboBoxの新しい要素またはRuntimeオブジェクトを生成します。
| HTML Class | bone-combobox-create-item-image-editor |
|---|
| 対応Public API | BoneComboBox.createItemImageEditor |
|---|
| 使用する場面 | HTML上のホスト要素からUI生成・描画を開始したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
| 1 | gi | API定義値 | data-bone-arg-1
または data-bone-args[1] | null |
| 2 | ci | API定義値 | data-bone-arg-2
または data-bone-args[2] | null |
| 3 | o | API定義値 | data-bone-arg-3
または data-bone-args[3] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-create-item-image-editor" data-bone-event="manual" data-bone-args='["$self",null,null,null]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-sync-parent-style
BoneComboBox.syncParentStyle の公開機能をHTML Classから呼び出します。
| HTML Class | bone-combobox-sync-parent-style |
|---|
| 対応Public API | BoneComboBox.syncParentStyle |
|---|
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-sync-parent-style" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-connect-output
ComboBoxの接続・出力先を接続状態へ変更します。
| HTML Class | bone-combobox-connect-output |
|---|
| 対応Public API | BoneComboBox.connectOutput |
|---|
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
| 1 | options | Object | data-bone-arg-1
または data-bone-args[1] | {} |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-connect-output" data-bone-event="manual" data-bone-args='["$self",{}]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-disconnect-output
ComboBoxの接続・出力先を切断状態へ変更します。
| HTML Class | bone-combobox-disconnect-output |
|---|
| 対応Public API | BoneComboBox.disconnectOutput |
|---|
| 使用する場面 | HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-disconnect-output" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-set-target-ready
ComboBoxの「Target Ready」を設定します。
| HTML Class | bone-combobox-set-target-ready |
|---|
| 対応Public API | BoneComboBox.setTargetReady |
|---|
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
| 1 | v | API定義値 | data-bone-arg-1
または data-bone-args[1] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-set-target-ready" data-bone-event="manual" data-bone-args='["$self",null]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-clear-output-block
ComboBoxの指定状態・内容をクリアします。
| HTML Class | bone-combobox-clear-output-block |
|---|
| 対応Public API | BoneComboBox.clearOutputBlock |
|---|
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-clear-output-block" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-get-output-state
ComboBoxの「Output State」を取得します。
| HTML Class | bone-combobox-get-output-state |
|---|
| 対応Public API | BoneComboBox.getOutputState |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-get-output-state" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-get-output-queue
ComboBoxの「Output Queue」を取得します。
| HTML Class | bone-combobox-get-output-queue |
|---|
| 対応Public API | BoneComboBox.getOutputQueue |
|---|
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-get-output-queue" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-reset
ComboBoxを既定またはcommit済み状態へ戻します。
| HTML Class | bone-combobox-reset |
|---|
| 対応Public API | BoneComboBox.reset |
|---|
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-reset" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN
bone-combobox-destroy
ComboBoxの対象インスタンスを破棄し、関連状態を解放します。
| HTML Class | bone-combobox-destroy |
|---|
| 対応Public API | BoneComboBox.destroy |
|---|
| 使用する場面 | HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。 |
|---|
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
|---|
引数
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|
| 0 | e | API定義値 | data-bone-arg-0
または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
HTML使用例
<div class="bone-html-class-use bone-combobox-destroy" data-bone-event="manual" data-bone-args='["$self"]'></div>
実UI / Class実行
下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
Result / State
StatusNOT RUN
このClassはまだ実行していません。
現在ページでの使用状況
Class設定要素0最終状態NOT RUN