css - 有没有办法设置 xe :basicLeafNode? 需要将源图像设为矩形

Question

在 xPage 上制作矩形图像似乎很容易:

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

但不适用于 basicLeafNode。这是页面:

<?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>

最终它将是一个用户图标/图像。所以我想把它做成矩形。

Answer 1

您想将 class="img-circle" 分配给您的 basicLeafNode 图像。

您可以通过添加一个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>