【sciter】案例 TodoList 带你入门 sciter 组件化编程

已于 2023-01-03 10:19:37 修改
阅读量775 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 桌面应用sciter 文章标签： javascript 前端 vue.js
于 2022-12-31 08:57:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44659458/article/details/128502742
本文通过TodoList案例，详细介绍了使用sciter进行组件化编程的方法，涵盖JSX组件化、组件通信、生命周期、事件绑定、this指向处理及模块化CSS等关键点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

案例 TodoList 带你入门 sciter 组件化编程

下诉案例已基本覆盖 sciter 组件化编程所涉及到的内容，及注意细节

1、效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2、技术要点

  • JSX 组件化编程（类组件）
  • 组件间如何通信
  • 组件生命周期
  • 组件如何绑定事件
  • 如何处理组件中 this 指向
  • 模块化 CSS

3、如何使用

<div class="container"></div>
<script type="module">
    import { TodoList } from './component/index.js';
    document.$(`.container`).content(<TodoList />);
</script>

4、组件 TodoList 源码

export class TodoList extends Element {
    value;
    list = [];
    constructor(props) {
        super(); // 必写
    }

    // 组件挂载
    componentDidMount() { }
    
    // 组件销毁前
    componentWillUnmount() { }
    
    componentUpdate(newdata) {
        if (typeof newdata == "object") {
            Object.assign(this, newdata);
        }
        this.post(() => this.patch(this.render()));
    }

    render() {
        return (
            <div styleset={__DIR__ + "index.css#todolist"}>
                <div class="header">
                    <div class="info">To-Do List</div>
                </div>
                <div class="title">~Today I need to ~</div>
                <div class="form">
                    <div class="form-input">
                        <input type="text" placeholder="Add new todo..." value={this.value} onchange={(event) => this.value = event.target.value} />
                        <button onclick={this.submit}><span class="submit">Submit</span></button>
                    </div>
                </div>
                {this.list.length == 0 && (
                    <div class="empty-todos">
                        <svg class="icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="clipboard-check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-v-132cabf7=""><path class="" fill="currentColor" d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm121.2 231.8l-143 141.8c-4.7 4.7-12.3 4.6-17-.1l-82.6-83.3c-4.7-4.7-4.6-12.3.1-17L99.1 285c4.7-4.7 12.3-4.6 17 .1l46 46.4 106-105.2c4.7-4.7 12.3-4.6 17 .1l28.2 28.4c4.7 4.8 4.6 12.3-.1 17z"></path></svg>
                        <span class="todos-text">Congrat, you have no more tasks to do</span>
                    </div>
                )}
                {this.list.length != 0 && (
                    <List data={this.list}
                        finshed={this.finshed}
                        del={this.del}
                    />
                )}
            </div>
        );
    }

    // 提交
    submit = (event) => {
        const value = this.value.trim();
        if (value.length != 0) {

            this.list.unshift({
                id: Math.random(),
                text: value,
                state: false
            });

            this.componentUpdate({
                value: "",
                list: this.list
            });
        }

    }

    // 完成
    finshed = (data) => {
        const i = this.list.findIndex(item => item.id == data.id);
        if (i != -1) this.list[i].state = true;

        this.componentUpdate({ list: this.list });
    }

    // 删除
    del = (data) => {
        data.forEach(item1 => {
            const i = this.list.findIndex(item2 => item2.id == item1.id);
            this.list.splice(i, 1);
        });
        this.componentUpdate({ list: this.list });
    }
}

5、List 组件源码

class List extends Element {
    id; // 组件 id
    Dom; // 组件 DOM

    data = [];
    
    finshed; // 回调 
    del; // 回调

    key = 'All';

    constructor(props) {
        super();
        // 生成唯一 id
        this.id = `list-${Math.ceil(Math.random() * 100)}`;

        this.data = props.data;
        this.finshed = props.finshed;
        this.del = props.del;
    }

    // 挂载前
    componentDidMount() {
        // 保存 list 组件的 Dom 元素
        this.Dom = document.querySelector(`#${this.id}`);
    }

    componentUpdate(newData) {
        if (typeof newdata == "object") {
            this.data = newData.data;
            this.key = newData.key;
        }
        this.post(() => this.patch(this.render()));
    }

    render(props, kids) {
        const activeLen = this.data.filter(item => item.state).length;
        const state = this.data.some(item => item.state);
        const len = this.data.length;
        return (
            <div styleset={__DIR__ + "index.css#list"} id={this.id}>
                <ul class="list">
                    {this.data.map(item => {
                        return (
                            /* key={Math.random()} 使其重新渲染 */
                            <li class={item.state ? 'item active' : 'item'} onclick={this.itemFinshed.bind(this, item)} tag={item.id} key={Math.random()}>
                                <i class='state-icon'></i>
                                <span class='text'>{item.text} </span>
                                <i class='close-icon' onclick={() => this.itemDel(item)}></i>
                            </li>
                        )
                    })}
                </ul>
                <div class="detail">
                    <span>{len} item left</span>
                    <span class={this.key == 'All' ? 'state-active' : ''} onclick={this.itemFilter.bind(this, 'All')}>All</span>
                    <span class={this.key == 'Active' ? 'state-active' : ''} style={(state && activeLen != len) ? '' : 'display: none'} onclick={this.itemFilter.bind(this, 'Active')}>Active</span>
                    <span class={this.key == 'Completed' ? 'state-active' : ''} style={(state && activeLen != len) ? '' : 'display: none'} onclick={this.itemFilter.bind(this, 'Completed')}>Completed</span>
                    <span class={this.key == 'Clear completed' ? 'state-active' : ''} style={state ? '' : 'display: none'} onclick={this.clearCompleted.bind(this)}>Clear completed</span>
                </div>
            </div>
        )
    }

    // 完成
    itemFinshed = (item, event) => {
        if (!event.target.classList.contains('close-icon')) {
            this.finshed && this.finshed(item);
        }
    }

    // 删除
    itemDel = (item) => {
        this.del && this.del([item]);
    }

    // 清除完成
    clearCompleted = () => {
        const completedList = this.data.filter(item => item.state);
        this.del && this.del(completedList);
    } 

    // 过滤
    itemFilter = (key) => {
        const children = this.Dom.querySelector(`.list`).children;
        const stateList = this.Dom.querySelector(`.detail`).children;

        Array.from(stateList).forEach(item => { item.classList.remove('state-active') });

        const activeList = this.data.filter(item => !item.state);
        const completedList = this.data.filter(item => item.state);

        // 手动操作 DOM
        Array.from(children).forEach(item => {
            const id = item.getAttribute('tag');

            if (key == 'All') {
                stateList[1].classList.add('state-active');
                Object.assign(item.style, { display: 'block' });
            }

            if (key == 'Active') {
                stateList[2].classList.add('state-active');
                const i = activeList.findIndex(activeItem => activeItem.id == id);
                const style = i != -1 ? { display: 'block' } : { display: 'none' };
                Object.assign(item.style, style);
            }

            if (key == 'Completed') {
                stateList[3].classList.add('state-active');
                const i = completedList.findIndex(activeItem => activeItem.id == id);
                const style = i != -1 ? { display: 'block' } : { display: 'none' };
                Object.assign(item.style, style);
            }
        });
    }
}

6、模块化 CSS

以下 CSS代码 为 TodoList 的 CSS 样式，可以结合 TodoList 中 render() 渲染方法中的 DOM 结构

/* 模块化 css */

@set todolist {
    :root {
        padding: 30px 40px 20px;
        text-align: center;
        width: 440px;
        max-width: 100%;
        margin: 0 auto;
        border-radius: 15px;
        background: #f2f2f2;
    }

    :root .header {
        height: 88px;
        width: 240px;
        margin: auto;
        flow: horizontal;
    }

    :root .header::before {
        content: "";
        dispaly: inline-block;
        width: 88px;
        height: 88px;
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggc3R5bGU9ImZpbGw6I0YyOUMxRjsiIGQ9Ik0yODkuNjU1LDQyMC4xOTNsMjE2LjI3Ni0yMTYuMjc2YzcuOTQ1LTcuOTQ1LDcuOTQ1LTIyLjA2OSwwLTMwLjAxNGwtMTYuNzcyLTE2Ljc3MgoJYy05LjcxLTkuNzEtMjUuNi05LjcxLTM1LjMxLDBMMjQwLjIyMSwzNzAuNzU5TDI4OS42NTUsNDIwLjE5M3oiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0NDQjM3NTsiIGQ9Ik0yODkuNjU1LDQyMC4xOTNsLTQ5LjQzNC00OS40MzRsMTQ4LjMwMy0xNDguMzAzVjM1LjMxYzAtOS43MS03Ljk0NS0xNy42NTUtMTcuNjU1LTE3LjY1NUgyNjQuOTM4CglWOC44MjhjMC01LjI5Ny0zLjUzMS04LjgyOC04LjgyOC04LjgyOEgxMzIuNTI0Yy01LjI5NywwLTguODI4LDMuNTMxLTguODI4LDguODI4djguODI4SDE3Ljc2NkM4LjA1NSwxNy42NTUsMC4xMSwyNS42LDAuMTEsMzUuMzEKCXY0NTkuMDM0YzAsOS43MSw3Ljk0NSwxNy42NTUsMTcuNjU1LDE3LjY1NWgzNTMuMTAzYzkuNzEsMCwxNy42NTUtNy45NDUsMTcuNjU1LTE3LjY1NVYzMjIuMjA3TDI4OS42NTUsNDIwLjE5M3oiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0VDRjBGMTsiIGQ9Ik0yODkuNjU1LDQyMC4xOTNsLTQ5LjQzNC00OS40MzRsMTEyLjk5My0xMTIuOTkzVjYxLjc5M2MwLTUuMjk3LTMuNTMxLTguODI4LTguODI4LTguODI4aC03OS40NDgKCXY4LjgyOGMwLDUuMjk3LTMuNTMxLDguODI4LTguODI4LDguODI4SDEzMi41MjRjLTUuMjk3LDAtOC44MjgtMy41MzEtOC44MjgtOC44Mjh2LTguODI4SDQ0LjI0OGMtNS4yOTcsMC04LjgyOCwzLjUzMS04LjgyOCw4LjgyOAoJdjQwNi4wNjljMCw1LjI5NywzLjUzMSw4LjgyOCw4LjgyOCw4LjgyOGgzMDAuMTM4YzUuMjk3LDAsOC44MjgtMy41MzEsOC44MjgtOC44MjhWMzU3LjUxN0wyODkuNjU1LDQyMC4xOTN6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiNBRjk3NjI7IiBkPSJNMjU2LjExLDcwLjYyMUgxMzIuNTI0Yy01LjI5NywwLTguODI4LTMuNTMxLTguODI4LTguODI4VjguODI4YzAtNS4yOTcsMy41MzEtOC44MjgsOC44MjgtOC44MjgKCUgyNTYuMTFjNS4yOTcsMCw4LjgyOCwzLjUzMSw4LjgyOCw4LjgyOHY1Mi45NjZDMjY0LjkzOCw2Ny4wOSwyNjEuNDA3LDcwLjYyMSwyNTYuMTEsNzAuNjIxIi8+Cjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNFNkU3RTg7IiBwb2ludHM9IjQ4My44NjIsMjI2Ljg2OSA0NDUuOTAzLDI2NC44MjggMzk2LjQ2OSwyMTQuNTEgNDMzLjU0NSwxNzcuNDM0ICIvPgo8cGF0aCBzdHlsZT0iZmlsbDojRUVEREM4OyIgZD0iTTI0Mi44NjksNDM4LjczMWw0Ni43ODYtMTcuNjU1bC00OS40MzQtNTAuMzE3bC0xNy42NTUsNDYuNzg2CglDMjE3LjI2OSw0MzAuNzg2LDIyOS42MjgsNDQ0LjAyOCwyNDIuODY5LDQzOC43MzEiLz4KPGc+Cgk8cGF0aCBzdHlsZT0iZmlsbDojNzk2ODNCOyIgZD0iTTIzOC40NTUsMTQxLjI0MWgtODguMjc2Yy01LjI5NywwLTguODI4LTMuNTMxLTguODI4LTguODI4YzAtNS4yOTcsMy41MzEtOC44MjgsOC44MjgtOC44MjhoODguMjc2CgkJYzUuMjk3LDAsOC44MjgsMy41MzEsOC44MjgsOC44MjhDMjQ3LjI4MywxMzcuNzEsMjQzLjc1MiwxNDEuMjQxLDIzOC40NTUsMTQxLjI0MXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM3OTY4M0I7IiBkPSJNMzAwLjI0OCwxOTQuMjA3aC01Mi45NjVjLTUuMjk3LDAtOC44MjgtMy41MzEtOC44MjgtOC44MjhzMy41MzEtOC44MjgsOC44MjgtOC44MjhoNTIuOTY1CgkJYzUuMjk3LDAsOC44MjgsMy41MzEsOC44MjgsOC44MjhTMzA1LjU0NSwxOTQuMjA3LDMwMC4yNDgsMTk0LjIwN3oiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM3OTY4M0I7IiBkPSJNMjExLjk3MiwxOTQuMjA3SDg4LjM4NmMtNS4yOTcsMC04LjgyOC0zLjUzMS04LjgyOC04LjgyOHMzLjUzMS04LjgyOCw4LjgyOC04LjgyOGgxMjMuNTg2CgkJYzUuMjk3LDAsOC44MjgsMy41MzEsOC44MjgsOC44MjhTMjE3LjI2OSwxOTQuMjA3LDIxMS45NzIsMTk0LjIwN3oiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM3OTY4M0I7IiBkPSJNMzAwLjI0OCwyMjkuNTE3aC0yNi40ODNjLTUuMjk3LDAtOC44MjgtMy41MzEtOC44MjgtOC44MjhzMy41MzEtOC44MjgsOC44MjgtOC44MjhoMjYuNDgzCgkJYzUuMjk3LDAsOC44MjgsMy41MzEsOC44MjgsOC44MjhTMzA1LjU0NSwyMjkuNTE3LDMwMC4yNDgsMjI5LjUxN3oiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM3OTY4M0I7IiBkPSJNMjM4LjQ1NSwyMjkuNTE3aC03MC42MjFjLTUuMjk3LDAtOC44MjgtMy41MzEtOC44MjgtOC44MjhzMy41MzEtOC44MjgsOC44MjgtOC44MjhoNzAuNjIxCgkJYzUuMjk3LDAsOC44MjgsMy41MzEsOC44MjgsOC44MjhTMjQzLjc1MiwyMjkuNTE3LDIzOC40NTUsMjI5LjUxN3oiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM3OTY4M0I7IiBkPSJNMTMyLjUyNCwyMjkuNTE3SDg4LjM4NmMtNS4yOTcsMC04LjgyOC0zLjUzMS04LjgyOC04LjgyOHMzLjUzMS04LjgyOCw4LjgyOC04LjgyOGg0NC4xMzgKCQljNS4yOTcsMCw4LjgyOCwzLjUzMSw4LjgyOCw4LjgyOFMxMzcuODIxLDIyOS41MTcsMTMyLjUyNCwyMjkuNTE3eiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izc5NjgzQjsiIGQ9Ik0zMDAuMjQ4LDI2NC44MjhoLTcwLjYyMWMtNS4yOTcsMC04LjgyOC0zLjUzMS04LjgyOC04LjgyOGMwLTUuMjk3LDMuNTMxLTguODI4LDguODI4LTguODI4aDcwLjYyMQoJCWM1LjI5NywwLDguODI4LDMuNTMxLDguODI4LDguODI4QzMwOS4wNzYsMjYxLjI5NywzMDUuNTQ1LDI2NC44MjgsMzAwLjI0OCwyNjQuODI4eiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izc5NjgzQjsiIGQ9Ik0xOTQuMzE3LDI2NC44MjhoLTUyLjk2NmMtNS4yOTcsMC04LjgyOC0zLjUzMS04LjgyOC04LjgyOGMwLTUuMjk3LDMuNTMxLTguODI4LDguODI4LTguODI4aDUyLjk2NgoJCWM1LjI5NywwLDguODI4LDMuNTMxLDguODI4LDguODI4QzIwMy4xNDUsMjYxLjI5NywxOTkuNjE0LDI2NC44MjgsMTk0LjMxNywyNjQuODI4eiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izc5NjgzQjsiIGQ9Ik0xMDYuMDQxLDI2NC44MjhIODguMzg2Yy01LjI5NywwLTguODI4LTMuNTMxLTguODI4LTguODI4YzAtNS4yOTcsMy41MzEtOC44MjgsOC44MjgtOC44MjhoMTcuNjU1CgkJYzUuMjk3LDAsOC44MjgsMy41MzEsOC44MjgsOC44MjhDMTE0Ljg2OSwyNjEuMjk3LDExMS4zMzgsMjY0LjgyOCwxMDYuMDQxLDI2NC44Mjh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojNzk2ODNCOyIgZD0iTTI0Ny4yODMsMzAwLjEzOGgtNTIuOTY2Yy01LjI5NywwLTguODI4LTMuNTMxLTguODI4LTguODI4czMuNTMxLTguODI4LDguODI4LTguODI4aDUyLjk2NgoJCWM1LjI5NywwLDguODI4LDMuNTMxLDguODI4LDguODI4UzI1Mi41NzksMzAwLjEzOCwyNDcuMjgzLDMwMC4xMzh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojNzk2ODNCOyIgZD0iTTE1OS4wMDcsMzAwLjEzOEg4OC4zODZjLTUuMjk3LDAtOC44MjgtMy41MzEtOC44MjgtOC44MjhzMy41MzEtOC44MjgsOC44MjgtOC44MjhoNzAuNjIxCgkJYzUuMjk3LDAsOC44MjgsMy41MzEsOC44MjgsOC44MjhTMTY0LjMwMywzMDAuMTM4LDE1OS4wMDcsMzAwLjEzOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM3OTY4M0I7IiBkPSJNMjExLjk3MiwzMzUuNDQ4aC03MC42MjFjLTUuMjk3LDAtOC44MjgtMy41MzEtOC44MjgtOC44MjhzMy41MzEtOC44MjgsOC44MjgtOC44MjhoNzAuNjIxCgkJYzUuMjk3LDAsOC44MjgsMy41MzEsOC44MjgsOC44MjhTMjE3LjI2OSwzMzUuNDQ4LDIxMS45NzIsMzM1LjQ0OHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM3OTY4M0I7IiBkPSJNMTA2LjA0MSwzMzUuNDQ4SDg4LjM4NmMtNS4yOTcsMC04LjgyOC0zLjUzMS04LjgyOC04LjgyOHMzLjUzMS04LjgyOCw4LjgyOC04LjgyOGgxNy42NTUKCQljNS4yOTcsMCw4LjgyOCwzLjUzMSw4LjgyOCw4LjgyOFMxMTEuMzM4LDMzNS40NDgsMTA2LjA0MSwzMzUuNDQ4eiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izc5NjgzQjsiIGQ9Ik0xODUuNDksMzcwLjc1OWgtMTcuNjU1Yy01LjI5NywwLTguODI4LTMuNTMxLTguODI4LTguODI4czMuNTMxLTguODI4LDguODI4LTguODI4aDE3LjY1NQoJCWM1LjI5NywwLDguODI4LDMuNTMxLDguODI4LDguODI4UzE5MC43ODYsMzcwLjc1OSwxODUuNDksMzcwLjc1OXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM3OTY4M0I7IiBkPSJNMTMyLjUyNCwzNzAuNzU5SDg4LjM4NmMtNS4yOTcsMC04LjgyOC0zLjUzMS04LjgyOC04LjgyOHMzLjUzMS04LjgyOCw4LjgyOC04LjgyOGg0NC4xMzgKCQljNS4yOTcsMCw4LjgyOCwzLjUzMSw4LjgyOCw4LjgyOFMxMzcuODIxLDM3MC43NTksMTMyLjUyNCwzNzAuNzU5eiIvPgo8L2c+CjxwYXRoIHN0eWxlPSJmaWxsOiNENzVBNEE7IiBkPSJNNTA1LjkzMSwyMDQuOGM3Ljk0NS03Ljk0NSw3Ljk0NS0yMi4wNjksMC0zMC4wMTRsLTE2Ljc3Mi0xNi43NzJjLTkuNzEtOS43MS0yNS42LTkuNzEtMzUuMzEsMAoJbC0xOS40MjEsMTkuNDIxbDUwLjMxNyw1MC4zMTciLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
        background-repeat: no-repeat;
        background-size: contain;
        margin-right: 10px;
    }

    :root .header .info {
        transform: rotate(3deg);
        font-size: 16px;
        padding: 12px 16.8px 12px 16.8px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 16px;
        color: #fff;
        background: #fe7345;
        user-select: none;
        font-weight: bolder;
        margin-top: 20px;
    }

    :root .title {
        font-size: 22px;
        margin-bottom: 18px;
        font-weight: bolder;
        text-align: center;
    }

    :root .form {
        width: 360px;
        height: 30px;
        margin: auto;
    }

    :root .form .form-input {
        width: 250px;
        height: 30px;
        border-bottom: 3px dashed #fe7345;
        flow: horizontal;
    }

    :root .form .form-input input {
        border: none;
        padding: 5px 0 3px;
        font-size: 14px;
        background: transparent;
        width: 100%;
        color: rgba(73, 74, 75, .35);
    }

    :root .form .form-input button {
        position: relative;
        transform: rotate(4deg);
        border-radius: 6px;
        outline: none;
        border: none;
        background: none;
        cursor: pointer;
    }

    :root .form .form-input button .submit {
        position: relative;
        display: block;
        font-size: 16.5px;
        padding: 0.34em 0.84em;
        border: 2px solid #494a4b;
        border-radius: inherit;
        background-color: #fff;
        box-sizing: border-box;
    }

    :root .empty-todos {
        margin-top: 30px;
        text-align: center;
    }

    :root .empty-todos .icon {
        display: inline-block;
        font-size: inherit;
        height: 1em;
        width: 0.75em;
        color: rgba(73, 74, 75, .35);
        margin-right: 12px;
    }

    :root .empty-todos .todos-text {
        font-size: 16px;
        padding-top: 5px;
        color: rgba(73, 74, 75, .45);
    }
}

源码

入门嵌入式HTML/CSS/脚本引擎 sciter
做技术，坚持才是最重要的，一时的热情只是暂时的进步
03-21 1589
1、运行 index.htm <html> <head> <title>Document</title> <style> .container { width: 600px; height: 100px; margin: auto; border: 1px s
入门嵌入式HTML/CSS/脚本引擎 sciter（问题篇）
做技术，坚持才是最重要的，一时的热情只是暂时的进步
03-24 898
sciter 1、初始化打开页面时，无法指定高度 解决方法： init() { // 设窗口的最小宽高 Window.this.minSize = [933, 635]; // 获取屏幕的宽高 let arr = Window.this.screenBox('workarea', 'dimension'); // 初始化窗口大小及居中设置 Window.this.move((arr[0] - 933)/2, (arr[1] - 635) /2, 933, 63
一个Windows下原生SCITer 示例
znsoft的专栏
01-27 593
// HelloWorld.cpp : Defines the entry point for the application. // #include "framework.h" #include "sciter-test.h" #include "sciter-x-window.hpp" class frame : public sciter::window { public: frame() : window(SW_TITLEBAR | SW_RESIZEABLE | SW_CONTROLS.
Sciter教程_01_分析minimal例程
qq_36707072的博客
12-17 694
本教程记录SciterSDK中minimal例程的分析，涉及窗口创建、sciter加载资源文件。
sciter 鼠标上去弹窗例子
qq_42095701的博客
12-04 292
<html> <head> <title>title和popup弹出框</title> <style type="text/css"> dt { border-bottom:1dip dashed gray; } dd { margin-top:10dip; ma...
【sciter】：组件通信
做技术，坚持才是最重要的，一时的热情只是暂时的进步
03-29 509
组件通信 父组件 class App extends Element { constructor() { super(); this.navigate = (id) => { console.log("子组件传递过来的ID", id); } } render() { return <Aside aside={this.aside} navigateto={this.navigatet
sciter-TodoList
12-31
Sciter-TodoList 是一个基于 Sciter 的组件化编程示例，它旨在帮助开发者快速入门Sciter技术，体验其在桌面应用开发中的强大功能。Sciter 是一款现代化的跨平台HTML/CSS/JS渲染引擎，它允许开发者用类似Web的方式来...
Sciter TodoList 桌面应用组件化编程入门教程
资源摘要信息:"本案例名为sciter-TodoList，旨在带你入门sciter组件化编程。案例使用了组件化技术和JSX，通过实现一个TodoList应用，帮助用户理解和掌握sciter在桌面应用开发中的应用。TodoList应用包含基本的待办...
sciter笔记一 初出江湖
QQ282881515的专栏
03-05 3304
一.背景： 玩Htmlayout很长时间了，只局限于模仿别人的UI（特希望找个搞设计或者美工的搭档），C++代码里边根据自己的实际需求扩展了N多hehavior，最令人自豪的算是table标签了（已经达到CGridCtrl的功能了 确切的说是CGridCtrl只能望其项背了）。据说sciter是Htmlayout的加强版，今天抽个时间来看看，首先得出的结论是自己该加强英文基础了。 二：scit
Sciter----交互学习
qq_42095701的博客
07-09 1465
class Mysciter : public sciter::window { public: Mysciter() : window(SW_TITLEBAR | SW_RESIZEABLE | SW_CONTROLS | SW_MAIN | SW_ENABLE_DEBUG) { m_pMakePE = NULL; } BEGIN_FUNCTION_MAP //这里操作传输控件消息 ...
sciter_Note笔记软件源码.7z
04-23
学习sciter代码的好实例 , 同时sciterNote也是一款软件的源码, 希望能帮助到学习的人.
sciter2-界面库及demo(比duilib还好用的界面库)
06-27
sciter2-界面库及demo(比duilib还好用的界面库) 以前一直用MFC做界面，虽有朋友推荐多种界面设计，但也就看看，从没真正去了解。最近帮朋友做导航界面，明确要求用HTMLayout，网上搜索了下，看了下介绍，感觉sciter2比HTMLayout做的界面还炫丽，朋友同意后，今天就开始接触。目的是继承CWnd，生成sciterWnd，然后将sciter2封装在里面，通过换html文件来更好sciterWnd界面设计。
sciter-js-sdk:Sciter.JS-Sciter，但板载QuickJS而不是我的TIScript
03-08
sciter-js-sdk Sciter.JS-Sciter，但板载QuickJS而不是我的TIScript docs / md文件夹中的和。 脚本 Sciter.JS使用特别是 。 ES6：异步/等待，类，模块，解构； BigInt，BigFloat，BigDecimal-具有精确舍入（货币等）的任意精度IEEE 754浮点运算和超越函数； Node.JS运行时（或多或少已满）即将到来； 平台类 Windows-i32，i64和arm64-已发布； Linux-i64，arm32（Raspberry Pi） -已发布； MacOS-i64和arm64-已发布； 手机-待定； 演示版 Calc演示（通用：浏览器和Sciter） 视窗： Linux（特别是Raspberry Pi上的Raspbian） 苹果系统： 路径：样本/计算 浏览器和Sciter显示。 要运行演
sciter-sdk_sciter_sciter-sdk_
09-29
一个方便的基于web页面的UI开发框架.
sciter-layout:sciter.js 布局选项演示应用程序
07-24
sciter 布局演示应用程序 这是一个演示应用程序，它探索了不同的布局可能性。 开始 git clone 仓库 运行install.bat下载最新的 sciter 二进制文件和库 运行scapp.bat 要在更改 html/css 后刷新应用程序，请单击F5 调试应用 启动inspector.exe 在scapp.exe窗口内单击CTRL + SHIFT + I连接到检查器 单击CTRL + SHIFT + left click以检查元素 布局 本文介绍了sciter布局概念 流动 flow是display:flex的 sciter 模拟。 可能的值为： horizontal包含的元素在水平线上 vertical包含的元素在垂直线上 horizontal-wrap与上面相同，当行太长时换行到下一行 row(item1, item2, ...)项目在水平线上 grid自定义布局 st
【亲测免费】 推荐开源项目：Sciter——下一代HTML/CSS/JavaScript引擎
最新发布
gitblog_00068的博客
05-12 1519
推荐开源项目：Sciter——下一代HTML/CSS/JavaScript引擎 项目介绍 Sciter 是一款强大的可嵌入式HTML/CSS/JavaScript引擎，支持Windows、Mac OS X和Linux等多平台。虽然Sciter.TIS的开发已停止，但其替代产品Sciter.JS采用了现代JavaScript（ES2020）作为后台脚本语言，继承了Sciter的核心优势并带来了更广泛...
sciter组件更新与事件绑定
做技术，坚持才是最重要的，一时的热情只是暂时的进步
05-13 295
组件更新 方法一：给组件绑定 key 值，当执行render() 方法时，产生一个随机数，使其更新 class App extrend Element { render() { return <List key={Math.random()} /> } } 只要 key 改变，组件 List中的所有元素（组件的组件）都会更新，并且组件中 css文件会重新加载 原生 DOM 元素也可以绑定 key 值，使其元素下的所有元素更新 方法二：通过 this.com
sciter-js-sdk-4.4.8.10.zip
09-15
Fixes: element.post() fix, see: https://sciter.com/forums/topic/virtual-list-vlist-navigate-issue/ WM_INPUT handling fix (might causing non-handled exceptions); Windows: UIAutomation support is back, but requres SciterSetOption(NULL,SCITER_ENABLE_UIAUTOMATION,TRUE); env.home(path) - returns normalized path - without ".."; flow:stack fix. VirtualSelect/VirtualList fix of the issue: https://sciter.com/forums/topic/virtual-list-vlist-navigate-issue/#post-73783 reactor: fix of handling (name) as key in r13n; Tokenizer: fix of freeze on EOI marker; [JSX] better errors handling. fix of freeze in video rendering + behavior:file-icon/shell-icon; [CSS/JS] prototype: Component, fix of private fields handling; "on click at :root" handling fix; Fix of hanging on ::after { position:absolute } rules; Fix of script debugger in x64 versions; New features: element.matches("selector") / element.$is("selector") API: SciterEvalElementScript() implementation for JS; Element.animate(options,onEnd) - non-promise version; element.mapLocalToWindow(x,y) and element.mapWindowToLocal(x,y) element.swapWith(otherElement) image.colorAt(x,y): Color image.compose(other, op)
Sciter JS函数秒数据装换成时分秒 时间
qq_42095701的博客
01-02 494
/* 时间转换函数 */ function TimeCycleFun(Time) { var day = Math.floor( Time/ (24*3600) ); // Math.floor()向下取整 var hour = Math.floor( (Time - day*24*3600) / 3600); var minute = Math.floor( (T...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

H_四叶草

您的鼓励将是我前进的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值