页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

保用HTML5 Canvas创建类似桌面用户界面Zebra

html5 UI组件库 HTML我帮您 1年前  次浏览
Zebra是JavaScript库,实现优美,易于使用OOP的概念,再加上丰富的UI组件,解耦UI引擎,IO和其他包。 UI组件开发基于HTML5 Canvas元素。这种方法不同于传统的WEB UI,用户界面​​是围绕HTML DOM和CSS。Zebra UI组件从实现HTML画布上呈现了一些组件。 特点 Zebra 基于OOP概念的JavaScript的类,接口,重载,超载,构造,包装,内部类,超类方法的访问,混合等 Zebra UI引擎,可以用来作为强大基础, 像素由像素渲染控制的UI组件 简单灵活的事件(键盘,鼠标等)的操控,先进的事件技术开发复合的UI组件 预定义的布局管理器的UI组件 轻松开发自己的布局管理器 完全控制的UI组件渲染 Zebra UI面板播放视频 闪存,纯web本地剪贴板粘贴和复制支持 字体度量计算 分层UI架构 Zebra丰富的UI组件: 超过30个不同的UI组件 外观和感觉定制 复杂的UI组件:网格,树,标签,组合,滚动,菜单等 基于OOP的概念和正确的设计,完全可定制的用户界面组件 简单的数据模型描述 移动设备支持 触摸屏支持 惯性滚动 虚拟键盘输入
<!DOCTYPE html>
<html>
    <head>
        <script src='http://repo.zebkit.org/pa3/zebra.min.js'
                type='text/javascript'></script>
        <script type='text/javascript'>
            zebra.ready(function() {
                // import classes and variables from "ui" and "layout" packages in local space
                eval(zebra.Import("ui", "layout"));

                // create Canvas using JSON like style
                (new zCanvas()).root.properties({
                    layout: new BorderLayout(),
                    kids  : {
                        CENTER: new TextField("", true),
                        TOP   : (new BoldLabel("Sample application")).properties({
                            padding : 8
                        }),
                        BOTTOM: new Button("Ok")
                    }
                });
            });
        </script>
    </head>
    <body></body>
</html>
 

相关链接

发表评论