网页界面组件 ControlKit

xiaoxiao2021-02-28  94

一个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>

简单的一个面板,有两个输入框,一个显示数字,一个显示字符串: 效果如下:

controlKit下载

转载请注明原文地址: https://www.6miu.com/read-41131.html

最新回复(0)