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>

没有完成这一步可能是我的问题，但我无法在XPage环境中看到如何做到这一点。

Answer 1

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到我的xPage作为ClientSide脚本资源。一旦我完成了这个，dojo主页上的程序示例立即工作，出现了更大的错误（忘了更改图像来源=）..）。

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

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

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

1 个答案: