网页界面组件 ControlKit

bullzerone

于 2017-07-10 21:00:23 发布

阅读量777

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 3D 文章标签： javascript 界面库

本文链接：https://blog.youkuaiyun.com/bullzerone/article/details/74936612

Web 3D 专栏收录该内容

6 篇文章

订阅专栏

ControlKit是一个JavaScript库，专注于创建美观的网页界面组件，包括按钮、输入框、滑动条和复选框等。它能帮助开发者轻松实现具有专业外观的交互元素，如示例中展示的简单面板，包含两个输入框，分别用于显示数字和字符串。

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

一个JavaScript库，可以在网页上作出非常漂亮的简单组件，如：按钮，输入框，滑动条，复选框等。
一个展示效果图片，感受一下：

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Altering Classes on the FLY</title>
    <style>
        p {
            padding: .5em;
        }
        p.highlighted {
            background: #666666;
        }
    </style>
</head>
<body>
<p>Mouse Enter</p>
<P>Mouse Leave</P>

<script src="jquery19.js">

</script>

<script type="text/javascript">
    $(function () {
        $("p").mouseenter(function () {
            $(this).addClass("highlighted");
        });

        $("p").mouseleave(function () {
            $("p").removeClass("highlighted");
        });
    });
</script>

<script type="text/javascript"  src="controlKit.js"></script>
<script type="text/javascript">
    window.addEventListener('load',function () {
        var obj = {
            number: 0,
            string: 'abc'
        };

        var controlKit = new ControlKit();
        controlKit.addPanel()
            .addGroup()
            .addSubGroup()
            .addNumberInput(obj,'number')
            .addStringInput(obj,'string');
    });
</script>
</body>
</html>