1

Domino バージョン 9.x デプロイメントのアプリケーションには、Netflix などが連続スクロールを可能にするために使用するものと同様のカルーセルのようなインターフェースが必要です。ここから jQuery jCarousel コードが動作するようになりました。しかし、スワイプ機能が利用できないため、ユーザーが望むピザズが不足しています. また、カルーセル コード内に XPages コントロールを散在させる代わりに、100% 計算された HTML を使用しました。

そのため、 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 カルーセルは 1.7 から存在し、Notes 8.5.3 には 1.6 が付属しているため (Notes9 の Dojo バージョンはわかりません)、Dojo を更新するか、アプリケーションに新しい Dojo ライブラリを実装する必要があります。

私はそれに短い実験を行いました.dojoのビルドを無効にしxsp.client.script.libraries=none、xsp.propertiesdojo 1.9をアプリケーションのWEB-INF/dojo/...の下にインポートしてから、dojoをxPageにClientSideスクリプトリソースとして追加しました。これを完了するとすぐに、道場のホームページからのプログラムの例は、大きなエラーなしですぐに機能しました (画像ソースを変更するのを忘れました =) ..)。

に追加xsp.client.script.libraries=noneするときの問題xsp.propertiesは、XSP も無効にすることです。新しい dojo バージョンを使用して再構築する必要があるライブラリおよびその他の xPage 機能。

私は本当に jquery よりも dojo を使用することを好みますが、この場合、dojo を更新したくない場合は、jqueryライブラリにとどまるか、他の解決策を探すことをお勧めします。

于 2013-09-13T08:57:08.443 に答える