w2ui 全新的 JavaScript 用户界面 UI 库

发布于 2018-08-03 字数2881 浏览 745 评论 0

w2ui 是一个全新的 JavaScript 脚本库,使用他您必须要有一定的编写网页的能力。您可以使用任何服务端语言(NodeJS, php, Java, .NET, perl等)与 w2ui 交互。它可以使从服务器或着是JavaScript 的浏览器返回数据。

w2ui 全新的 JavaScript 用户界面 UI 库

w2ui 特点

如果你下载 minified 版本的库,下面的 JavaScript 小部件包括

  • 布局
  • 网格
  • 工具栏
  • Tree
  • TAB标签
  • 弹出
  • 表单
  • Fields
  • Utilitis

w2ui 的例子

下面是一个完整的例子,使用网格控件 HTML 页:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" external-link="true" href="http://w2ui.com/src/w2ui-1.4.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="http://w2ui.com/src/w2ui-1.4.min.js"></script>
</head>
<body>
    <div id="grid" style="width: 100%; height: 250px;"></div>
</body>
<script>
$(function () {
    $('#grid').w2grid({
        name: 'grid',
        header: 'List of Names',
        columns: [
            { field: 'fname', caption: 'First Name', size: '30%' },
            { field: 'lname', caption: 'Last Name', size: '30%' },
            { field: 'email', caption: 'Email', size: '40%' },
            { field: 'sdate', caption: 'Start Date', size: '120px' }
        ],
        records: [
            { recid: 1, fname: "Peter", lname: "Jeremia", email: 'peter@mail.com', sdate: '2/1/2010' },
            { recid: 2, fname: "Bruce", lname: "Wilkerson", email: 'bruce@mail.com', sdate: '6/1/2010' },
            { recid: 3, fname: "John", lname: "McAlister", email: 'john@mail.com', sdate: '1/16/2010' },
            { recid: 4, fname: "Ravi", lname: "Zacharies", email: 'ravi@mail.com', sdate: '3/13/2007' },
            { recid: 5, fname: "William", lname: "Dembski", email: 'will@mail.com', sdate: '9/30/2011' },
            { recid: 6, fname: "David", lname: "Peterson", email: 'david@mail.com', sdate: '4/5/2010' }
        ]
    });
});
</script>
</html>

下载地址

w2ui 下载说明

你可以下载一个压缩版的文件或从 github.com 得到完整的源代码。有 2 个文件,你需要将 w2ui.js(或w2ui-1.4.min.js)和 w2ui.css(或w2ui-1.4.min.css) 文件引入到您的网页中。这些文件需要引入到每一个你想要使用 w2ui 的页面中。

下载地址

官方网站  |  下载地址  |  在线demo

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!