jQuery UI Widgets Forums Layouts Panel and Responsive Panel Creating a new panel layout

This topic contains 14 replies, has 3 voices, and was last updated by  Hristo 8 years, 5 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • Creating a new panel layout #77027

    alastairwalker
    Participant

    Hi – I am trying to create a variant of the demos in demos/jqxpanel/dockpanel.htm.

    As follows:
    ______________________________________________
    | | |
    |_______________________________| |
    | | |
    |_______________________________| |
    | | |
    |_______________________________| |
    | | |
    | | |
    |_______________________________|_____________|

    But I cannot work out the basic method from the documentation given as to how to create the above layout.

    Any help on how to create the about layout will be really appreciated!

    Alastair

    Creating a new panel layout #77028

    alastairwalker
    Participant

    Sorry – the layout got messed up.

    Let’s try again.

    ______________________________________________
    | | |
    |_______________________________| |
    | | |
    |_______________________________| |
    | | |
    |_______________________________| |
    | | |
    |_______________________________|_____________|
    `

    (I would have attached an image – but there is no facility for attachments.)

    But I cannot work out the basic method from the documentation given as to how to create the above layout.

    Any help on how to create the about layout will be really appreciated!

    Alastair

    Creating a new panel layout #77029

    alastairwalker
    Participant

    Sorry – gave up – found no way to format the layout.

    Alastair

    Creating a new panel layout #77030

    alastairwalker
    Participant

    I must try again!

    With reference to the demo on http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxpanel/index.htm#demos/jqxpanel/dockpanel.htm

    referring to example 4 (2nd from the right), I am trying to add a column to the right of all the three horizontal columns.

    Alternatively, looking at example three, take the leftmost column and divide it horizontally into three rows.

    Can this be done?

    Alastair

    Creating a new panel layout #77109

    Vladimir
    Participant

    Hello Alastair,

    How the panel works is it that it gets the divs in the order specified in the dom tree declaration (in the example in the order #first, #second, #third, #fourth) and tries to place them inside the panel at their specified position. If width is specified it will be used when docking is left or right, and will take the full height. If docking is top or bottom it will use the specified height, and take the full remaining width.

    So what you want to do is add your side panel first with docking right and specified width. And then add the 3 horizontal divs one under the other (with docking top).

    For example something like this:

                            $("#jqxDockPanel > div > div").css({ height: '60px', width: '100px'});
                            $('#first').attr('dock', 'right');
                            $('#first').width('60px');
                            $('#second').attr('dock', 'top');
                            $('#third').attr('dock', 'top');
                            $('#fourth').attr('dock', 'top');

    Note that the order of applying the attributes is irrelevant. What matters is the order of the elements in the DOM.

    Best Regards,
    Vladimir

    jQWidgets Team
    http://www.jqwidgets.com

    Creating a new panel layout #77118

    alastairwalker
    Participant

    OK – many thanks for the quick feedback! I will try this out!

    Alastair

    Creating a new panel layout #77139

    alastairwalker
    Participant

    Hi – the provided example works fine!

    But I have a question about notation.

    The notation for the selector “#jqxDockPanel > div > div” is not familiar to me.

    Can you indicate what part of the DOM model I should look at to understand this notation? (i.e. I usually understand the ‘>’ to be ‘greater than’). Is this implied in this selector definition?

    Many thanks,

    Alastair

    Creating a new panel layout #77165

    Vladimir
    Participant

    Hello Alastair,

    You can read more about css selectors here.

    element>element div > p Selects all <p> elements where the parent is a <div> element 2

    Best Regards,
    Vladimir

    jQWidgets Team
    http://www.jqwidgets.com

    Creating a new panel layout #77179

    alastairwalker
    Participant

    OK – that insight is helpful. I take it that CSS styling interpretation to mean in simple English ‘apply the defined styling to the division child(ren) and (grand)child(ren)’. Is this correct?

    I have three further questions regarding the rules that apply to creating the panel layout:

    a) I notice that all the examples use four divisions, yet in three instances (examples 3 – 5) not all the panels are visible, yet they have been ‘allocated’ in the panel formatting. Why for example, in example 3 (two horizontal rows) are #third and #fourth used in the DOM model – i.e. and not simply left out? Is it necessary to always specify in the panel layout what happens to all the panels – even though some of them may be not visible?

    b) If I have a complex panel layout arrangement of say 10 panels, I will then need to identify selectors for panels #first through to #tenth, for argument sake? (i.e. I am not completely sure at this stage if the capability of the panel layout is limited to four panels only? – or any number of panels is possible?)

    c) Related to b) above, are there limitations in the complexity of the layouts that can be achieved with this widget? Or is the panel layout infinitely flexible?

    Many thanks in advance for your responses to these questions!

    Alastair

    Creating a new panel layout #77181

    Vladimir
    Participant

    Hello Alastair,

    Not exactly.

    The quoted selector says: Select all <div> elements that have a <div> element as parent, and that <div> element has an element as his parents that has an id jqxDockPanel.

    Regarding your question:
    a) In general you wouldn’t want to have invisible div elements, unless they have a specific purpose. Normally you would just delete them from your DOM. In the demo in order to provide easier switch between the layouts in some cases the 4th element is left invisible (outside of panel), but not removed. So no – it is not necessery, but generally you would want to.
    b) Any number of panels should be possible. The selection and naming of the tags is entirely up to you.
    c) I am not aware of any limitations aside from the fact that since the panel will take the entire available space in one direction, you are likely to run out of space pretty soon, and I can’t think of particular reason to place too many of them, unless you want to create a drawing with divs.

    Best Regards,
    Vladimir

    jQWidgets Team
    http://www.jqwidgets.com

    • This reply was modified 8 years, 7 months ago by  Vladimir. Reason: fixed explanation for css selector
    Creating a new panel layout #77223

    alastairwalker
    Participant

    I think I am nearly there!

    To see if my understanding is accurate, I tried to create a panel layout design as follows:

    a) a horizontal row at the top
    b) followed by three panels, comprising two horizontal panels right aligned to a vertical panel
    c) at the bottom of the structure is a horizontal row – the same width as the top horizontal row.

    The top and bottom horizontal rows both extend the full with of the panels in b).

    The DOM model is as follows for the 5 panels:

    
            <div id='jqxDockPanel'>
                <div id='first' style='background: #486974;'>
                    First Div</div>
                <div id='second' style='height: 100px; background: #368ba7;'>
                    Second Div</div>
                <div id='third' style='background: #df7169;'>
                    Third Div</div>
                <div id='fourth' style='background: #a73654;'>
                    Fourth Div</div>
                <div id='fifth' style='background: #a73600;'>
                    Fifth Div</div>
            </div>
    

    And the panel design is as follows:

    
                        $("#jqxDockPanel > div > div").css({ height: 'auto', width: 'auto'});
                        $('#first').attr('dock', 'top');
                        $('#first').height('100px');
                        $('#second').attr('dock', 'right');
                        $('#second').width('100px');                     
                        $('#third').attr('dock', 'top');
                        $('#third').height('100px');
                        $('#fourth').attr('dock', 'top');                        
                        $('#fourth').height('150px');                       
                        $('#fifth').attr('dock', 'bottom'); 
    

    The problem at the moment is that the fifth panel falls directly under the fourth panel and is the same width as that panel.

    I want to have the 5th panel equal to the width of the 4th panel plus the width of the 2nd panel.

    Is there something in the specification I am not understanding correctly?

    Many thanks,

    Alastair

    Creating a new panel layout #77225

    Vladimir
    Participant

    Hello Alastair,

    Since the second panel is taking all the vertical space, the remaining horizontal space for the fifth panel is decreased. If you would like the fifth to take the entire horizontal space (e.g. be equal to the width of the first panel), it should be placed before the second panel in the domtree.

    Example:

            <div id='jqxDockPanel'>
                <div id='first' style='background: #486974;'>
                    First Div</div>
                <div id='fifth' style='background: #a73600;'>
                    Fifth Div</div>
                <div id='second' style='height: 100px; background: #368ba7;'>
                    Second Div</div>
                <div id='third' style='background: #df7169;'>
                    Third Div</div>
                <div id='fourth' style='background: #a73654;'>
                    Fourth Div</div>
            </div>

    As I explained – the panels are being placed depending on their order in the dom tree, taking as much space as it is available.

    Best Regards,
    Vladimir

    jQWidgets Team
    http://www.jqwidgets.com

    Creating a new panel layout #77231

    alastairwalker
    Participant

    OK! Clearly this will take me some time to grasp all the subtleties!

    Many thanks!

    Alastair

    Creating a new panel layout #80250

    alastairwalker
    Participant

    I am trying to extend a panel layout using the following example as a framework:

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta name="keywords" content="jqxDocking, jQuery Docking, jQWidgets, Default Functionality" />
        <meta name="description" content="jqxDocking is a widget which helps you to control and manage multiple windows and 
        even the layout of your page. Each window which is part of jqxDocking can be dragged around the Web page, 
        docked into docking zones, collapsed into a minimized state, expanded or pinned." />
        <title id='Description'>jqxDocking represents a widget which enables you to manage and
            layout multiple windows on a web page.</title>
        <link rel="stylesheet" href="libraries/jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="libraries/jqwidgets/styles/jqx.energyblue.css" type="text/css" />    
        <script type="text/javascript" src="libraries/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="libraries/jqwidgets/scripts/demos.js"></script>
        <script type="text/javascript" src="libraries/jqwidgets/jqx-all.js"></script>
     
        <script type="text/javascript">
            $(document).ready(function () {
     $("#jqxDockPanel").jqxDockPanel({
         width: 600,
         height: 410
     });
    
    });
        </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="width: 300px; height: 600px; font-size: 13px; font-family: Verdana;">
        <div id='jqxDockPanel'>
            <div id='first' dock='top' style='background: #486974;'>First Div</div>
            <div id='second' dock='top' style='background: #368ba7;'>Second Div</div>
            <div id='third' dock='right' style='background: #df7169;'>Third Div</div>
            <div id='fourth' dock='left'  style='background: #a73654;'>Fourth Div</div>
            <div id='fifth' dock='bottom'  style='background: #a73000;'>Fifth Div</div>        
        </div>
    </body>
    </html>
    
    What I am trying to achieve is to have division 5 as a completely separate bar at the bottom of the panel.
    
    I expected the 'bottom' to place the division at the bottom, but at the moment it is in the middle of divisions 3 and 4.
    
    Any guidance on how to achieve this will be really appreciated!
    
    Alastair
    
    Creating a new panel layout #80302

    Hristo
    Participant

    Hello Alastair,

    Please take a look this example:
    http://jsfiddle.net/txhi/7zodm920/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.