我可以在代码或页面中向 Html PanelGrid 添加圆角吗？如果是 - 如何？答案

【问题标题】：Can I add round cornres to HtmlPanelGrid in code or in page? If yes - how?我可以在代码或页面中向 Html PanelGrid 添加圆角吗？如果是 - 如何？
【发布时间】：2010-05-13 11:54:57
【问题描述】：

我有一个任务 - 向 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.Divs，每个都有一个 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？

【问题讨论】：

标签： jsf richfaces rounded-corners

【解决方案1】：

我认为jQuery 是一个不错的选择。（见链接教程）

使用 Richfaces 时会出现一些复杂情况，因此请查看 <rich:jQuery> 及其文档。

【讨论】：

【解决方案2】：

考虑为此使用 curvycorners。谷歌它以找出它的全部内容。

要考虑的另一件事是浏览器不兼容。例如，以下 css 将圆角应用于rich:modalPanel 组件在 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

供进一步参考。

【讨论】：

【解决方案3】：

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

再次感谢大家！

最好的问候！

P.S.：我怎样才能设置这个问题被回答？

【讨论】：