Могу ли я добавить круглые поля в HtmlPanelGrid в коде или на странице? Если да - как? - PullRequest
Новая
       13

Могу ли я добавить круглые поля в HtmlPanelGrid в коде или на странице? Если да - как?

0 голосов
/ 13 мая 2010

У меня есть задача - добавить закругленные углы в 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"/>

Если кто-нибудь знает, как я могу добавить углы в панель Grid.

Извините за глупый вопрос, но я новичок в 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, но проблема в том, что я могу настроить только один styleClass для Div, но мне нужно стилизовать Div в нижнем колонтитуле и в заголовке с разными стилями.

Может, у кого-то есть такая же задача? и мог бы помочь мне! Как я могу установить разные стили в myfaces.Div (одно изображение - в голове, а другое - в ноге)? Или, может быть, есть лучший способ работы с Div?

Ответы [ 3 ]

0 голосов
/ 13 мая 2010

Я думаю, jQuery - хороший путь. (см. связанный учебник)

Существуют некоторые сложности при использовании с richfaces, поэтому проверьте <rich:jQuery> и его документацию.

0 голосов
/ 17 мая 2010

Спасибо всем за помощь! Я выясняю свою проблему - я добавляю несколько HtmlPanelGroups в свой код и добавляю свою таблицу в одну из них Все работает как я хочу!

Еще раз спасибо всем!

С наилучшими пожеланиями!

П.С .: Как мне задать этот вопрос?

0 голосов
/ 13 мая 2010

Рассмотрите возможность использования curvycorners для этого. Google, чтобы узнать, что это такое.

Еще одна вещь, которую следует учитывать, - несовместимость браузера. Например, следующий 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

для дальнейшего использования.

...