有没有人在 XPages 中成功实现了 dojox.mobile.carousel

Question

我需要在 Domino 版本 9.x 部署中使用类似于 Netflix 和其他人用来允许连续滚动的轮播界面的应用程序。我从here 得到了 jQuery jCarousel 代码。但这缺乏用户想要的魅力，因为滑动功能不可用。我还使用了 100% 计算的 HTML，而不是能够在轮播代码中散布 XPages 控件。

所以我找到了dojox/mobile/carousel（示例here），但包括基本示例在内的所有实现都无法正常工作。元素的数量似乎并不灵活，它们的位置比我认为的要低得多。我摆弄了 CSS 以查看是否可以修复问题，但没有找到正确的组合。

这是我用于此测试的整个自定义控件（我从演示中捕获了图像并将它们添加为图像资源）：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    dojoParseOnLoad="true">
    <xp:this.resources>
        <xp:metaData
            name="viewport"
            content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
        </xp:metaData>
        <xp:metaData
            name="apple-mobile-web-app-capable"
            content="yes">
        </xp:metaData>
        <xp:styleSheet
            href="/.ibmxspres/dojoroot/dojox/mobile/themes/iphone/iphone.css">
        </xp:styleSheet>
        <xp:dojoModule
            name="dojox/mobile"></xp:dojoModule>
        <xp:dojoModule
            name="dojox/mobile/parser"></xp:dojoModule>
        <xp:dojoModule
            name="dojox/mobile/Carousel"></xp:dojoModule>
    </xp:this.resources>
    <xp:panel>Above it</xp:panel>
    <div
        id="carousel1"
        data-dojo-type="dojox/mobile/Carousel"
        data-dojo-props='height:"150px", navButton:false, numVisible:2, title:"Category"'>
        <!-- View #1 -->
        <div
            data-dojo-type="dojox/mobile/SwapView">
            <div
                data-dojo-type="dojox/mobile/CarouselItem"
                data-dojo-props='src:"dish1.jpg", value:"dish", headerText:"dish"'></div>
            <div
                data-dojo-type="dojox/mobile/CarouselItem"
                data-dojo-props='src:"glass1.jpg", value:"glass", headerText:"glass"'></div>
        </div>
        <!-- View #2 -->
        <div
            data-dojo-type="dojox/mobile/SwapView">
            <div
                data-dojo-type="dojox/mobile/CarouselItem"
                data-dojo-props='src:"stone1.jpg", value:"stone", headerText:"stone"'></div>
            <div
                data-dojo-type="dojox/mobile/CarouselItem"
                data-dojo-props='src:"shell1.jpg", value:"shell", headerText:"shell"'></div>
        </div>
    </div>
    <xp:panel>Below it</xp:panel>
</xp:view>

在文档的示例中，它有此注释，然后包含一个 JavaScript 文件。

<!-- Need to load the theme files for Carousel and PageIndicator as well as the base theme file -->
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"
        data-dojo-config="mblThemeFiles: ['base','Carousel','PageIndicator']"></script>

没有完成这一步可能是我的问题，但我看不到如何在 XPages 环境中完成。

Answer 1

dojo carousel 从 1.7 开始就存在 Notes 8.5.3 附带 1.6（我不知道 Notes9 的 dojo 版本），因此您可能必须更新您的 dojo 或在您的应用程序中实现更新的 dojo 库。

我对它做了一个简短的实验，我禁用了 dojo 中的构建，将 xsp.client.script.libraries=none 添加到我的 xsp.properties 并在我的应用程序中的 WEB-INF/dojo/... 下导入了 dojo 1.9，然后将 dojo 添加到我的xPage 作为客户端脚本资源。我一完成这个，来自dojo 主页的程序示例立即工作，没有更大的错误（忘记更改图像源 =）..）。

将xsp.client.script.libraries=none 添加到您的xsp.properties 时的问题是您还禁用了XSP。库和其他一些 xPage 功能，您必须使用较新的 dojo 版本进行重建。

我真的更喜欢使用 dojo 而不是 jquery，但在这种情况下，如果你不想更新你的 dojo，我建议你可以留在 jquery Library 进行此操作或寻找其他解决方案。