基于 CSS 的 Web 框架 CJSS
Posted fewfwf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于 CSS 的 Web 框架 CJSS相关的知识，希望对你有一定的参考价值。
CJSS 是一个基于 CSS 的 Web 框架，所有效果都在 CSS 文件中生效，可以在 CSS 中使用它添加更多功能，或者构建一个完整的页面。
使用方法：
想要使用某个组件，在 CSS 文件中选择它，然后添加 --html:(your markup here)；
h1 {
--html:(
This is a headline
);
}
如果希望通过标签产生效果，如下
<component>My Component</component>
component {
--html:(
<h2>${yield}</h2>
<p>This is a component</p>
);
}
就会呈现为
<component>
<h2>My Component</h2>
<p>This is a component</p>
</component>
如果想使用 JavaScript 从 HTML 中直接定义事物的行为，在 CSS 文件中就可以执行此操作。
.item {
cursor: pointer;
--js:(
function toggle() {
this.classList.toggle(‘active‘);
}
this.addEventListener(‘click‘, toggle );
);
}
添加数据方法
使用 --data(key:[data]) 属性
nav {
--data:(
name: [‘one‘, ‘two‘, ‘three‘],
link: [‘#one‘, ‘#two‘, ‘#three‘],
);
--html:(
<a class="item" href="${data.link[0]}">${data.name[0]}</a>
<a class="item" href="${data.link[1]}">${data.name[1]}</a>
<a class="item" href="${data.link[2]}">${data.name[2]}</a>
);
--js:(console.log(data));
}
框架案例
- https://codepen.io/ekwonye/full/QXEzZv
- https://codepen.io/scottkellum/pen/WqwjLm
以上是关于基于 CSS 的 Web 框架 CJSS的主要内容，如果未能解决你的问题，请参考以下文章