我需要在 XPages 中的复选框旁边放置一个 link
I need to put a link next to a checkbox in XPages
我正在尝试使用 link 而不是复选框标签,因为我希望在单击复选框时勾选复选框,并在单击 link 时发生其他情况。
我尝试将 link 放在复选框之后和复选框内部,但复选框似乎被包裹在 div 中,导致它未对齐
这是我的代码
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:panel style="margin:20px">
<xp:checkBox id="checkBox2"></xp:checkBox>
<xp:link escape="true" text="Link2" id="link2"></xp:link>
<xp:checkBox id="checkBox1">
<xp:link escape="true" text="Link1" id="link1"></xp:link>
</xp:checkBox>
</xp:panel>
</xp:view>
这是结果 HTML
这是网页结果
有没有办法在我的复选框旁边添加一个 xp:link?
最好是为复选框使用自定义渲染器,因为省略了 DIV。这是一个很好的教程,用于与组合框一起使用的自定义渲染器:http://www.pipalia.co.uk/xpages-2/creating-custom-renderers-for-xpages-controls/
编辑
我做了一些东西:
创建一个像这样的 Java class:
package org.openntf.bstemplate.renderer;
import java.io.IOException;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.render.Renderer;
public class Checkbox extends Renderer {
@Override
public void encodeBegin(final FacesContext context, final UIComponent component) throws IOException {
ResponseWriter writer = context.getResponseWriter();
writer.startElement("input", null);
writer.writeAttribute("id", component.getClientId(context), null);
writer.writeAttribute("name", component.getClientId(context), null);
writer.writeAttribute("type", "checkbox", null);
}
@Override
public void encodeEnd(final FacesContext context, final UIComponent component) throws IOException {
ResponseWriter writer = context.getResponseWriter();
writer.endElement("input");
}
@Override
public void encodeChildren(final FacesContext context, final UIComponent component) throws IOException {
super.encodeChildren(context, component);
}
}
将此添加到您的面孔配置中:
<render-kit>
<renderer>
<component-family>javax.faces.Input</component-family>
<renderer-type>custom.checkbox</renderer-type>
<renderer-class>org.openntf.bstemplate.renderer.Checkbox
</renderer-class>
</renderer>
</render-kit>
在您的复选框中使用新的渲染器类型:
<xp:checkBox
text="Label"
id="checkBox1"
rendererType="custom.checkbox">
</xp:checkBox>
<xp:link
escape="true"
id="link1"
text="Click me!">
<xp:eventHandler
event="onclick"
submit="false">
<xp:this.script><![CDATA[dojo.byId("#{id:checkBox1}").click();]]></xp:this.script>
</xp:eventHandler>
</xp:link>
与其使用自定义渲染器,我认为使用 CSS 会更容易一些。因为这看起来只是对齐问题。例如你可以把内容放在一个table(丑陋的解决方案警报)
<table>
<tr>
<td><xp:checkBox id="yourCheckbox"/></td>
<td><xp:link text="Click me!" value="http://www.youclickedme.com"/></td>
</tr>
</table>
当然,如果您不想使用 table,您应该尝试使用 div。这里的问题显然是此复选框和 link 的容器太小,无法在一行中显示它们。
当然你可以涉足 CSS 来操纵 DIV 本身:
div.checkbox {
float:left;
margin-right: 10px;
}
我正在尝试使用 link 而不是复选框标签,因为我希望在单击复选框时勾选复选框,并在单击 link 时发生其他情况。
我尝试将 link 放在复选框之后和复选框内部,但复选框似乎被包裹在 div 中,导致它未对齐
这是我的代码
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:panel style="margin:20px">
<xp:checkBox id="checkBox2"></xp:checkBox>
<xp:link escape="true" text="Link2" id="link2"></xp:link>
<xp:checkBox id="checkBox1">
<xp:link escape="true" text="Link1" id="link1"></xp:link>
</xp:checkBox>
</xp:panel>
</xp:view>
这是结果 HTML
这是网页结果
有没有办法在我的复选框旁边添加一个 xp:link?
最好是为复选框使用自定义渲染器,因为省略了 DIV。这是一个很好的教程,用于与组合框一起使用的自定义渲染器:http://www.pipalia.co.uk/xpages-2/creating-custom-renderers-for-xpages-controls/
编辑
我做了一些东西: 创建一个像这样的 Java class:
package org.openntf.bstemplate.renderer;
import java.io.IOException;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.render.Renderer;
public class Checkbox extends Renderer {
@Override
public void encodeBegin(final FacesContext context, final UIComponent component) throws IOException {
ResponseWriter writer = context.getResponseWriter();
writer.startElement("input", null);
writer.writeAttribute("id", component.getClientId(context), null);
writer.writeAttribute("name", component.getClientId(context), null);
writer.writeAttribute("type", "checkbox", null);
}
@Override
public void encodeEnd(final FacesContext context, final UIComponent component) throws IOException {
ResponseWriter writer = context.getResponseWriter();
writer.endElement("input");
}
@Override
public void encodeChildren(final FacesContext context, final UIComponent component) throws IOException {
super.encodeChildren(context, component);
}
}
将此添加到您的面孔配置中:
<render-kit>
<renderer>
<component-family>javax.faces.Input</component-family>
<renderer-type>custom.checkbox</renderer-type>
<renderer-class>org.openntf.bstemplate.renderer.Checkbox
</renderer-class>
</renderer>
</render-kit>
在您的复选框中使用新的渲染器类型:
<xp:checkBox
text="Label"
id="checkBox1"
rendererType="custom.checkbox">
</xp:checkBox>
<xp:link
escape="true"
id="link1"
text="Click me!">
<xp:eventHandler
event="onclick"
submit="false">
<xp:this.script><![CDATA[dojo.byId("#{id:checkBox1}").click();]]></xp:this.script>
</xp:eventHandler>
</xp:link>
与其使用自定义渲染器,我认为使用 CSS 会更容易一些。因为这看起来只是对齐问题。例如你可以把内容放在一个table(丑陋的解决方案警报)
<table>
<tr>
<td><xp:checkBox id="yourCheckbox"/></td>
<td><xp:link text="Click me!" value="http://www.youclickedme.com"/></td>
</tr>
</table>
当然,如果您不想使用 table,您应该尝试使用 div。这里的问题显然是此复选框和 link 的容器太小,无法在一行中显示它们。
当然你可以涉足 CSS 来操纵 DIV 本身:
div.checkbox {
float:left;
margin-right: 10px;
}