我可以在代码或页面中向 HtmlPanelGrid 添加圆角吗？如果是的话 - 怎么办？

Question

我有一个任务 - 向 HtmlPanelGrid 添加圆角。现在我尝试用 css 来实现（每个角使用 4 个图像 - css 创建我们的设计器）。我加载 css 并尝试在我的代码中执行此操作：

this.grid = new HtmlPanelGrid();
this.grid.setStyleClass("toplist,toplist-top");

但我在页面中看不到任何更改。

我尝试加载 css 并将其与标签一起使用，但它也不起作用并产生了另一个问题 - 我的 jsf 没有重新加载和重新显示：

<div class="toplist">
<div class="toplist-top"><h2>Top 10 List</h2></div>
<div class="toplist-bg">
    <div class="toplist-cont">
    <rich:tab label="Top-List" id="screenTop">
    <h:panelGrid id="topListTable" binding="#{chartBean.topListTable}" />
    </rich:tab>

    <a4j:support event="onclick" reRender="menuSection" actionListener="#{chartBean.doChangeTab}" />
     </div>
</div>
<div class="toplist-bottom"></div>
    </div>

我对在代码中向 topListTable 添加圆角感兴趣。我该怎么做呢？

我将我的 css 加载为：

 <link href="#{facesContext.externalContext.requestContextPath}/css/stylesheet.css" rel="styleSheet" type="text/css"/>  

如果有人知道，我如何向 panelGrid 添加角点。

抱歉问了愚蠢的问题，但我是 jsf 和 richfaces 的新生，我想正确解决这个任务

更新：

任务已更改（（（设计师决定，圆角将用图像完成，并给我 css 文件与选择器，他认为，与我的 HtmlPanelGrid 周围的组件一起使用，

但有一个问题 - HtmlPanelGrid 是 myfaces.Div 的子级，所以我有几个 myfaces.Div，每个都有一个 HtmlPanelGrid 作为其子级。 Div 和 HtmlPanelGrid 都是在代码中生成的：

public TopListChartWrapper(Iterator<Entry> treeIt) {
    this.grid = new HtmlPanelGrid();
    this.grid.setColumns(2);
    this.grid.setBorder(0);
    this.grid.setCellpadding("0");
    this.grid.setCellspacing("0");
    this.grid.setWidth("100%");
    this.grid.setRowClasses("list-row-even,list-row-odd"); 
        
    this.grid.setStyleClass("toplist-top"); 
    this.grid.setStyle("margin: 50px");
    //this.grid.setFooterClass("toplist-top");
    
    this.treeIterator = treeIt;
    this.prepareGrid();
}

private Div getDiv() {
    Div div = new Div();
    div.setId(DIV + RANDOM.nextInt(10000));
    HtmlDropSupport dropSupport = new HtmlDropSupport();
    ChartBean chartBean = ChartBean.getInstance();
    dropSupport.setAcceptedTypes(UNIT + chartBean.getChartValue());
    dropSupport.setDropValue(UNIT + chartBean.getChartValue());
    dropSupport.addDropListener(new DropListenerImpl());
    dropSupport.setReRender(this.getName());
    div.getChildren().add(dropSupport);
    div.setStyleClass(this.getDivStyle());

    return div;
}

所以我需要为它们设置一个 styleClasses，但问题在于 - 我只能为 Div 设置一个 styleClass，但我需要在页脚和页眉中使用不同的样式设置 Div 的样式也许

有人有同样的任务？并且可以帮助我！如何在 myfaces.Div 中设置差异样式（一个图像 - 头部和脚部）？ 或者也许有更好的方法来使用 Div？

Answer 1

我认为 jQuery 是一个很好的方法。 （请参阅链接教程）

与 richfaces 一起使用时会出现一些复杂情况，因此请检查 及其文档。

Answer 2

为此考虑使用弯曲的角。谷歌一下就可以知道它的全部内容。

另一件需要考虑的事情是浏览器不兼容。例如，以下将圆角应用于 rich:modalPanel 组件的 css 在 Safari 中完美运行，但在 IE 中则不然。

.rich-mpnl-header{
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}

.rich-mpnl-body{
background-color: #3C3C3C;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
}



.rich-mpnl-shadow{
-moz-border-radius: 5px;

}

<rich:modalPanel id="mpt" shadowDepth="10" keepVisualState="true" 
   showWhenRendered="true" moveable="true" style="-moz-border-radius: 5px;">

您可以考虑在圆角中使用图像来避免这种不兼容。

请参阅

http://www.webdevelopersnotes.com/tips/html/complex_advanced_rounded_corners_html_tables.php3

供进一步参考。

Answer 3

感谢大家的帮助！我找出了我的问题 - 我在代码中添加了几个 HtmlPanelGroups，并将我的表添加到其中之一！一切都如我所愿！

再次感谢大家！

此致！

PS：如何设置这个问题的答案？