w2ui 全新的 JavaScript 用户界面 UI 库

Z时代
2024-01-10
分类：IT

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" target="_blank" class="external-link" 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>