- 首页
- 入门
- 快速上手
快速上手
KuoqiUI 是一个轻量级前端 UI 组件库，基于 KuoqiJS（$Q）v1.14 框架，采用声明式 HTML（data-* 属性驱动）架构，无构建工具链，引入三个资源即可使用。
依赖与资源引用
| 资源 | 说明 |
|---|---|
kuoqiui.min.css | 压缩合并 CSS，含全部组件（开发环境用 ui.dev.css） |
kq.js | KuoqiJS（$Q）v1.14 核心框架，通过 CDN 获取（项目发布包不包含） |
ui.js | KuoqiUI JS 引擎，六大同步引擎 + 内置组件（开发环境用 ui.dev.js） |
快速开始
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My App</title>
<link rel="stylesheet" href="kuoqiui.min.css">
</head>
<body>
<div class="page page-fixed">
<div class="page-head fill-index">
<span class="label label-white label-larger">KuoqiUI App</span>
</div>
<div class="page-body pd-10">
<div class="card card-cpanel">
<div class="card-head">卡片标题</div>
<div class="card-body">
<p class="label label-text">卡片内容</p>
</div>
</div>
</div>
</div>
<script src="path/to/kq.1.14.js"></script>
<script src="ui.js"></script>
</body>
</html>
ui.js 依赖 KuoqiJS（$Q）v1.14，必须先加载 kq.js。该框架不在发布包内，需从开发工作区或 CDN（js.kuoqps.com）获取。
远程引用（第三方）
<!-- KuoqiJS 核心框架（CDN） -->
<script src="https://js.kuoqps.com/kq.1.14/kq.js"></script>
<!-- KuoqiUI 样式（含全部组件） -->
<link rel="stylesheet" href="https://ui.kuoqps.com/kuoqiui.min.css">
<!-- KuoqiUI JS 引擎 -->
<script src="https://ui.kuoqps.com/ui.js"></script>
| 资源 | 远程地址 | 说明 |
|---|---|---|
| KuoqiJS | https://js.kuoqps.com/kq.1.14/kq.js | KuoqiUI 运行依赖，必须先加载 |
| KuoqiUI CSS | https://ui.kuoqps.com/kuoqiui.min.css | 压缩合并样式，含全部组件 |
| KuoqiUI JS | https://ui.kuoqps.com/ui.js | 六大同步引擎 + 内置组件 |
| 图标字体 | https://ui.kuoqps.com/fonts/… | 由 CSS 按同目录自动加载，无需单独引用 |
字体是 CORS 受限资源：第三方站点远程引用时，字体由
ui.kuoqps.com 提供，该服务器必须为字体响应加 Access-Control-Allow-Origin（第三方站点无法自行解决），否则图标显示为空白方块。本站服务端参考配置：
# nginx：给字体文件加 CORS 头
location ~* \.(eot|ttf|woff2?)$ {
add_header Access-Control-Allow-Origin *;
}
# Apache（.htaccess）
<FilesMatch "\.(eot|ttf|woff2?)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
发布包目录结构
ui.2.00/
├── kuoqiui.min.css # 压缩合并 CSS（含全部组件）
├── ui.js # 核心 JS 引擎（含 Tabmenu/loginmap 等内置组件）
├── fonts/ # 图标字体（eot/ttf/woff/woff2）
├── layer/ # 后台主题层（.page-admin 作用域）
│ ├── layer_kuoqi.css # 幻冰小站主题
│ ├── layer_light.css # 清新浅色
│ └── layer_deep.css # 深色护眼
└── plugin/ # 插件集（上传/画板/播放器/海报等）
后台框架内置核心
浏览器兼容
- Chrome / Firefox / Safari / Edge（最新版本）
- 微信内置浏览器（支持微信 JS-SDK 集成）
- 降级方案：
@supports not (color: var(--color-index))提供不支持 CSS 变量时的回退样式
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI ·
返回首页