Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

javascript - Setting some form object in tab in layout in w2ui

0 votes
120 views
in Technique[技术] by (71.8m points)

javascript - Setting some form object in tab in layout in w2ui

I am novice for jquery. I want to make some code for setting some form object in tab in layout in w2ui. I found some javascript library looking good name w2ui. (http://w2ui.com/web/demo/tabs)

Below are my code strugging. I want to layout grid1 and grid2 object in layout.main position using tab. There aren't related code for resoling this issue. Thanks in advance.

<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, resizable: true, style: pstyle, content: 'left' },
                { type: 'main', style: pstyle, content: 'main' },
                { type: 'preview', size: '50%', resizable: true, style: pstyle, content: 'preview' },
                { type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' },
                { type: 'bottom', size: 50, resizable: true, style: pstyle, 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', size: '180px' },
                { field: 'email', caption: 'Email', size: '40%' },
                { field: 'sdate', caption: 'Start Date', size: '120px' }
            ],
            records: [
                { recid: 1, fname: 'John', lname: 'Doe', email: '[email protected]', sdate: '4/3/2012' },
                { recid: 2, fname: 'Stuart', lname: 'Motzart', email: '[email protected]', 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"' }
            ],
            records: [
                { recid: 1, state: 'Open', title: 'Short title for the record', priority: 2 },
                { recid: 2, state: 'Open', title: 'Short title for the record', priority: 3 },
                { recid: 3, state: 'Closed', title: 'Short title for the record', priority: 1 }
            ]
        };
    
    </script>





</body>
</html>
question from:https://stackoverflow.com/questions/65648989/setting-some-form-object-in-tab-in-layout-in-w2ui

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Here you go.

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

and full page

<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', size: '180px' },
                { field: 'email', caption: 'Email', size: '40%' },
                { field: 'sdate', caption: 'Start Date', size: '120px' }
            ],
            records: [
                { recid: 1, fname: 'John', lname: 'Doe', email: '[email protected]', sdate: '4/3/2012' },
                { recid: 2, fname: 'Stuart', lname: 'Motzart', email: '[email protected]', 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"' }
            ],
            records: [
                { recid: 1, state: 'Open', title: 'Short title for the record', priority: 2 },
                { recid: 2, state: 'Open', title: 'Short title for the record', priority: 3 },
                { recid: 3, state: 'Closed', title: 'Short title for the record', 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, resizable: true, style: pstyle, content: 'left' },
                { type: 'main', style: pstyle,
                    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%', resizable: true, style: pstyle, content: 'preview' },
                { type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' },
                { type: 'bottom', size: 50, resizable: true, style: pstyle, content: 'bottom' }
            ]
        });
        w2ui['layout'].content('main', w2ui.grid1);

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

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...