CKUIToolkit

A simple settings modal framework.

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/441653/1625560/CKUIToolkit.js

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

Author
CKylinMC
Version
1.2.4
Created
2022-03-17
Updated
2025-07-17
Size
31.2 KB
License
GPL-3.0-only

通过JSON/对象创建设置对话框

        const sampleCfg = {
            title: '设置',
            theme: 'dark',//可选, dark
            settings: [
                {
                    name: 'simple-text',
                    type: 'text',
                    label: '简单文本',
                }, {
                    name: 'simple-toggle',
                    type: 'toggle',
                    label: '简单开关',
                    description: '这是一个简单的开关',
                    value: false,
                }, {
                    name: 'simple-input',
                    type: 'input',
                    label: '简单输入框',
                    description: '这是一个简单的输入框',
                    value: '',
                }, {
                    name: 'simple-num-input',
                    type: 'inputnumber',
                    label: '简单数字输入框',
                    description: '这是一个简单的输入框',
                    value: 0,
                    min: 0,
                    max: 100,
                    step: 1,
                }, {
                    name: 'simple-long-input',
                    type: 'inputarea',
                    label: '简单长文本输入框',
                    description: '这是一个简单的输入框',
                    value: '',
                    checker: ()=>true,
                }, {
                    name: 'simple-select',
                    type: 'select',
                    label: '简单选择框',
                    description: '这是一个简单的选择框',
                    value: '',
                    options: [
                        { opt: '选项1', value: '1' },
                        { opt: '选项2', value: '2' },
                    ]
                }, {
                    name: 'text-toggle',
                    type: 'texttoggle',
                    description: '这是一个简单的选择框',
                    before: '开关当前处于',
                    on: '开',
                    off: '关',
                    after: '状态',
                    value: false,
                },{
                    name: 'simple-raw',
                    type: 'raw',
                    contents: {
                        text:'RAW!!!!'
                    },
                }, {
                    name: 'header',
                    type: 'header',
                    label: '分区A',
                }, {
                    name: 'btns',
                    type: 'btns',
                    btns: [
                        {
                            label: "1111111111111111111111111111",
                            onclick: async () => console.log(123)
                        },
                        {
                            label: "2222"
                        },
                        {
                            label: "3333"
                        },
                        {
                            label: "4444"
                        },
                    ],
                }, {
                    name: 'window-a',
                    type: 'window',
                    label: '窗口A',
                    config: {
                        title: '窗口A',
                        settings: [
                            {
                                name: 'window-a-sub-a',
                                type: 'text',
                                label: '窗口A子项A',
                            }
                        ]
                    }
                }
            ]
        };
        CKUIToolkit.showSettings(sampleCfg).then(it=>console.log('result:',it,'\nOrigin:',sampleCfg));