106 lines
4.2 KiB
JSON
106 lines
4.2 KiB
JSON
{
|
||
"slug": "calendar",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 日历：脚本按年月生成整月网格注入容器，翻页与选日都靠 data-* 标识的事件委托。",
|
||
"usage": [
|
||
"容器是 .kole-calendar 加 role=\"grid\"，脚本把生成好的头部、星期行与网格整段写进 innerHTML。",
|
||
"翻页按钮是 .kole-calendar-nav，带 data-nav=\"-1\" 与 data-nav=\"1\" 表示方向，脚本读取这个值决定月份加减。",
|
||
"日期格子是 .kole-calendar-cell，带 role=\"gridcell\" 与 tabindex=\"0\"，并写 data-y / data-m / data-d 记录完整日期信息。",
|
||
"非本月的补位格加 .is-out 类，示例把前后各一天补进网格，避免每行空位。",
|
||
"点击格子由脚本读取 data-y / data-m / data-d 拼出日期，再重绘网格并高亮选中项。"
|
||
],
|
||
"bestPractices": [
|
||
"日期信息分散在三个 data 属性里：渲染与取值都用它们，改成单个 ISO 字符串时要同步改这两处。",
|
||
"网格是整段重绘（innerHTML 覆盖），翻页后事件监听要重新绑定，别在初始化时只挂一次到旧节点上。",
|
||
"补位格与本月格共用 .kole-calendar-cell，靠 .is-out 区分；限制可选范围时按这个类拦截。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props，API 载体是类名（.kole-calendar 头部/导航/星期/网格/格子结构类与 is-out 状态类）加 data-nav、data-y/m/d 日期钩子与 role 标注，网格由页内脚本整段生成。",
|
||
"table": [
|
||
{
|
||
"name": "kole-calendar",
|
||
"type": "基础类名",
|
||
"desc": "日历根容器，带 role=\"grid\""
|
||
},
|
||
{
|
||
"name": "kole-calendar-head",
|
||
"type": "结构类名",
|
||
"desc": "头部容器，含标题与两个翻页按钮"
|
||
},
|
||
{
|
||
"name": "kole-calendar-title",
|
||
"type": "结构类名",
|
||
"desc": "当前年月标题文本"
|
||
},
|
||
{
|
||
"name": "kole-calendar-nav",
|
||
"type": "结构类名",
|
||
"desc": "翻页按钮，带 data-nav 表示方向"
|
||
},
|
||
{
|
||
"name": "kole-calendar-week",
|
||
"type": "结构类名",
|
||
"desc": "星期表头行"
|
||
},
|
||
{
|
||
"name": "kole-calendar-weekday",
|
||
"type": "结构类名",
|
||
"desc": "单个星期名"
|
||
},
|
||
{
|
||
"name": "kole-calendar-grid",
|
||
"type": "结构类名",
|
||
"desc": "日期网格容器"
|
||
},
|
||
{
|
||
"name": "kole-calendar-cell",
|
||
"type": "结构类名",
|
||
"desc": "日期格子，带 role=\"gridcell\" 与 tabindex=\"0\""
|
||
},
|
||
{
|
||
"name": "is-out",
|
||
"type": "状态类名",
|
||
"desc": "非本月的补位日期格"
|
||
},
|
||
{
|
||
"name": "data-nav",
|
||
"type": "data-* 钩子",
|
||
"desc": "翻页方向，值为 -1 或 1"
|
||
},
|
||
{
|
||
"name": "kole-calendar-cell",
|
||
"type": "data-* 钩子",
|
||
"desc": "格子记录的年 / 月 / 日，点击时据此拼日期"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"容器、头部、星期行与网格都写了 role=\"grid\"，层级上属于复用同一个角色，没有区分 row / gridcell 的父级结构。",
|
||
"日期格子有 role=\"gridcell\" 与 tabindex=\"0\" 可聚焦，但没有方向键在网格内移动的逻辑。",
|
||
"翻页按钮是原生 button 但没有 aria-label，读屏器只会念出 ‹ 与 › 符号。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Calendar.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 原生脚本）",
|
||
"desc": "Calendar.html —— 纯 H5 演示页：容器骨架加 3 个函数负责生成网格、翻页与选中"
|
||
},
|
||
{
|
||
"file": "frameworks/Calendar.css",
|
||
"kind": "样式文件",
|
||
"desc": "Calendar.css —— 本页组件类名的样式定义，由 Calendar.html 第 8 行的 <link rel=\"stylesheet\" href=\"Calendar.css\"> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"calendar-ex-1"
|
||
],
|
||
"notes": [
|
||
"翻页按钮的方向钩子见（frameworks/Calendar.html:30）",
|
||
"补位日期格的状态类见（frameworks/Calendar.html:38）",
|
||
"格子语义与日期 data 属性见（frameworks/Calendar.html:38）",
|
||
"星期表头渲染见（frameworks/Calendar.html:33）"
|
||
]
|
||
}
|