102 lines
3.7 KiB
HTML
102 lines
3.7 KiB
HTML
<div>
|
||
<h1>checkbox</h1>
|
||
<hr />
|
||
<p>
|
||
创建一个统一样式的复选框元素，或者解析转换页面上特定类型的 label
|
||
标签为复选框元素。
|
||
</p>
|
||
<h2>createCheckbox</h2>
|
||
<code>function createCheckbox(opts?: CheckboxOptions): HTMLElement</code>
|
||
<h3>opts?: CheckboxOptions</h3>
|
||
<p>
|
||
复选框初始参数，结构为
|
||
<pre>interface CheckboxOptions {
|
||
type?: string;
|
||
label?: string;
|
||
checked?: boolean;
|
||
isImage?: boolean;
|
||
imageHeight?: Number;
|
||
checkedNode?: HTMLElement;
|
||
uncheckedNode?: HTMLElement;
|
||
onchange?: (this: HTMLInputElement, ev: Event) => any;
|
||
}</pre>
|
||
</p>
|
||
<h3>type?: string</h3>
|
||
<p>
|
||
复选框图标的样式，可选值目前有 <code>fa-regular</code>、<code>fa-light</code>、<code>fa-solid</code>
|
||
</p>
|
||
<h3>label?: string</h3>
|
||
<p>
|
||
复选框的标签文本
|
||
</p>
|
||
<h3>checked?: boolean</h3>
|
||
<p>
|
||
初始是否选中
|
||
</p>
|
||
<h3>isImage?: boolean</h3>
|
||
<p>
|
||
是否为图片复选框
|
||
</p>
|
||
<h3>imageHeight?: Number</h3>
|
||
<p>
|
||
为图片复选框时的图片限制高度
|
||
</p>
|
||
<h3>checkedNode?: HTMLElement</h3>
|
||
<p>
|
||
为图片复选框时的选中时显示的元素
|
||
</p>
|
||
<h3>uncheckedNode?: HTMLElement</h3>
|
||
<p>
|
||
为图片复选框时的未选中时显示的元素
|
||
</p>
|
||
<h3>onchange?: (this: HTMLInputElement, ev: Event) => any</h3>
|
||
<p>
|
||
复选框改变时触发的事件
|
||
</p>
|
||
<h2>resolveCheckbox</h2>
|
||
<code>function resolveCheckbox(container: HTMLElement, legacy?: boolean): HTMLElement</code>
|
||
<h3>container: HTMLElement</h3>
|
||
<p>
|
||
将把此 HTML 元素下的所有 <code>label[data-checkbox]</code> 元素解析为复选框，<code>[data-id]</code> 为复选框元素的 id，包含
|
||
<code>[data-checked]</code> 时复选框默认选中。
|
||
</p>
|
||
<p>当该元素无子元素时，<code>[data-type]</code> 同上述参数中的 <code>type?: string</code>，<code>[data-label]</code> 同上述参数中的
|
||
<code>label?: string</code>。
|
||
</p>
|
||
<p>当该元素有子元素时，解析为图片复选框，class 为 <code>checked</code>、<code>unchecked</code> 的子元素将分别在选中与未选中时显示。</p>
|
||
<h3>legacy?: boolean</h3>
|
||
<p>
|
||
是否开启兼容模式，启用兼容模式时将试图匹配 <code>input[type="checkbox"]</code> 标签，与其周围的 label，将其转换为统一样式的复选框。
|
||
</p>
|
||
<hr />
|
||
<h2>示例</h2>
|
||
<pre><div id="checkbox-sample">
|
||
<label data-checkbox data-type="fa-light" data-label="Checkbox Light"></label>
|
||
<label data-checkbox data-checked data-label="Checkbox Regular"></label>
|
||
<label data-checkbox data-type="fa-solid" data-label="Checkbox Solid"></label>
|
||
<label data-checkbox>
|
||
<code class="checked">Checked</code>
|
||
<code class="unchecked">Unchecked</code>
|
||
</label>
|
||
<input id="check-status" type="checkbox"/>
|
||
<label for="check-status">Label for Status</label>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample"), true);
|
||
</script></pre>
|
||
<div id="checkbox-sample">
|
||
<label data-checkbox data-type="fa-light" data-label="Checkbox Light"></label>
|
||
<label data-checkbox data-checked data-label="Checkbox Regular"></label>
|
||
<label data-checkbox data-type="fa-solid" data-label="Checkbox Solid"></label>
|
||
<label data-checkbox>
|
||
<code class="checked">Checked</code>
|
||
<code class="unchecked">Unchecked</code>
|
||
</label>
|
||
<input id="check-status" type="checkbox" />
|
||
<label for="check-status">Label for Status</label>
|
||
</div>
|
||
<script type="text/javascript">
|
||
window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample"), true);
|
||
</script>
|
||
</div> |