Есть ли способ стилизовать xe:basicLeafNode? Нужно сделать исходное изображение прямоугольным

Кажется, легко сделать изображение прямоугольным на вашем xPage:

<img class="img-circle" src="http://i.forbesimg.com/media/lists/people/brad-pitt_416x416.jpg">

но не для базового узла. Вот эта страница:

<?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xe:navbar id="navbarTop" pageWidth="fixed" fixed="fixed-top" inverted="false">
        <xe:this.navbarAfterLinks>
            <xe:basicLeafNode imageHeight="50" imageWidth="50"
                style="cursor:default;"
                image="http://i.forbesimg.com/media/lists/people/brad-pitt_416x416.jpg">
            </xe:basicLeafNode>
        </xe:this.navbarAfterLinks>
    </xe:navbar>
</xp:view>

В конце концов это будет иконка / изображение пользователя. Поэтому я хочу сделать его прямоугольным.

Источник

2 ответа

Решение

Вы хотите назначить class="img-circle" к вашему основному изображению LeafNode.

Вы бы сделали это, добавив styleClass имущество

        <xe:basicLeafNode imageHeight="50" imageWidth="50"
            style="cursor:default;"
            styleClass="img-circle"
            image="http://i.forbesimg.com/media/lists/people/brad-pitt_416x416.jpg">
        </xe:basicLeafNode>

К сожалению, класс "img-circle" присваивается окружающим a только тег и не влияет на изображение:

введите описание изображения здесь

Чтобы это исправить, добавьте следующий код JavaScript на стороне клиента в ваш XPage. Добавляет class="img-circle" к тегу изображения тоже:

    <xp:eventHandler
        event="onClientLoad"
        submit="false">
        <xp:this.script><![CDATA[
            dojo.query(".img-circle").forEach(function(node){
                node.childNodes[0].className = "img-circle";
            });
        ]]></xp:this.script>
    </xp:eventHandler>
</xp:view>

введите описание изображения здесь

Полный XPage выглядит следующим образом:

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xe:navbar id="navbar1" pageWidth="fixed" fixed="fixed-top" inverted="false">
        <xe:this.navbarAfterLinks>
            <xe:basicLeafNode imageHeight="50" imageWidth="50"
                style="cursor:default;"
                styleClass="img-circle"
                image="http://i.forbesimg.com/media/lists/people/brad-pitt_416x416.jpg">
            </xe:basicLeafNode>
        </xe:this.navbarAfterLinks>
    </xe:navbar>
    <xp:eventHandler
        event="onClientLoad"
        submit="false">
        <xp:this.script><![CDATA[
            dojo.query(".img-circle").forEach(function(node){
                node.childNodes[0].className = "img-circle";
            });
        ]]></xp:this.script>
    </xp:eventHandler>
</xp:view>
Источник

Лучше всего использовать style свойство для визуализации конечного узла. Однако вы можете захотеть взглянуть на "другой конец" и обрезать загруженное изображение до размера, прежде чем сохранить его. В HTML изменение размера изображения не приводит к изменению изображения и времени его загрузки. Это также может исказить рендеринг изображения. Другой подход будет использовать background-image в стиле, который показывает только часть изображения в зависимости от размера контейнера

Источник
Другие вопросы по тегам