xpages - Unitegallery 不支持重复控制

标签 xpages repeat

我想使用 Unitegallery 轮播来显示一些 URL 位于 View 中的图片。我尝试了以下方法:

<xp:this.resources>  
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>

<script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>  
<link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' />
<script type='text/javascript' src='unitegallery/themes/carousel/ug-theme-carousel.js'></script>

<xp:this.data>
    <xp:dominoView var="view4" databaseName="pictures.nsf"
        viewName="pictures3" keys="demo">
    </xp:dominoView>
</xp:this.data>

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$("#{id:gallery}").unitegallery({
gallery_theme: "carousel",
tile_width: 60,                     //tile width
tile_height: 60,                    //tile height

});
}
);
]]></xp:this.value>
</xp:scriptBlock>

<xp:panel>
<div id="gallery" style="display:none;">
<xp:repeat id="repeat6" rows="30" var="pictureData" value="#{view4}">
                    <xp:text escape="false" id="computedField11">
                        <xp:this.value><![CDATA[#{javascript:var thisPicture= pictureData.getColumnValue("bigPicture");
dezeAfbeeldingen ="<img src='"+thisPicture+"'data-image='"+thisPicture+"'style='height: 60px;width: 60px;'></img>";
return dezeAfbeeldingen;}]]></xp:this.value>
                    </xp:text>
</xp:repeat>
  </div>
  </xp:panel>

结果:没有显示任何内容。 在 Google Chrome 控制台中，我收到错误:“未捕获错误:该项目不应该是图像类型”，并且位于右侧的unitegallery.min.js:4“

重复运行，找到图片，但不显示并给出此错误。

当我用“硬编码”图像引用替换重复时，一切似乎都有效......

编辑

thisPicture 实际上是图片的完整 url，例如: 服务器/product/picture.nsf/O/unid/$File/picturename.jpg

HTML 输出:

<!DOCTYPE html>
<html lang="nl">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/2Eabootstrap/xsptheme/xsp.css&amp;2Eabootstrap/bootstrap311/css/bootstrap.min.css&amp;@Da&amp;2Eabootstrap/xpages300.css.css">
<script type="text/javascript">var dojoConfig = {locale: 'nl-nl'};</script>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.9.4/dojo/dojo.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.nl-nl/@Iq.js"></script>
<script type="text/javascript">dojo.require("ibm.xsp.widget.layout.xspClientDojo")</script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/bootstrap/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/bootstrap/bootstrap311/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/bootstrap/xpages300.js"></script>
<link rel="stylesheet" type="text/css" href="/web/web.nsf/bootstrap.min.css">
<script type="text/javascript" src="/web/web.nsf/JQueryXSnippet"></script>
</head>
<body class="xsp tundra">
<form id="view:_id1" method="post" action="/web/web.nsf/test_unite_gallery2.xsp" enctype="multipart/form-data">
<script src="unitegallery/js/unitegallery.min.js" type="text/javascript"></script><link href="unitegallery/css/unite-gallery.css" rel="stylesheet" type="text/css"><script src="unitegallery/themes/carousel/ug-theme-carousel.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(
function() {
x$("gallery").unitegallery({
gallery_theme: "carousel",
tile_width: 60,                     //tile width
tile_height: 60,                    //tile height

});
}
);
</script>
<div id="gallery" style="display:none;"><div id="view:_id1:repeat6">
<span id="view:_id1:repeat6:0:computedField11"><img src='server/product/picture.nsf/O/unid/$File/picturename1.jpg'data-image='server/product/picture.nsf/O/unid/$File/picturename1.jpg'style='height: 60px;width: 60px;'></img>
</span>
<span id="view:_id1:repeat6:1:computedField11"><img src='server/product/picture.nsf/O/unid/$File/picturename2.jpg'data-image='server/product/picture.nsf/O/unid/$File/picturename2.jpg'style='height: 60px;width: 60px;'></img>
</span>

其他图片等

</div>
<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!e4h2ba0vbj!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1"></form>
</body>
</html>

编辑2

有关我在 chrome 控制台中收到的错误的更多详细信息: “未捕获错误:该项目不应是图像类型”，位于右侧的unitegallery.min.js:4“

当我点击箭头时，我会得到更多详细信息:

fillItemsArray @ unitegallery.min.js:4
runGallery @ unitegallery.min.js:4
UniteGalleryMain.run @ unitegallery.min.js:4
jQuery.fn.unitegallery @ unitegallery.min.js:9
(anonymous function) @ test_unite_gallery2.xsp:23
n.Callbacks.j @ jquery-1.11.0.min.js:2
n.Callbacks.k.fireWith @ jquery-1.11.0.min.js:2
n.extend.ready @ jquery-1.11.0.min.js:2
K @ jquery-1.11.0.min.js:2

在资源下，unitegallery.min.js 后面有一个红色的 1，并给出了相同的错误消息(该项目不应是图像类型)。

编辑3

当我查看由重复或硬编码图片引用生成的 html 的差异时，我发现 img 和 src 标签有一个双“(好)和​​一个 '(坏)。我怎样才能改变它？

最佳答案

这应该有效:

    <xp:scriptBlock id="scriptBlock2">
        <xp:this.value><![CDATA[
$(document).ready(
function() {
$("#gallery").unitegallery({
gallery_theme: "carousel",
tile_width: 60,                     //tile width
tile_height: 60,                    //tile height

});
}
);
]]></xp:this.value>
    </xp:scriptBlock>
    <xp:panel>
        <div id="gallery" style="display:none;">
            <xp:repeat rows="100" var="pictureData"  value="#{view4}" removeRepeat="true">
                <xp:image url="#{javascript:pictureData.getColumnValue("bigPicture")}">
                    <xp:this.attrs>
                        <xp:attr name="data-image" 
                            value="#{javascript:pictureData.getColumnValue("bigPicture")}">
                        </xp:attr>
                    </xp:this.attrs>
                </xp:image>
            </xp:repeat>
        </div>
    </xp:panel>

您收到错误“该项目不应是图像类型”，因为unitegallery 不喜欢 <div>和 <span>位于<div id="gallery"> ... </div>内。必须只有<img> s。

正如您在问题中所示，您渲染的 html 看起来像这样

<div id="gallery" style="display:none;">
    <div id="view:_id1:repeat6">
        <span id="view:_id1:repeat6:0:computedField11">
            <img src='server/product/.../picturename1.jpg' 
                 data-image='server/product/.../picturename1.jpg'>
            </img>
        </span>
        ...
    </div>
</div>

你可以用repeat的属性removeRepeat="true"来摆脱repeat-div .

您可以使用 <xp:image ... /> 来避免计算字段的跨度。将附加属性“data-image”设置为附加属性。

Unitegallery 不喜欢 id 中带有“:”的内容，就像它们由 XPage 渲染一样。这就是为什么嵌入 html <div id="gallery"定义 Unitegallery 旋转木马的位置。由于它已经是客户端 html，因此您可以直接在客户端代码中使用 $("#gallery"). 对其进行寻址。

上面的代码将嵌套重复的 gallery-div 渲染为

<div id="gallery" style="display:none;">
     <img src='server/product/.../picturename1.jpg' 
          data-image='server/product/.../picturename1.jpg'>
     </img>
     ...
</div>

这对于 Unitegallery 来说效果很好。

关于xpages - Unitegallery 不支持重复控制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30867811/

上一篇：parse-platform - 带存储的 Pubnub 聊天应用程序

下一篇：angularjs - Angular 1.3、必需、form.$invalid 和保存的密码

相关文章：

python - 创建新行并根据时间间隔重复这些值(如果它们属于)

java - 如果数字在列表中出现多次，如何生成错误

lotus-notes - 您会选择什么 - XPage 还是旧形式风格的开发？

javascript - xpages:计算字段中的 HTML 表

python - 如何在 python 列表中追加元素时检查元素？

ruby-on-rails - 用于重复事件的 gem ice_cube

xpages - 在 XPage 中，如何将一个 SSJS 库导入到另一个库中？

javascript - Xpages 不从网络服务获取文件

XPages:context.getUser().getRoles() 偶尔工作

matlab - matlab中如何重复元素矩阵

©2024 IT工具网  联系我们