jQuery UI Widgets Forums Layouts Docking 4 panels horisontally

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 6 years, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • 4 panels horisontally #46758

    tayling
    Participant

    Hi
    I am a jqwidgets newbie – I am trying to acheive a docking windo with at least 4 panels accross horizintally – I have set the width of the docking window to 1200 and need four panels across (240px) and three panels vertically i.e 12 per view. The demo seems to default to 50 per cent of the window width per panel.

    Any direction gratefully received.

    Regards

    Tony Ayling
    Brisbane Australia

    4 panels horisontally #46765

    Dimitar
    Participant

    Hello Tony Ayling,

    Please take a look at the following example. We hope it is helpful to you:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxDocking
                $("#docking").jqxDocking({ width: 1200, theme: 'classic', orientation: 'horizontal', mode: "docked" });
            });
        </script>
    </head>
    <body class='default'>
        <div id="docking">
            <div>
                <div id="window1">
                    <div>
                        Header 1</div>
                    <div>
                        Content 1</div>
                </div>
                <div id="window5">
                    <div>
                        Header 5</div>
                    <div>
                        Content 5</div>
                </div>
                <div id="window9">
                    <div>
                        Header 9</div>
                    <div>
                        Content 9</div>
                </div>
            </div>
            <div>
                <div id="window2">
                    <div>
                        Header 2</div>
                    <div>
                        Content 2</div>
                </div>
                <div id="window6">
                    <div>
                        Header 6</div>
                    <div>
                        Content 6</div>
                </div>
                <div id="window10">
                    <div>
                        Header 10</div>
                    <div>
                        Content 10</div>
                </div>
            </div>
            <div>
                <div id="window3">
                    <div>
                        Header 3</div>
                    <div>
                        Content 3</div>
                </div>
                <div id="window7">
                    <div>
                        Header 7</div>
                    <div>
                        Content 7</div>
                </div>
                <div id="window11">
                    <div>
                        Header 11</div>
                    <div>
                        Content 11</div>
                </div>
            </div>
            <div>
                <div id="window4">
                    <div>
                        Header 4</div>
                    <div>
                        Content 4</div>
                </div>
                <div id="window8">
                    <div>
                        Header 8</div>
                    <div>
                        Content 8</div>
                </div>
                <div id="window12">
                    <div>
                        Header 12</div>
                    <div>
                        Content 12</div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    4 panels horisontally #46772

    tayling
    Participant

    Thanks Dimitar – just what I wanted. I have been trying to add an extra div on to be a footer – I am guessing that is not possible – so as to hav a shaded header and a shaded footer?

    Thanks very much for your promt and very helpful reply.
    Regards
    Tony Ayling

    4 panels horisontally #46800

    Dimitar
    Participant

    Hello Tony Ayling,

    The jqxWindow widget has a specific structure of two divs – header and content – which should not be changed. However, you may insert a footer in the content section and make it look like the header. Here is how:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.orange.css" type="text/css" />
        <style type="text/css">
            #content
            {
                position: relative;
                overflow: hidden;
                padding: 0;
            }
            #footer
            {
                position: absolute;
                bottom: 0;
                height: 15px;
                width: 100%;
                border-top-width: 1px;
                border-top-style: solid;
                border-bottom: none;
            }
        </style>
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    </head>
    <body>
        <div>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#jqxwindow ").jqxWindow({ height: 90, width: 150, theme: "orange" });
                });
            </script>
            <div id='jqxwindow'>
                <div>
                    Header</div>
                <div id="content">
                    <div>
                        Content
                    </div>
                    <div id="footer" class="jqx-window-header jqx-window-header-orange jqx-fill-state-normal jqx-fill-state-normal-orange">
                        Footer</div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    4 panels horisontally #47501

    tayling
    Participant

    Thanks Dimitar
    Looking good – would you be able to suggest how I could make it responsive – as in if I have 4 x 3 – it shrinks to 2 x 6 if rotated or viewed on phone?
    Heres hoping
    Regards
    Tony Ayling

    4 panels horisontally #47515

    Dimitar
    Participant

    Hi tayling,

    We suggest you append the needed docking HTML structure dynamically before initializing the widget. Here is an example on how to achieve this. It remains to you to determine the conditions for the two layouts – 4×3 (a) and 2×6 (b).

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var width;
                if (true == true) {
                    $("#docking").append('<div> <div id="window1"> <div> Header 1</div> <div> Content 1</div> </div> <div id="window5"> <div> Header 5</div> <div> Content 5</div> </div> <div id="window9"> <div> Header 9</div> <div> Content 9</div> </div> </div> <div> <div id="window2"> <div> Header 2</div> <div> Content 2</div> </div> <div id="window6"> <div> Header 6</div> <div> Content 6</div> </div> <div id="window10"> <div> Header 10</div> <div> Content 10</div> </div> </div> <div> <div id="window3"> <div> Header 3</div> <div> Content 3</div> </div> <div id="window7"> <div> Header 7</div> <div> Content 7</div> </div> <div id="window11"> <div> Header 11</div> <div> Content 11</div> </div> </div> <div> <div id="window4"> <div> Header 4</div> <div> Content 4</div> </div> <div id="window8"> <div> Header 8</div> <div> Content 8</div> </div> <div id="window12"> <div> Header 12</div> <div> Content 12</div> </div> </div>');
                    width = 1200;
                } else if (true == true) {
                    $("#docking").append(' <div> <div id="window1"> <div> Header 1</div> <div> Content 1</div> </div> <div id="window3"> <div> Header 3</div> <div> Content 3</div> </div> <div id="window5"> <div> Header 5</div> <div> Content 5</div> </div> <div id="window7"> <div> Header 7</div> <div> Content 7</div> </div> <div id="window9"> <div> Header 9</div> <div> Content 9</div> </div> <div id="window11"> <div> Header 11</div> <div> Content 11</div> </div> </div> <div> <div id="window2"> <div> Header 2</div> <div> Content 2</div> </div> <div id="window4"> <div> Header 4</div> <div> Content 4</div> </div> <div id="window6"> <div> Header 6</div> <div> Content 6</div> </div> <div id="window8"> <div> Header 8</div> <div> Content 8</div> </div> <div id="window10"> <div> Header 10</div> <div> Content 10</div> </div> <div id="window12"> <div> Header 12</div> <div> Content 12</div> </div> </div>');
                    width = 600;
                };
    
                // Create jqxDocking
                $("#docking").jqxDocking({ width: width, theme: 'classic', orientation: 'horizontal', mode: "docked" });
            });
        </script>
    </head>
    <body class='default'>
        <div id="docking">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.