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>

不幸的是，课程＆＃34; img-circle＆＃34;仅被分配到周围的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>

Answer 2

最好的办法是使用style属性来渲染叶节点。但是你可能想看一下＆＃34;另一端＆＃34;并在存储之前将上传的图像剪切为大小。在HTML中，更改图像大小不会改变图像及其加载时间。它也可能扭曲图像渲染。另一种方法是在样式中使用background-image，它根据容器大小显示图像的一部分

有没有办法设计xe：basicLeafNode？需要使源图像成矩形

2 个答案: