<div id="checkbox-sample">
+ <!-- 1 -->
<label data-checkbox data-type="fa-light" data-label="Checkbox Light"></label>
+ <!-- 2 -->
<label data-checkbox data-checked data-label="Checkbox Regular"></label>
+ <!-- 3 -->
<label data-checkbox data-type="fa-solid" data-label="Checkbox Solid"></label>
+ <!-- 4 -->
<label data-checkbox>
<code class="checked">Checked</code>
<code class="unchecked">Unchecked</code>
</label>
+ <!-- 5 -->
<input id="check-status" type="checkbox"/>
<label for="check-status">Label for Status</label>
</div>
diff --git a/lib/ui/dropdown.d.ts b/lib/ui/dropdown.d.ts
index 23ff1e9..cd2b3b6 100644
--- a/lib/ui/dropdown.d.ts
+++ b/lib/ui/dropdown.d.ts
@@ -10,34 +10,35 @@ interface DropdownOptions {
htmlkey?: string;
maxlength?: Number;
multiselect?: boolean;
- selected?: DropdownItem | any;
- selectedlist?: Array;
+ selected?: string;
+ selectedlist?: Array;
disabled?: boolean;
input?: boolean;
search?: boolean;
searchkeys?: Array;
searchplaceholder?: string;
tabindex?: Number;
+ placeholder?: string;
slidefixed?: boolean;
- parent?: HTMLElement
+ parent?: HTMLElement;
}
interface Dropdown {
sourceFilter: () => Array;
- onselectedlist: (list: Array) => void;
onselected: (item: DropdownItem | any) => void;
+ onselectedlist: (list: Array) => void;
onexpanded: () => void;
- create(): HTMLElement;
- readonly multiselect: boolean;
get disabled(): boolean;
set disabled(flag: boolean);
get source(): Array;
set source(list: Array): void;
+ readonly multiselect: boolean;
readonly selected: DropdownItem | any;
readonly selectedlist: Array;
- select(selected: DropdownItem | any, init?: boolean): void;
- selectlist(selectedlist: Array, init?: boolean): void;
+ create(): HTMLElement;
+ select(selected: string, silence?: boolean): void;
+ selectlist(selectedlist: Array, silence?: boolean): void;
}
declare var Dropdown: {
diff --git a/lib/ui/dropdown.html b/lib/ui/dropdown.html
index 0f0e6c0..68d899a 100644
--- a/lib/ui/dropdown.html
+++ b/lib/ui/dropdown.html
@@ -4,88 +4,235 @@
创建一个统一样式的下拉输入、选择框元素，或者解析转换页面上的 select 标签为该元素。
-
+ searchplaceholder?: string
+
+ 搜索输入框的占位字符串
+
+ tabindex?: Number
+
+ 下拉框的焦点顺序
+
+ placeholder?: string
+
+ 作为输入类型时，输入框的占位字符串
+
+ slidefixed?: boolean
+
+ 下拉方向是否固定为下
+
+ parent?: HTMLElement
+
+ 下拉列表呈现的父容器，默认为 document.body
+
+ Dropdown.resolve
+ static resolve(dom?: HTMLElement): HTMLElement
+ dom?: HTMLElement
+
+ 将把此 HTML 元素，为 null 则把 document.body 下的所有 select 元素解析为统一样式的下拉框
+
+
+ sourceFilter
+ sourceFilter: () => Array<DropdownItem | any>
+
+ 数据源代理，返回用以呈现在下拉列表中的数据源
+
+ onselected
+ onselected: (item: DropdownItem | any) => void
+ item: DropdownItem | any
+
+ 选中项发生改变时触发该事件，参数为选中的项
+
+ onselectedlist
+ onselectedlist: (list: Array<DropdownItem | any>) => void
+ list: Array<DropdownItem | any>
+
+ 多选时选中列表发生改变时触发该事件，参数为选中的列表
+
+ onexpanded
+ onexpanded: () => void
+
+ 下拉列表展开时触发该事件，一般用来异步获取服务器数据，填充至数据源
+
+
+ disabled
+ property disabled(): boolean
+
+ 获取或设置下拉框是否禁用
+
+ source
+ property source(): Array<DropdownItem | any>
+
+ 获取或设置下拉框数据源
+
+ multiselect
+ readonly multiselect: boolean
+
+ 获取下拉框是否支持多选
+
+ selected
+ readonly selected: DropdownItem | any
+
+ 获取下拉框当前选中项
+
+ selectedlist
+ readonly selectedlist: Array<DropdownItem | any>
+
+ 获取下拉框当前选中的列表
+
+
+ create
+ create(): HTMLElement
+
+ 创建下拉列表，返回一个 HTML 元素
+
+ select
+ select(selected: string, silence?: boolean): void
+ selected: string
+
+ 修改下拉框的选中项为参数值对应的项
+
+ silence?: boolean
+
+ 是否静默修改，为 true 时不触发 onselected 事件
+
+ selectlist
+ selectlist(selectedlist: Array<string>, silence?: boolean): void
+ selectedlist: Array<string>
+
+ 修改下拉框的选中列表为参数值列表对应的项的列表
+
+ silence?: boolean
+
+ 是否静默修改，为 true 时不触发 onselectedlist 事件
+
+
示例
-
-
+ <div id="dropdown-sample">
+ <select>
+ <option value="cs1">Case 1</option>
+ <option value="cs2" selected>Case 2</option>
+ <option value="cs3">Case 3</option>
+ </select>
+</div>
+
+<script type="text/javascript">
+ const Dropdown = window["lib-ui"].Dropdown;
+ const sample = document.querySelector('#dropdown-sample');
+
+ // 解析 select 元素
+ Dropdown.resolve(sample);
+
+ // 创建简易输入类型下拉框
+ let drop = new Dropdown({
+ input: true,
+ // selected: 'standby',
+ placeholder: 'asset status',
+ slidefixed: true
+ });
+ drop.source = ['off', 'running', 'standby', 'broken']
+ .map(it => { return { value: it, text: it } });
+ sample.appendChild(drop.create());
+
+ // 创建自定义显示元素的下拉框
+ drop = new Dropdown({
+ selected: '#ff0',
+ search: true,
+ // multiselect: true
+ });
+ drop.source = [
+ { value: '#fff', text: 'White' },
+ { value: '#f00', text: 'Red' },
+ { value: '#0f0', text: 'Green' },
+ { value: '#00f', text: 'Blue' },
+ { value: '#ff0', text: 'Yellow' },
+ { value: '#0ff', text: 'Cyan' },
+ { value: '#f0f', text: 'Magenta' },
+ ];
+ drop.source.forEach(it => {
+ const span = document.createElement('span');
+ span.className = 'drop-item';
+ span.style.setProperty('--color', it.value);
+ span.innerText = it.text;
+ it.html = span;
+ });
+ sample.appendChild(drop.create());
+</script>
+
+