1

サイトの例に従うだけで、XPages で Twitter Bootstrap モーダルを機能させるのは非常に簡単です。ただし、表示される前に SSJS を使用してモーダルの内容に影響を与えたい場合は機能しないようです。点滅しているように見え、背景だけが表示されることがよくあります。

XPages の完全更新または部分更新の使用に問題があるようです。

私はそれを「正常に」動作させようとしましたが、jQuery とリモート サービスを使用して変更を加えようとしましたが、うまくいきませんでした。

以下は、リモート サービスのコードです。

ダイアログを表示する前にモーダル コンテンツに影響を与えたり、更新したりする方法の例を教えてください。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xc:layout_Header></xc:layout_Header>
<xp:link escape="true" text="Link" id="link1" value="#myModal">
    <xp:this.attrs>
        <xp:attr name="role" value="button"></xp:attr>
        <xp:attr name="data-toggle" value="modal"></xp:attr>
    </xp:this.attrs>

</xp:link>
<xp:br></xp:br>

<xp:panel id="myPanel">
    <xc:bs_Modal idName="myModal">
        <xp:this.facets>
            <xp:panel xp:key="facet_1">
                My Dialog
                <xp:br></xp:br>
                <xp:br></xp:br>
                Time



                <xp:text escape="true" id="computedField1"
                    value="#{viewScope.vsTime}">
                    <xp:this.converter>
                        <xp:convertDateTime type="both"></xp:convertDateTime>
                    </xp:this.converter>
                </xp:text>
            </xp:panel>
        </xp:this.facets>
    </xc:bs_Modal>
</xp:panel>
<xp:br></xp:br>


<xe:jsonRpcService id="jsonRpcService1" serviceName="testService">
    <xe:this.methods>
        <xe:remoteMethod name="setTime">
            <xe:this.script><![CDATA[viewScope.put("vsTime", @Now())]]></xe:this.script>
        </xe:remoteMethod>
    </xe:this.methods></xe:jsonRpcService>
<xp:br></xp:br>
<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[$('#myModal').on('show', function () {
testService.setTime();
var id =  "#{id:myPanel}"
XSP.partialRefreshGet(id)
})]]></xp:this.value>
</xp:scriptBlock></xp:view>
4

3 に答える 3

0

すでに XPages と完全に統合されているため、<xe:dialog>代わりに拡張ライブラリの を使用し、それを変更 (クラスの追加/削除) して Bootstrap モーダルのように見せます。

開始するためのサンプル コードを次に示します。

<xe:dialog id="dialog1" title="Dialog title" styleClass="modal" style="margin-left: inherit">

    <xe:this.onShow>
        <![CDATA[//make the dialog look like a Bootstrap dialog using some jQuery magic

    //add the modal-header class to the title bar
    var titleBar = $(".modal .dijitDialogTitleBar").addClass("modal-header");

//replace title node (by default it's a span)
var titleNode = $(".dijitDialogTitle", titleBar);
var title = titleNode.text();
titleNode.remove();

//add a class to the close icon
$(".dijitDialogCloseIcon", titleBar).removeClass("dijitDialogCloseIcon").addClass("close");

//add a new h3 node with the title 
titleBar.append("<h3>" + title + "</h3>");
        ]]>
    </xe:this.onShow>

    <xe:dialogContent id="dialogContent1" styleClass="modal-body">
        dialog content here
    </xe:dialogContent>

    <xe:dialogButtonBar id="dialogButtonBar1" styleClass="modal-footer">
        <xp:button value="Close" id="button2"></xp:button>
    </xe:dialogButtonBar>

</xe:dialog>
于 2013-05-14T12:36:48.880 に答える
0

モーダルをトリガーする前にモーダル コンテンツを利用できるようにします。モーダル ダイアログを表示した後に何かが発生した場合は、コールバック関数オプションを使用できます。

var id =  "#{id:myPanel}"
XSP.partialRefreshGet(id,{
    onComplete: function(){
    $('#myModal').modal('show');
    }
});
于 2013-05-14T17:16:51.013 に答える
0

この問題を複雑に解決します。保存に関する問題の後、部分的な更新後に NotesXspDocument が存在します。

それは私にとってはうまくいきます、多分それはあなたにとって助けになります。

1) Dialog のテンプレート html を WebContent フォルダーに作成します (WebContent/templates/CustomDialog.html の例)。

<div class="modal fade" tabindex="-1" waiRole="dialog" waiState="labelledby-${id}_title" data-backdrop="static" data-keyboard="false">
    <div role="document" class="modal-dialog">
        <div class="modal-content">
            <div dojoAttachPoint="titleBar" class="modal-header">
                <span dojoAttachPoint="closeButtonNode">
                    <button type="button" title="${buttonCancel}" class="close" aria-hidden="true" dojoAttachEvent="onclick: onCancel">&times;</button>
                </span>
                <h4 class='modal-title' dojoAttachPoint="titleNode" id="${id}_title"></h4>
            </div>
            <div dojoAttachPoint="containerNode"></div>
        </div>
    </div>
</div>

2) コードで csjs ライブラリを作成します。

dojo.provide("extlib.responsive.dijit.xsp.bootstrap.Dialog");
dojo.require("extlib.dijit.Dialog");
dojo.declare(
        "extlib.responsive.dijit.xsp.bootstrap.Dialog",
        extlib.dijit.Dialog,
        {
            baseClass: "",
            templateString: dojo.cache(new dojo._Url("templates/CustomDialog.html")),
            draggable: false,
            autofocus:false,
            iframePost: false,
            modalStyleClass: "",
            show: function() {
            if(this.open){
                return;
            }

            if(!this._started){
                this.startup();
            }

            // first time we show the dialog, there's some initialization stuff to do
            if(!this._alreadyInitialized){
                this._setup();
                this._alreadyInitialized = true;
            }

            // Recenter Dialog if user scrolls browser.  Connecting to document doesn't work on IE, need to use window.
            var win = dojo.window.get(this.ownerDocument);
            //this._modalconnects.push(dojo.on(win, "scroll", dojo.hitch(this, "resize")));
            this._modalconnects.push(dojo.on(this.domNode, "keydown", dojo.hitch(this, "_onKey")));

            dojo.style(this.domNode, {
                display: "",
                position: "",
                top: "",
                left: ""
            });

            this._set("open", true);
            this._onShow(); // lazy load trigger
            this._size();
            this._position();

            var node = $(this.domNode);
            if(this.modalStyleClass) node.children(".modal-dialog").addClass(this.modalStyleClass);
            node.modal('show').on('shown.bs.modal', dojo.hitch(this, function() {
                if(this.autofocus) this.focus();
            }));
            if(this.iframePost) {
                this.xhrPost = dojo.xhrPost;
                dojo.xhrPost = function(o) {
                    dojo.require("dojo.io.iframe");
                    o.handleAs = "html";
                    var load = o.load; 
                    o.load = function(response, ioArgs) {
                        load(response.body.innerHTML, ioArgs);
                    }
                    dojo.io.iframe.send(o)
                }       
            }
        },
        hide: function() {
            if(this.iframePost) {
                dojo.xhrPost = this.xhrPost;
            }

            if(!this._alreadyInitialized || !this.open){
                return;
            }

            if(this._scrollConnected){
                this._scrollConnected = false;
            }
            var h;
            while(h = this._modalconnects.pop()){
                h.remove();
            }

            if(this._relativePosition){
                delete this._relativePosition;
            }
            this._set("open", false);

            return $(this.domNode).modal('hide');
        },
        resize: function() {},
        _size: function() {},
        _position: function() {},
        destroy: function() {
            var h;
            while(h = this._modalconnects.pop()){
                h.remove();
            }
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
            this.inherited(arguments);}
        }
        }
);

XSP._dialog_type = "extlib.responsive.dijit.xsp.bootstrap.Dialog";

(拡張ライブラリから取得したコードの大部分)

これで、dijit ウィジェットによるブートストラップ ダイアログができました。これはXSP.openDialogおよびXSP.closeDialogによって呼び出され、SSJS コードで動作します

注: modal-lgまたはmodal-smダイアログが必要な場合は、 <xe:dialog>dojo 属性 modalStyleClass (ステップ 2 を参照) に値modal-lgを追加します。

于 2016-03-09T11:29:26.970 に答える