1

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

所以我找到了dojox/mobile/carousel（这里的例子）但是所有的实现，包括基本的例子都不能很好地工作。元素的数量似乎并不灵活，它们的位置比我认为的要低得多。我摆弄了 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 环境中执行此操作。

4

1 回答 1

0

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

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

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

我真的更喜欢使用 dojo 而不是 jquery，但在这种情况下，如果你不想更新你的 dojo，我建议你留在 jquery库中或寻找其他解决方案。

于 2013-09-13T08:57:08.443 回答