wiki:DocManuallayoutFive

TOC?

>> Back to manual

Layout configuration

Using resizeable elements - jQuery ui layout

v5 uses as default the ui layout jQuery library for a flexible layout design with nested and resizable zones. The default index.phtml file is one of the main files users will typically modify and adapt to their specific needs. The current layout configuration is done in the <header> part of this file. Adapt the section below for details of element positioning, margins etc.

   /**
    * Settings for jquery.ui.layout
    * ======= ADAPT TO PAGE LAYOUT =======
    */
    $(document).ready(function () {
        var mrgH = 6;
        var mrgV = 6;

        $('#uiLayoutRoot').css({position:'absolute',  top:10, bottom:10, left:10, right:10});
        $('#uiLayoutWest').css({position:'absolute', width:0, 'margin-right':mrgH});
        $('#uiLayoutEast').css({position:'absolute', right:0, width:240, height:'100%', 'margin-left':mrgH, 'margin-right':mrgH, 'z-index':99});
        $('#uiLayoutNorth').css({position:'absolute', top:0, height:40, width:'100%', 'margin-bottom':mrgV});
        $('#uiLayoutSouth').css({position:'absolute', bottom:0, height:35, width:'100%', 'margin-top':mrgV+2});

        /** Some components to be added to UI */
        $('#uiLayoutNorth').pmToolLinks(PM.linksDefault);   // Tool links
        $('#uiLayoutNorth').pmSearchContainer({'style':'inline'});
        //$('#uiLayoutCenter').pmAppendElement('div', null).addClass('map-top-bar');  // Top bar over map

        PM.Layout.resizeContainers();
        $(window).resize(function(){
            PM.Layout.resizeContainers();
        });
    });

The first part contains jQuery layout definitions, for detailed descriptions of the various options at the respective homepage at http://layout.jquery-dev.net/documentation.html

The part below /** Some components to be added to UI */ is more p.mapper-specific and defines e.g. the toolbar definition (placement and tools included). Exact placement is done via CSS in css/pm.layout.css.

Some Style (CSS) settings can either be applied also at this section listed above or in the specific style section:

 <style type="text/css">
 <!--
   .ui-layout-west {border: 1px solid #999999; background-color:#e9e9e9;}
   .ui-layout-center {border: 1px solid #999999;}
   .ui-layout-root {border: 1px solid #000000;}
 }
 -->
 </style>

See also the FAQ about customizations.

Alternative Layout Samples

A bunch of sample layouts is available via the SVN here or via the sourceforge repository.

You can also view the samples online here

Last modified 2 years ago Last modified on Nov 19, 2014, 7:48:52 AM