在 w2ui 布局的选项卡中设置一些表单对象

如何解决在 w2ui 布局的选项卡中设置一些表单对象

我是 jquery 的新手。我想制作一些代码来在 w2ui 的布局中的选项卡中设置一些表单对象。我发现了一些看起来不错的 javascript 库 w2ui。 (http://w2ui.com/web/demo/tabs)

下面是我的代码挣扎。我想使用选项卡在 layout.main 位置布局 grid1 和 grid2 对象。没有解决此问题的相关代码。提前致谢。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.rc1.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.rc1.min.js"></script>
</head>
<body>
    
    <div id="layout" style="width: 100%; height: 250px;"></div>


    <script>
        $(function () {
        var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
        $('#layout').w2layout({
            name: 'layout',panels: [
                { type: 'top',size: 50,resizable: true,style: pstyle,content: 'top' },{ type: 'left',size: 200,content: 'left' },{ type: 'main',content: 'main' },{ type: 'preview',size: '50%',content: 'preview' },{ type: 'right',content: 'right' },{ type: 'bottom',content: 'bottom' }
            ]
        });
        
        $('#layout.main').w2tabs({
            name: 'tabs',active: 'tab1',tabs: [
                { id: 'tab1',text: 'Tab 1' },{ id: 'tab2',text: 'Tab 2' }
            ]
        });
    });
    
    
    var grid1 = { 
            name: 'grid1',columns: [
                { field: 'fname',caption: 'First Name',size: '180px' },{ field: 'lname',caption: 'Last Name',{ field: 'email',caption: 'Email',size: '40%' },{ field: 'sdate',caption: 'Start Date',size: '120px' }
            ],records: [
                { recid: 1,fname: 'John',lname: 'Doe',email: 'jdoe@gmail.com',sdate: '4/3/2012' },{ recid: 2,fname: 'Stuart',lname: 'Motzart',sdate: '4/3/2012' }
            ]
        };
        
    var grid2: { 
            name: 'grid2',columns: [
                { field: 'state',caption: 'State',size: '80px' },{ field: 'title',caption: 'Title',size: '100%' },{ field: 'priority',caption: 'Priority',size: '80px',attr: 'align="center"' }
            ],state: 'Open',title: 'Short title for the record',priority: 2 },priority: 3 },{ recid: 3,state: 'Closed',priority: 1 }
            ]
        };
    
    </script>





</body>
</html>

解决方法

给你。

onClick: function (event) {
    switch (event.target)
    {
        case 'tab1': w2ui['layout'].content('main',w2ui.grid1); break;
        case 'tab2': w2ui['layout'].content('main',w2ui.grid2); break;
    }
}

和整页

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.rc1.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.rc1.min.js"></script>
</head>
<body>
    
    <div id="layout" style="width: 100%; height: 250px;"></div>


    <script>
        $(function () {
        
    // load grid into memory    
    $().w2grid({
            name: 'grid1',columns: [
                { field: 'fname',caption: 'First Name',size: '180px' },{ field: 'lname',caption: 'Last Name',{ field: 'email',caption: 'Email',size: '40%' },{ field: 'sdate',caption: 'Start Date',size: '120px' }
            ],records: [
                { recid: 1,fname: 'John',lname: 'Doe',email: 'jdoe@gmail.com',sdate: '4/3/2012' },{ recid: 2,fname: 'Stuart',lname: 'Motzart',sdate: '4/3/2012' }
            ]
        });
        
    $().w2grid({
            name: 'grid2',columns: [
                { field: 'state',caption: 'State',size: '80px' },{ field: 'title',caption: 'Title',size: '100%' },{ field: 'priority',caption: 'Priority',size: '80px',attr: 'align="center"' }
            ],state: 'Open',title: 'Short title for the record',priority: 2 },priority: 3 },{ recid: 3,state: 'Closed',priority: 1 }
            ]
        });
        
        var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
        $('#layout').w2layout({
            name: 'layout',panels: [
                { type: 'top',size: 50,resizable: true,style: pstyle,content: 'top' },{ type: 'left',size: 200,content: 'left' },{ type: 'main',tabs: {
                        name: 'tabs',active: 'tab1',tabs: [
                            { id: 'tab1',text: 'Tab 1' },{ id: 'tab2',text: 'Tab 2' }
                        ],onClick: function (event) {
                            switch (event.target)
                            {
                                case 'tab1': w2ui['layout'].content('main',w2ui.grid1); break;
                                case 'tab2': w2ui['layout'].content('main',w2ui.grid2); break;
                            }
                        }
                    }
                },{ type: 'preview',size: '50%',content: 'preview' },{ type: 'right',content: 'right' },{ type: 'bottom',content: 'bottom' }
            ]
        });
        w2ui['layout'].content('main',w2ui.grid1);

    });
    </script>
</body>
</html>