Question

尝试在Xpages中制作更好看的按钮。我使用css按钮生成器创建了一个按钮，它看起来不错，但不是很好。

上按钮的外观

我想将它用于标签。当用户选择一个按钮时，我想突出显示该一个按钮以及所有其他按钮被突出显示。

我相信Oliver正在使用bootstrap，我想这样做，但我认为我现在不能导入整个框架。

这是我的Xpages代码和我的css：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:this.resources>
        <xp:styleSheet href="/buttons.css"></xp:styleSheet>
        <xp:script src="/xpUtilities.jss" clientSide="false"></xp:script>
    </xp:this.resources>
    <xp:this.beforePageLoad><![CDATA[#{javascript:var arr = @Unique(@Trim(@DbColumn(@DbName(),"page001",3)));
    if (arr.length > 1) {arr.sort();}
viewScope.put("tags",arr);}]]></xp:this.beforePageLoad>

    <xp:panel style="padding-bottom:5.0px;padding-top:5.0px">
        <xp:label value="Filter By..." id="label1"></xp:label>
    </xp:panel>
    <xp:panel>
        <xp:repeat id="repeat1" rows="30" var="rowData" indexVar="index"
            value="#{tags}">
            <xp:button value="#{javascript:rowData}" id="button1"
                styleClass="button">
            </xp:button>
            &#160;&#160;&#160;
        </xp:repeat>
    </xp:panel>
</xp:view>

CSS

.button {
   border-top: 1px solid #999999;
   background: #999999;
   background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#999999));
   background: -webkit-linear-gradient(top, #999999, #999999);
   background: -moz-linear-gradient(top, #999999, #999999);
   background: -ms-linear-gradient(top, #999999, #999999);
   background: -o-linear-gradient(top, #999999, #999999);
   padding: 3.5px 7px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 10px !important;
   font-family: Helvetica, Arial, Sans-Serif;
   font-weight: bolder;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

Answer 1

如果您不想包含原始Bootstrap框架，请复制要复制的元素的CSS设置。

在这种情况下，用鼠标右键单击Oliver的一个按钮，然后选择＆＃34; Inspect element＆＃34;。然后查看正确的css样式窗口并将相关部分复制到css文件中。

设置其他样式类＆＃34;按钮激活＆＃34;最后选择的标签。如果部分刷新，则在viewScope变量的帮助下添加此类;如果在单击事件上重定向到另一个XPage，则添加sessionScope变量。

您的示例将更改为：

<xp:panel>
    <xp:repeat id="repeat1" rows="100" var="rowData"
        value="#{tags}">
        <xp:button value="#{javascript:rowData}" id="button1"
            styleClass="#{javascript: 'button' + 
                                      (viewScope.tag == rowData ? ' button-active' : '')}">
            <xp:eventHandler
                event="onclick" submit="true"
                refreshMode="partial" refreshId="repeat1">
                <xp:this.action><![CDATA[#{javascript:
                    viewScope.tag = rowData;
                    // your action here
                }]]></xp:this.action>
            </xp:eventHandler>
        </xp:button>
        &#160;&#160;&#160;
    </xp:repeat>
</xp:panel>

的CSS：

.button {
    padding-left: 9px;
    padding-right: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    display: inline-block;
    padding: 2px 8px;
    font: bold 12px Arial, Helvetica, sans-serif;
    line-height: 14px;
    color: #ffffff;
    vertical-align: baseline;
    white-space: nowrap;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #999999;
    border:0;
}

.button:hover {
    border-top-color: #28597a;
    background: #28597a;
    color: #ccc;
}

.button:active, .button-active {
    border-top-color: #1b435e;
    background: #1b435e;
}

Answer 2

是的，我正在使用Bootstrap，这些标签是导致这种设计的“徽章”。但我的链接是链接而不是按钮。因此，您希望按值突出显示所选标记。只需根据您在单击链接时设置的范围变量更改链接的类名。您可以从我的Github仓库下载OSnippets模板以获得一个想法或只是玩它：https://github.com/zeromancer1972/OSnippets

Answer 3

您要找的是来自bootstrap的徽章。

如果您查看Oliver Busse's page的代码，可以看到<span class="badge">XSP</span>（引导程序2），它确认了我说的内容。

更好（看）Xpages按钮

3 个答案: