Xpages unitegallery位于同一页面时，Viewpager不工作

我想在同一页上使用viewPanel和unitegallery

当它们在同一页上时，viewPanel中的寻呼机似乎不再工作。 仅显示viewPanel中的第一页。 无法转到视图中的下一项

我的示例代码：

<?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:xp_1="http://www.ibm.com/xsp/coreex"
pageIcon="/Logo-6%2C17-x-6%2C17.png">



<xp:this.resources>
    <xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type='text/javascript'
    src='../../demo.nsf/unitegallery/js/unitegallery.min.js'>
</script>
<link rel='stylesheet'
    href='../../demo.nsf/unitegallery/css/unite-gallery.css'
    type='text/css' />
<script type='text/javascript'
    src='../../demo.nsf/unitegallery/themes/carousel/ug-theme-carousel.js'>
</script>
<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[
$(document).ready(
function() {
x$("#{id:gallery}").unitegallery({
gallery_theme: "carousel",
tile_width: 60,                     //tile width
tile_height: 60,                    //tile height
tile_enable_textpanel:true,
tile_textpanel_title_text_align: "left",
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:this.data>
    <xp:dominoView var="view4" viewName="country_extra_pictures"
        keys="VBD200">
    </xp:dominoView>
</xp:this.data>
<xp:br></xp:br> 
<div id="gallery" style="display:none;">
    <xp:repeat rows="100" var="pictureData" value="#{view4}" removeRepeat="true" id="additionalpictures">
            <xp:image url="#{javascript:pictureData.getColumnValue('ThPicture');}"
                    alt="#{javascript:pictureData.getColumnValue('title')}">
                <xp:this.attrs>
                    <xp:attr name="data-image"  value="#{javascript:pictureData.getColumnValue('BigPicture')}">
                </xp:attr>
                </xp:this.attrs>
            </xp:image>
    </xp:repeat>
</div>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:br></xp:br>
<xp:viewPanel rows="11" id="viewPanel12" var="rowData" target="_self">
    <xp:this.facets>
        <xp:pager partialRefresh="true"
                                    layout="Previous Separator Group Separator Next"
                                    xp:key="headerPager" id="pager1">
                                    <xp:this.rendered><![CDATA[#{javascript:getComponent("viewPanel12").getRowCount() > 10}]]></xp:this.rendered>
        </xp:pager>
    </xp:this.facets>
    <xp:this.data>
        <xp:dominoView var="view12" databaseName="product/spareparts.nsf" viewName="spareparts3"
                            keys="D200Current">
        </xp:dominoView>
    </xp:this.data>
    <xp:viewColumn id="viewColumn18" columnName="spareProductPart">
        <xp:this.facets>
            <xp:viewColumnHeader
                            xp:key="header" id="viewColumnHeader18" sortable="false"
                            value="Product part">
            </xp:viewColumnHeader>
        </xp:this.facets>
    </xp:viewColumn>
    <xp:viewColumn id="viewColumn29" columnName="spareAsFrom">
        <xp:this.facets>
            <xp:viewColumnHeader
                            xp:key="header" id="viewColumnHeader29" value="As from">
            </xp:viewColumnHeader>
        </xp:this.facets>
    </xp:viewColumn>
</xp:viewPanel>
</xp:view>

10}]]>

只是一个猜测，因为我不知道这个插件：这个插件似乎改变了视图控件的DOM，因此寻呼机无法再使用它了。这是几个插件的问题，它们显著地改变了原始DOM。您应该使用Chrome等调试工具检查DOM（并将其进行比较），以观察没有激活插件的DOM和有激活插件的DOM之间的差异。

正如Oliver所说，有些插件根本不能很好地与XPages配合使用。我也不知道具体的插件，但我遇到了一个问题，我想使用的这个非常酷的jQuery时间选择器导致页面的其他部分崩溃。在我的例子中，没有修复它，我不得不选择不同的方法。我注意到开箱即用控件（例如xp:按钮）也存在类似的问题