424 lines
22 KiB
HTML
Executable File
424 lines
22 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>组件 - Kico Style</title>
|
||
<meta name="theme-color" content="#3498db">
|
||
<link rel="icon" href="static/icon-32.png" sizes="32x32"/>
|
||
<link rel="icon" href="static/icon-192.png" sizes="192x192"/>
|
||
<link href="static/kico.css" rel="stylesheet" type="text/css"/>
|
||
<link href="static/doc.css?v=22.12.25" rel="stylesheet" type="text/css"/>
|
||
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
|
||
</head>
|
||
<body class="has-bar">
|
||
<aside class="sidebar">
|
||
<div class="header">
|
||
<img src="static/kico.svg" title="Kico Style"/>
|
||
<span class="title">Style</span>
|
||
</div>
|
||
<nav class="menu">
|
||
<a href="index.html" class="active" content="开始"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M893.7 505.9H129.3c-13 0-24.8-7.9-29.8-19.9-5-12-2.2-25.9 7-35.2l307-307c26.1-26.1 60.9-40.5 98-40.5s71.9 14.4 98 40.5l307 307c9.2 9.2 12 23.1 7 35.2-5 12.1-16.7 19.9-29.8 19.9zM673.2 919.9h-31.5c-17.8 0-32.3-14.4-32.3-32.3v-77.4c0-23.1-18.8-42.1-41.9-42.4-22.3 0.3-41.1 19.3-41.1 42.4v77.4c0 17.8-14.4 32.3-32.3 32.3H349.8c-70.9 0-128.7-63.7-128.7-141.9V581.9c0-17.8 14.4-32.3 32.3-32.3h516.2c17.8 0 32.3 14.4 32.3 32.3V778c-0.1 78.3-57.8 141.9-128.7 141.9z"></path></svg></a>
|
||
<a href="wrap.html" content="样式"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M877.3 154.7C836.9 114.3 783 92 725.5 92c-57.5 0-111.4 22.3-151.8 62.7l-48.1 48.1-251.4 251.3 303.6 303.6 299.4-299.4c40.4-40.4 62.7-94.3 62.7-151.8 0-57.4-22.2-111.4-62.6-151.8zM221.5 506.9L177 551.3c-16.8 16.8-27.9 37.9-32.4 61.2l-53.9 285c-2.3 12.1 1.6 24.6 10.3 33.3 7.1 7.1 16.6 10.9 26.4 10.9 2.3 0 4.6-0.2 6.9-0.6l285-53.9c23.3-4.4 44.5-15.6 61.2-32.4l44.4-44.4-303.4-303.5z"></path></svg></a>
|
||
<a href="components.html" content="组件"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 510.4m-105.9 0a105.9 105.9 0 1 0 211.8 0 105.9 105.9 0 1 0-211.8 0ZM876 553.6l-8.2-4.8c-20-11.6-22.2-30.7-22.2-38.4 0-7.7 2.2-26.9 22.2-38.4l8.2-4.7c25.3-14.6 43.4-38.1 50.9-66.3 7.6-28.2 3.7-57.6-10.9-82.9l-35.3-61.2c-14.6-25.3-38.1-43.4-66.3-50.9-28.2-7.5-57.6-3.7-82.9 10.9l-8.2 4.7c-20 11.6-37.7 3.9-44.4 0s-22.2-15.3-22.2-38.4v-9.5c0-60.2-49-109.3-109.3-109.3h-70.6c-60.2 0-109.3 49-109.3 109.3v9.5c0 19.6-11.3 30.8-18 35.7-11.6 8.4-30.5 13.6-48.8 2.9l-8.8-5.2c-2.6-1.5-4.8-2.8-7.6-4.1-0.1 0-0.2-0.1-0.2-0.1-51.6-24-112.1-4.9-140.6 44.5L108 318c-14.6 25.3-18.5 54.7-10.9 82.9 7.6 28.2 25.6 51.7 50.9 66.3l8.2 4.8c20 11.6 22.2 30.7 22.2 38.4 0 7.7-2.2 26.9-22.2 38.4l-8.2 4.7c-25.3 14.6-43.4 38.1-50.9 66.3-7.6 28.2-3.7 57.6 10.9 82.9l35.3 61.2c14.6 25.3 38.1 43.4 66.3 50.9 28.2 7.5 57.6 3.7 82.9-10.9l8.2-4.7c20-11.6 37.7-3.9 44.4 0 6.7 3.9 22.2 15.3 22.2 38.4v9.5c0 60.2 49 109.3 109.3 109.3h70.6c60.2 0 109.3-49 109.3-109.3v-9.5c0-23.1 15.5-34.6 22.2-38.4 6.7-3.9 24.3-11.6 44.4 0l8.2 4.8c25.3 14.6 54.7 18.5 82.9 10.9 28.2-7.6 51.7-25.6 66.3-50.9l35.3-61.2c14.6-25.3 18.5-54.7 10.9-82.9-7.4-28.1-25.5-51.7-50.7-66.3zM512 687.8c-97.8 0-177.3-79.5-177.3-177.3S414.2 333.1 512 333.1s177.3 79.5 177.3 177.3S609.8 687.8 512 687.8z"></path></svg></a>
|
||
</nav>
|
||
</aside>
|
||
<aside class="sub-sidebar">
|
||
<ul>
|
||
<li><a href="#creator">文档操作</a>
|
||
<ul>
|
||
<li><a href="#creator">元素创建</a></li>
|
||
<li><a href="#selector">元素选择</a></li>
|
||
<li><a href="#each">批量运行</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#notice">浏览体验</a>
|
||
<ul>
|
||
<li><a href="#notice">消息弹框</a></li>
|
||
<li><a href="#image">图片灯箱</a></li>
|
||
<li><a href="#lazy">图片懒加载</a></li>
|
||
<li><a href="#ajax">快速 AJAX</a></li>
|
||
<li><a href="#scroll-to">平滑滚动</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</aside>
|
||
<main class="content">
|
||
<div class="wrap min">
|
||
<div class="ks-title">
|
||
<h1>组件</h1>
|
||
<h2>Kico Style 的扩展组件，可提升网页的交互体验</h2>
|
||
</div>
|
||
<article class="ks-content">
|
||
<blockquote>📢：作者已经逐渐转移至 Vue/React 阵营，本框架的原生 JS 组件及其样式则不再作为优先维护对象，敬请谅解～ 但基础的 CSS 框架依然会持续更新！</blockquote>
|
||
<section id="creator">
|
||
<h1>元素创建</h1>
|
||
<p>快速创建虚拟 DOM 元素。</p>
|
||
<div class="ks-table">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>参数</th>
|
||
<th>可选值</th>
|
||
<th>说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>obj <code>必须</code></td>
|
||
<td>字符串</td>
|
||
<td>新建元素采用的标签名</td>
|
||
</tr>
|
||
<tr>
|
||
<td>prop { id }</td>
|
||
<td>字符串</td>
|
||
<td>新建元素的 ID（id）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>prop { href }</td>
|
||
<td>字符串</td>
|
||
<td>新建外联元素的地址（href）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>prop { class }</td>
|
||
<td>字符串</td>
|
||
<td>新建元素的类名（class）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>prop { text }</td>
|
||
<td>字符串</td>
|
||
<td>新建元素的内容（innerText）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>prop { html }</td>
|
||
<td>字符串</td>
|
||
<td>新建元素的 HTML 内容（innerHTML）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>prop { child }</td>
|
||
<td>DOM 对象 | 数组</td>
|
||
<td>新建元素添加的子元素，支持单条或是以数组形式添加多条</td>
|
||
</tr>
|
||
<tr>
|
||
<td>prop { attr }</td>
|
||
<td>对象 | 数组</td>
|
||
<td>新建元素添加的属性，支持单条或是以数组形式添加多条</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>示例：创建一个 <code>p</code> 标签的对象</p>
|
||
<pre class="language-javascript"><code>ks.create("p");
|
||
|
||
// 返回 <p></p></code></pre>
|
||
<p>示例：创建一个 <code>div</code> 标签的对象，并给予 <code>test</code> 类名</p>
|
||
<pre><code>ks.create("div", {class: "test"});
|
||
|
||
// 返回 <div class="test"></div></code></pre>
|
||
<p>示例：创建一个 <code>div</code> 标签的对象，并给予 <code>ks-thumb</code> 和 <code>ks-original</code> 属性用于设置懒加载的图片灯箱</p>
|
||
<pre class="language-javascript"><code>var item = ks.create("div", {
|
||
class: "gallery-item",
|
||
attr: [
|
||
{name: "ks-thumb", value: `/static/saratoga-thumb.jpg`},
|
||
{name: "ks-original", value: `/static/saratoga.jpg`}
|
||
]
|
||
});
|
||
|
||
// 返回 <div class="gallery-item" ks-thumb="static/saratoga-thumb.jpg" ks-original="static/saratoga.jpg"></div>
|
||
|
||
// 设置图片灯箱与懒加载
|
||
ks.image(".gallery-item");
|
||
ks.lazy(".gallery-item", true);
|
||
</code></pre>
|
||
<p>示例：创建一个 <code>div</code> 标签的对象，在给予 <code>hello</code> 类名的同时，写入“这是一个 DIV”的内容</p>
|
||
<pre class="language-javascript"><code>ks.create("div", {
|
||
class: "hello",
|
||
text: "这是一个 DIV"
|
||
});
|
||
|
||
// 返回 <div class="hello">这是一个 DIV</div></code></pre>
|
||
<p>示例：添加一个有多重子元素的 <code>div</code> 对象</p>
|
||
<pre class="language-javascript"><code>ks.create("div", {
|
||
class: "first",
|
||
text: "这是第一层 DIV",
|
||
child: ks.create("div", {
|
||
class: "second",
|
||
text: "这是第二层 DIV",
|
||
child: ks.create("div", {
|
||
class: "third",
|
||
text: "这是第三层 DIV"
|
||
})
|
||
})
|
||
});
|
||
|
||
// 返回
|
||
// <div class="first">这是第一层 DIV
|
||
// <div class="second">这是第二层 DIV
|
||
// <div class="third">这是第三层 DIV</div>
|
||
// </div>
|
||
// </div>
|
||
</code></pre>
|
||
</section>
|
||
<section id="selector">
|
||
<h1>元素选择器</h1>
|
||
<p>快速选择单个/多个符合条件的元素，像编写 CSS 选择器一样简单。</p>
|
||
<p>示例：选择标签为 <code>header</code> 的第一个对象</p>
|
||
<pre class="language-javascript"><code>ks.select("header");</code></pre>
|
||
<p>示例：选择类名为 <code>post-content</code> 的所有图片</p>
|
||
<pre class="language-javascript"><code>ks.selectAll(".post-content img");</code></pre>
|
||
<blockquote>PS：ks() 返回的内容和 ks.selectAll() 是相同的，所以上面的代码也可以这样写：</blockquote>
|
||
<pre class="language-javascript"><code>ks(".post-content img");</code></pre>
|
||
</section>
|
||
<section id="each">
|
||
<h1>批量运行</h1>
|
||
<p>快速设置多个数组或是 DOM 元素。</p>
|
||
<div class="ks-table">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>参数</th>
|
||
<th>可选值</th>
|
||
<th>说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>obj <code>必须</code></td>
|
||
<td>数组 | NodeList</td>
|
||
<td>被执行操作的对象</td>
|
||
</tr>
|
||
<tr>
|
||
<td>fn <code>必须</code></td>
|
||
<td>函数</td>
|
||
<td>对 obj 执行的操作</td>
|
||
</tr>
|
||
<tr>
|
||
<td>fn(i)</td>
|
||
<td>被执行的其中一个对象</td>
|
||
<td>当前执行的 obj 对象</td>
|
||
</tr>
|
||
<tr>
|
||
<td>fn(j)</td>
|
||
<td>被执行的对象索引值</td>
|
||
<td>当前执行的 obj 对象索引值</td>
|
||
</tr>
|
||
<tr>
|
||
<td>fn(k)</td>
|
||
<td>被执行的对象整体</td>
|
||
<td>也就是 obj 本身</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>示例：批量选择 <code>h1</code> 元素，并设置其字体样式</p>
|
||
<pre class="language-javascript"><code>ks("h1").each(function (i) {
|
||
i.style.color = "green";
|
||
i.style.fontWeight = "bold";
|
||
})</code></pre>
|
||
</section>
|
||
<section id="notice">
|
||
<h1>消息弹框</h1>
|
||
<p>使用消息弹框，比 <code>alert</code> 更加友好，提升用户体验。</p>
|
||
<div class="show-notice">
|
||
<div class="ks-notice">
|
||
<span class="content">静态的消息弹框样式</span>
|
||
</div>
|
||
<div class="ks-notice dismiss">
|
||
<span class="content">静态的消息弹框样式</span>
|
||
<span class="close"></span>
|
||
</div>
|
||
<div class="ks-notice red">
|
||
<span class="content">静态的消息弹框样式</span>
|
||
</div>
|
||
<div class="ks-notice yellow">
|
||
<span class="content">静态的消息弹框样式</span>
|
||
</div>
|
||
<div class="ks-notice blue">
|
||
<span class="content">静态的消息弹框样式</span>
|
||
</div>
|
||
<div class="ks-notice green">
|
||
<span class="content">静态的消息弹框样式</span>
|
||
</div>
|
||
</div>
|
||
<div class="ks-table">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>参数</th>
|
||
<th>可选值</th>
|
||
<th>说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>content <code>必须</code></td>
|
||
<td>字符串</td>
|
||
<td>要输出给弹框的内容</td>
|
||
</tr>
|
||
<tr>
|
||
<td>attr</td>
|
||
<td><code>time</code> <code>color</code> <code>overlay</code></td>
|
||
<td>子属性，配置时间、颜色和遮罩</td>
|
||
</tr>
|
||
<tr>
|
||
<td>attr { time }</td>
|
||
<td>整数，单位为毫秒</td>
|
||
<td>指定弹框显示之后的移除时间，默认为手动关闭</td>
|
||
</tr>
|
||
<tr>
|
||
<td>attr { color }</td>
|
||
<td><code>red</code> <code>yellow</code> <code>blue</code> <code>green</code></td>
|
||
<td>指定弹框颜色，默认为 <code>null</code></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>示例：一个在 1.5 秒后自动清除的弹窗</p>
|
||
<pre class="language-javascript"><code>ks.notice("这是一个有时间的弹窗测试", {
|
||
time: 1500
|
||
});</code></pre>
|
||
<p><button class="btn blue small customed" onclick="ks.notice('这是一个有时间的弹窗', {time: 1500});">点击激活</button></p>
|
||
<p>示例：没有时长的蓝色弹窗</p>
|
||
<pre class="language-javascript"><code>ks.notice("这是一个蓝色的可关闭弹窗", {
|
||
color: "blue"
|
||
});</code></pre>
|
||
<p><button class="btn blue small customed" onclick="ks.notice('这是一个蓝色的可关闭弹窗', {color: 'blue'});">点击激活</button></p>
|
||
</section>
|
||
<!--<section id="overlay">
|
||
<h1>屏幕遮罩</h1>
|
||
<p>使用屏幕遮罩可以突出显示一些内容，支持添加点击事件。</p>
|
||
<div class="ks-table">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>参数</th>
|
||
<th>可选值</th>
|
||
<th>说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>attr</td>
|
||
<td><code>time</code> <code>code</code></td>
|
||
<td>属性对象</td>
|
||
</tr>
|
||
<tr>
|
||
<td>attr { time }</td>
|
||
<td>整数，单位为毫秒</td>
|
||
<td>遮罩消失的时间</td>
|
||
</tr>
|
||
<tr>
|
||
<td>attr { code }</td>
|
||
<td>函数体</td>
|
||
<td>点击遮罩触发执行的代码</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>示例：添加一个 1.5 秒的弹窗</p>
|
||
<pre><code>ks.overlay({
|
||
time: 1500
|
||
});</code></pre>
|
||
<p><button class="btn blue small" onclick="ks.overlay({time: 1500});">点击激活</button></p>
|
||
<p>示例：添加一个执行代码的弹窗</p>
|
||
<pre><code>ks.overlay({
|
||
code: function () {
|
||
alert("执行了一段代码");
|
||
}
|
||
});</code></pre>
|
||
<p><button class="btn blue small" onclick="ks.overlay({code: function () {alert('执行了一段代码');}});">点击激活</button></p>
|
||
</section>-->
|
||
<section id="image">
|
||
<h1>图片灯箱</h1>
|
||
<p>使用图片灯箱可以让页面的图片放大展示。</p>
|
||
<p><img src="static/saratoga.jpg" title="萨拉托加"/></p>
|
||
<img src="static/test-image-1.jpg"/>
|
||
<p>通过增加 <code>ks.original</code> 字段，还可以实现缩略图点击变成原图的效果！</p>
|
||
<p><img src="static/saratoga-thumb.jpg" title="萨拉托加缩略图" ks-original="static/saratoga.jpg"/></p>
|
||
<p>使用 <code>div</code> 也可以增加灯箱，只是必须增加 <code>ks.original</code> 字段才可以展示出来。</p>
|
||
<p class="original" style="max-width: 300px; height: 300px; background-image: url(static/saratoga-thumb.jpg)" ks-original="static/saratoga.jpg"></p>
|
||
<p>示例：选中所有 <code>article</code> 标签里面的图片</p>
|
||
<pre class="language-javascript"><code>ks.image("article img");</code></pre>
|
||
<p>示例：选中包含原图字段的可触发 <code>div</code></p>
|
||
<pre class="language-javascript"><code>ks.image(".original");</code></pre>
|
||
<blockquote>PS：如果在一个页面里反复调用本函数，将等同于 <b>重置</b>，此前执行的对象将失效！</blockquote>
|
||
</section>
|
||
<section id="lazy">
|
||
<h1>图片懒加载</h1>
|
||
<p>使用图片懒加载可以提升浏览体验，减小服务器并发压力。</p>
|
||
<p>通过给 <code>img</code> 元素增加 <code>ks.original</code> 字段，并运行即可实现懒加载。</p>
|
||
<p>如果想让用户认为这是一个正在加载的图片，建议你将图片的 <code>src</code> 设置成一张以示加载的图片。</p>
|
||
<pre class="language-javascript"><code><img src="示例加载的图片地址" ks-original="懒加载完成后的图片地址"/></code></pre>
|
||
<p><img id="you" src="static/load.gif" alt="萨拉托加缩略图" ks-original="static/test-image-1.jpg"/></p>
|
||
<p>如果想使得一个块元素的 <code>background</code> 背景图片实现懒加载，依旧需要只需要增加 <code>ks.original</code> 字段，并将额外一个参数设置为 <code>true</code> 字段才可以实现懒加载。</p>
|
||
<p class="original" style="height: 500px; background: url(static/load.gif) center/cover" ks-original="static/test-image-1.jpg"></p>
|
||
<p>示例：选中所有 <code>img</code> 图片，并开启懒加载</p>
|
||
<pre class="language-javascript"><code>ks.lazy("img");</code></pre>
|
||
<p>示例：选中所有类名为 <code>original</code> 的块元素，并对其实现背景形式的懒加载。</p>
|
||
<pre class="language-javascript"><code>ks.lazy(".original", true);</code></pre>
|
||
</section>
|
||
<section id="ajax">
|
||
<h1>快速 AJAX</h1>
|
||
<p>和 JQuery 类似的一个简易 AJAX 功能，在不刷新网页的情况下快速更新页面内容。</p>
|
||
<p>示例：一个带了请求头的 GET 请求</p>
|
||
<pre class="language-javascript"><code>ks.ajax({
|
||
method: "GET",
|
||
data: {
|
||
text: "Yeah!"
|
||
},
|
||
header: [
|
||
["sended", "Dreamer-Paul"]
|
||
],
|
||
url: 手动指定 URL,
|
||
success: function (req){
|
||
console.log("成功了");
|
||
console.log(req); // 返回的 XHR 对象
|
||
},
|
||
failed: function (req){
|
||
console.log("失败了");
|
||
console.log(req); // 返回的 XHR 对象
|
||
}
|
||
});</code></pre>
|
||
<p>示例：一个 POST 请求</p>
|
||
<pre class="language-javascript"><code>ks.ajax({
|
||
method: "POST",
|
||
data: {
|
||
id: 5,
|
||
text: "Yeah!"
|
||
},
|
||
url: "post",
|
||
success: function (req){
|
||
console.log("成功了");
|
||
console.log(req); // 返回的 XHR 对象
|
||
},
|
||
failed: function (req){
|
||
console.log("失败了");
|
||
console.log(req); // 返回的 XHR 对象
|
||
}
|
||
});</code></pre>
|
||
</section>
|
||
<section id="scroll-to">
|
||
<h1>平滑滚动 <em>Beta</em></h1>
|
||
<p>通过添加了页面锚链接的 <code>a</code> 元素，平滑滚动页面到对应的元素，可添加偏移值。</p>
|
||
<p>示例：选中 <code>.sub-sidebar</code> 元素里面的所有 <code>a</code> 链接，在点击它们的时候，页面将会平滑滚动到其指定的对应内容。同时保留 <code>100px</code> 的偏移间距。</p>
|
||
<pre class="language-javascript"><code>ks.scrollTo(".sub-sidebar a", 100);</code></pre>
|
||
<p>或者是</p>
|
||
<pre class="language-javascript"><code>ks(".sub-sidebar a").scrollTo(100);</code></pre>
|
||
</section>
|
||
</article>
|
||
</div>
|
||
</main>
|
||
<footer>
|
||
<a class="to-top" href="#"></a>
|
||
<p>© 2023 By <a href="https://paugram.com" target="_blank">Dreamer-Paul</a>.</p>
|
||
</footer>
|
||
|
||
<script src="static/kico.js"></script>
|
||
<script src="static/doc.js?v=22.12.25"></script>
|
||
<script>
|
||
ks("#you").lazy();
|
||
ks(".original").lazy(true);
|
||
</script>
|
||
<script src="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Single@2.1/static/prism.js"></script>
|
||
|
||
</body>
|
||
</html> |