как убрать границы в JQuery Layout?

Question

Здравствуйте, я использую плагин макета jquery из http://layout.jquery -dev.net / .мои варианты следующие:

 <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>

Это удаляет ползунки, но: Как удалить границы панели?

спасибо, Арман.

Answer 1

Удалить одну границу:

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

Удалить все границы:

Поскольку вы должны быть совершенно уверены, что каждый pageLayout.pane будетиметь o в качестве свойства:

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

Как вы действительно должны это делать - проверяет, чтобы убедиться, что o является свойством pageLayout.pane, прежде чем пытаться получить к нему доступ:

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

Answer 2

Я еще не пробовал этот плагин, но так как ваша последняя строка во многом похожа на обычную CSS, попробуйте это.

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

Answer 3

Использование переписывания CSS. После включения файла макета css в раздел head (обычно jquery.ui.layout.css) вы можете добавить стиль, который переписывает оригинал.

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