complete strings document, adjust structure

This commit is contained in:
2023-03-31 09:10:13 +08:00
parent 877e9e7208
commit b04917109d
12 changed files with 94 additions and 15 deletions

View File

@ -10,4 +10,4 @@ interface CheckboxOptions {
}
export function createCheckbox(opts?: CheckboxOptions): HTMLElement
export function resolveCheckbox(container: HTMLElement, legacy?: boolean): HTMLElement
export function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement

View File

@ -54,10 +54,10 @@
复选框改变时触发的事件
</p>
<h2>resolveCheckbox</h2>
<code>function resolveCheckbox(container: HTMLElement, legacy?: boolean): HTMLElement</code>
<h3>container: HTMLElement</h3>
<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包含
将把此 HTML 元素,为 null 则把 document.body 下的所有 <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> 同上述参数中的

View File

@ -50,27 +50,42 @@ function createCheckbox(opts) {
}
function resolveCheckbox(container, legacy) {
if (container == null) {
container = document.body;
}
if (legacy) {
const checks = container.querySelectorAll('input[type="checkbox"]');
for (let chk of checks) {
if (chk.parentElement.querySelector('layer.check-box-inner') != null) {
continue;
}
const id = chk.id;
let label;
let label, text;
if (id != null) {
label = container.querySelector(`label[for="${id}"]`);
}
if (label == null) {
const e = chk.nextElementSibling;
if (e != null && e.tagName === 'LABEL') {
label = e;
if (e != null) {
if (e.tagName === 'LABEL') {
label = e;
} else if (e.tagName === 'SPAN' && e.getAttribute('data-lgid') != null) {
text = e.innerText;
e.style.display = 'none';
}
}
}
if (label == null) {
const e = chk.previousElementSibling;
if (e != null && e.tagName === 'LABEL') {
label = e;
if (e != null) {
if (e.tagName === 'LABEL') {
label = e;
} else if (text == null && e.tagName === 'SPAN' && e.getAttribute('data-lgid') != null) {
text = e.innerText;
e.style.display = 'none';
}
}
}
let text;
if (label == null) {
label = document.createElement('label');
chk.parentElement.insertBefore(label, chk);

View File

@ -5,7 +5,7 @@ function createUse(type, id) {
const path = c.path || '';
const ver = c.resver == null ? '' : `?${c.resver}`;
const use = document.createElementNS(svgns, 'use');
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `${path}lib/fonts/${type}.svg${ver}#${id}`);
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `${path}fonts/${type}.svg${ver}#${id}`);
return use;
}

2
lib/ui/tooltip.d.ts vendored
View File

@ -1,2 +1,2 @@
export function setTooltip(container: HTMLElement, content: string | HTMLElement): void
export function resolveTooltip(container: HTMLElement): HTMLElement
export function resolveTooltip(container?: HTMLElement): HTMLElement

View File

@ -15,10 +15,10 @@
要设置的 tooltip 内容,允许为字符串或者 HTML 元素
</p>
<h2>resolveTooltip</h2>
<code>function resolveTooltip(container: HTMLElement): HTMLElement</code>
<h3>container: HTMLElement</h3>
<code>function resolveTooltip(container?: HTMLElement): HTMLElement</code>
<h3>container?: HTMLElement</h3>
<p>
给此元素下的所有含有 title 属性的子元素设置成统一样式的 tooltip
给此元素,为 null 则把 document.body 下的所有含有 title 属性的子元素设置成统一样式的 tooltip
</p>
<hr />
<h2>示例</h2>

View File

@ -49,6 +49,9 @@ function setTooltip(container, content) {
}
function resolveTooltip(container) {
if (container == null) {
container = document.body;
}
const tips = container.querySelectorAll('[title]');
for (let tip of tips) {
const title = tip.getAttribute('title');