Question

In my native Notes development I have a button on which I have defined a icon from the resources. Then in the have an onclick event. Want to make this a bootstrap button with an onclick so I add a link action to it that performs the action. If I add text to the link that displays in the button then when I click on the text the action takes place but I just want the glyphicon and make it the clickable part of the button

<div class="btn btn-success btn-sm">
    <span class="glyphicon glyphicon-chevron-down"></span>
    <xp:link id="expandLink" >
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="partial" refreshId="thisValue">
            <xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
        </xp:eventHandler>
    </xp:link>
</div>

if I change it and add the text to the link it works but only if I click on the text:

<div class="btn btn-success btn-sm">
    <span class="glyphicon glyphicon-chevron-down"></span>
    <xp:link id="expandLink" text="Expand">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="partial" refreshId="thisValue">
            <xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
        </xp:eventHandler>
    </xp:link>
</div>

If I have to add the text then the icon is kind of unnecessary.

Is there a way to add a glyphicon to a link to make the icon clickable or ????

Answer 1

您可以将Glyphicon添加到xp：按钮。尝试这样的事情：

<xp:button value="Expand" id="button1" styleClass="btn btn-success btn-sm">
    <span class="glyphicon glyphicon-chevron-down"></span>
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="thisValue">
        <xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

Answer 2

There is an xp:span component, which should allow you to add an eventHandler to it. Maybe if you use that and an xp:text instead of an xp:link, it will achieve what you want.

How to make a glyphicon clickable on a button

2 个答案: