当unitegallery在同一页上时Viewpager不工作

Question

我想在同一页上使用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>

Answer 1

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