具有动态内容的 xpages 轮播

Question

是否可以从扩展库中为 xe:carousel 控件提供动态内容？

乍一看好像slide节点只能设置成静态的？

Answer 1

我最近将此作为 answer to someone who wanted a dynamic Dashboard control 发布，给他们一些想法

<xp:this.afterPageLoad><![CDATA[#{javascript:
    importPackage(com.ibm.xsp.theme.bootstrap.components.responsive);

    var photos = [["http://www.gstatic.com/webp/gallery/1.jpg","My Caption 1"]];
    photos.push(["http://www.gstatic.com/webp/gallery/2.jpg","My Caption 2"]);
    photos.push(["http://www.gstatic.com/webp/gallery/3.jpg","My Caption 3"]);
    photos.push(["http://www.gstatic.com/webp/gallery/4.jpg","My Caption 4"]);
    photos.push(["http://www.gstatic.com/webp/gallery/5.jpg","My Caption 5"]);

    var carousel:com.ibm.xsp.theme.bootstrap.components.responsive.UICarousel = getComponent("carousel1");

    for(var i = 0; i < photos.length; i++) {
        var data = photos[i];

        var slide:com.ibm.xsp.theme.bootstrap.components.responsive.SlideNode = new com.ibm.xsp.theme.bootstrap.components.responsive.SlideNode();
        slide.setBackgroundSrc(data[0]);
        slide.setCaptionText(data[1]);
        slide.setButtonLabel("Open This Image");
        slide.setButtonHref("/photo.xsp?photo=" + data[0]);
        carousel.addSlideNode(slide);
    }}]]>
</xp:this.afterPageLoad>

<xe:carousel id="carousel1" wrapped="true" pause="hover" slideInterval="2000">
</xe:carousel>

关键是首先要获得对 Carousel 控件底层组件 UICarousel 的引用。然后创建一些 SlideNode 组件，根据需要设置它们的配置选项，并将它们添加到 UICarousel 组件中。

具有动态内容的 xpages 轮播

xpages carousel with dynamic content

xpages

xpages-extlib