[[TOC]] [DocManual >> Back to manual ] = Layout configuration = == Using resizeable elements - jQuery ui layout == v4 uses as default the ui layout jQuery library for a flexible layout design with nested and resizable zones. The default map.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 {{{

}}} part of this file, like {{{ $(document).ready(function () { myLayout = $('body').layout({ west__initClosed: true, north__size: 40, south__size: 35, east__size: 220, north__spacing_open: 0, south__spacing_open: 0, center__onresize: "PM.Layout.resizeMapZone", east__onresize: function(name, element){$('#toc').height(element.height() - $('#refmap').height() - 3) } }); myLayout.resizeAll(); /** Some components to be added to UI */ $('#uiLayoutCenter').toolBar(PM.buttonsDefault); // ToolBar, REQUIRED $('#uiLayoutNorth').toolLink(PM.linksDefault); // Tool links $('#uiLayoutCenter').appendElement('div').addClass('map-top-bar'); // Top bar over map }); }}} 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 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 {{{templates/layout.css}}}. == Plain layout == An alternative layout using a simplified approach is available via the {{{map_plainlayout.phtml}}} start page. Auto-resizing of selected elements (typically the map) is performed via the !JavaScript functions inside the {{{}}} part of the file. {{{ $.extend(PM.Layout, { resizeContainers: function() { } } }}} The function {{{resizeContainers: function()}}} has to be adapted in case the layout should be modified, e.g. having the TOC on the left side etc. This should be quite straightforward and require only basic knowledge of !JavaScript, taking as template the existing function. Adapt the section below for details of element positioning, margins etc. {{{ $(document).ready(function () { var mrgH = 6; var mrgV = 6; $('#uiLayoutRoot').css({position:'absolute', top:10, bottom:10, left:10, right:10}); $('#uiLayoutEast').css({position:'absolute', width:0, 'margin-right':mrgH}); $('#uiLayoutWest').css({position:'absolute', left: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 Style (CSS) settings can either be applied also at this section listed above or in the specific style section: {{{ }}} See also the [FaqCustomizations FAQ about customizations]. == Alternative Layout Samples == A bunch of sample layouts is available via the SVN [http://svn.pmapper.net/trac/browser/pmapper/trunk/layout-samples here] or via the [http://sourceforge.net/projects/pmapper/files/ sourceforge repository]. You can also view the samples online [http://www.pmapper.net/demo.shtml here]