Question

我有一个使用Bootstrap4Xpages project的XPage。

我想要有标签，并且不确定最好的方法，所以我使用引导代码手动完成，而不是内置的XPage选项卡控件，这在历史上一直没有＆＃34;缺少＆＃34;。我使用文档中的基本示例： http://bootstrapdocs.com/v3.1.1/docs/javascript/#tabs

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade in active" id="home">...</div>
  <div class="tab-pane fade" id="profile">...</div>
  <div class="tab-pane fade" id="messages">...</div>
  <div class="tab-pane fade" id="settings">...</div>
</div>

问题是当选项卡上方发生任何类型的部分刷新时，当前选项卡始终会移回第一个选项卡。因此，如果有人在中间选项卡中，请点击“编辑”＃34;按钮，它会移回第一个标签。

如何让Tabs坚持部分刷新？

谢谢！

Answer 1

删除＆＃34;有效＆＃34; li元素的类，仅在通过Javascript加载页面后设置它，例如

$(".nav-tabs:first-child").addClass("active")

OR

确保标签不在部分刷新区域

内

<强>更新

我摆弄了一下，找到了解决方案：看看这里定义的两个脚本块。底部的那个只声明并设置默认选项卡值。第二个放置在可刷新区域内，并在刷新后计算活动选项卡：

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

    <xc:_layoutBS3 navbarTopInverse="true"
        navbarBottomInverse="true" hideHelpArea="false" fullWidth="false">

        <xp:this.facets>
            <xp:div xp:key="facetMiddle" id="refresh">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs">
                    <li>
                        <a href="#home" data-toggle="tab">Home</a>
                    </li>
                    <li>
                        <a href="#profile" data-toggle="tab">Profile</a>
                    </li>
                    <li>
                        <a href="#messages" data-toggle="tab">Messages</a>
                    </li>
                    <li>
                        <a href="#settings" data-toggle="tab">
                            <xp:label value="#{javascript:@Now()}" id="label1">
                                <xp:this.converter>
                                    <xp:convertDateTime>
                                        <xp:this.pattern><![CDATA[${javascript:"dd.MM.yyyy hh:mm:ss"}]]></xp:this.pattern>
                                    </xp:convertDateTime>
                                </xp:this.converter>
                            </xp:label>
                        </a>
                    </li>
                </ul>
                <xp:scriptBlock id="scriptBlock2" type="text/javascript">
                    <xp:this.value><![CDATA[$(".nav-tabs a").on("click", function(){
        activeTab = $(this).attr("href");
}); 

if(activeTab){
    $(".nav-tabs a").each(function(){
        if($(this).attr("href") == activeTab){
            $(this).tab("show");
        }
    });
}]]></xp:this.value>
                </xp:scriptBlock>
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="home">...</div>
                    <div class="tab-pane fade" id="profile">...</div>
                    <div class="tab-pane fade" id="messages">...</div>
                    <div class="tab-pane fade" id="settings">...</div>
                </div>
                <br />
                <xp:link escape="true" text="Refresh" id="link1" styleClass="btn btn-default">
                    <xp:eventHandler event="onclick" submit="true"
                        refreshMode="partial" refreshId="refresh">
                    </xp:eventHandler>
                </xp:link>
            </xp:div>

            <xp:scriptBlock id="scriptBlock1" xp:key="facetHelp"
                type="text/javascript">
                <xp:this.value><![CDATA[var activeTab = "#home";]]></xp:this.value>
            </xp:scriptBlock>
        </xp:this.facets>
    </xc:_layoutBS3>
</xp:view>

显示时间戳的标签只是为了证明发生了部分刷新。需要注意的是：如果你想要淡入淡出效果，那么每次刷新后都会出现淡入淡出。建议你不要使用淡化效果。

现场演示：http://mardou.dyndns.org/bs3template.nsf/tabs.xsp

也可以在此处找到来源：https://github.com/zeromancer1972/Bootstrap-3-Template/blob/12a7f79cd53fe0923eb10986cfc7e581196379db/ODP/XPages/tabs.xsp

在XPage中进行部分刷新时，Bootstrap选项卡会重置

1 个答案: