how to remove the borders in JQuery Layout?

Hello I am using jquery layout plugin from http://layout.jquery-dev.net/ . my options a开发者_如何学Pythonre following:

 <script>
$(document).ready(function(){
 // create page layout
 pageLayout = $('body').layout(
   {applyDemoStyles:   true,
    spacing_open:0,
    spacing_closed: 0,
    slidable:  false,
    togglerLength_closed:  0

    });
 pageLayout.panes.north.css('backgroundColor','#A6f');

 // we need to remove the borders as well....

});
</script>

This removes sliders but: How to remove the pane borders as well?

thanks Arman.

Remove one border:

pageLayout.panes.north.css('border','none');

Remove all borders:

As you should be quite sure that each pageLayout.pane will have o as a property:

for(property in pageLayout.panes){
     pageLayout.panes[property].css('border', 'none');
}

How you should really do it - checks to make sure o is a property of pageLayout.pane before attempting to access it:

for(property in pageLayout.panes){
     if(pageLayout.panes.hasOwnProperty(property)){
          pageLayout.panes[property].css('border', 'none');
     }
}

I haven't tried this plugin yet but since your last line is pretty much like the usual css try this.

pageLayout.panes.north.css({'backgroundColor' : '#A6f', 'border' : 'none'});

Using a css rewriting. After including the css layout file in the head section (usually jquery.ui.layout.css) you could add a style that rewrites the original.

<style>
    .ui-layout-pane { 
            background: #FFF;
            border: 0 none; //This rewrites the original style
            padding: 10px;
            overflow: auto;
        }
</style>