w2ui 全新的 JavaScript 用户界面 UI 库

发布于 2018-08-03 19:33:12 字数 2655 浏览 2761 评论 0

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

w2ui 特点

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

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

w2ui 的例子

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

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" 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>