Question

您好我正在使用http://layout.jquery-dev.net/的jquery布局插件。我的选择如下：

 <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'); } }的属性：

{{1}}

Answer 2

我还没有尝试过这个插件，但由于你的最后一行与通常的css非常相似，试试这个。

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

Answer 3

使用css重写。在头部分（通常是jquery.ui.layout.css）中包含css布局文件后，您可以添加一个重写原始样式的样式。

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

如何在JQuery Layout中删除边框？

3 个答案: