1

只需遵循站点中的示例，就可以很容易地在 XPages 中使用 Twitter Bootstrap 模式。但是，如果您想在模态框显示之前使用 SSJS 影响模态框的内容，它似乎不起作用。它似乎在闪烁，并且通常只是显示背景。

使用 XPages Full 或 Partial refresh 似乎是个问题。

我已经尝试让它“正常”工作，并且我尝试使用 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

在触发模态之前使模态内容可用，以防在显示模态对话框后发生事情我们可以使用回调函数选项。

var id =  "#{id:myPanel}"
XSP.partialRefreshGet(id,{
    onComplete: function(){
    $('#myModal').modal('show');
    }
});
于 2013-05-14T17:16:51.013 回答
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

我用复杂的方法解决了这个问题。部分刷新后保存存在 NotesXspDocument 的问题。

它对我有用，也许对你有帮助。

1）在WebContent文件夹中为Dialog创建模板html，例如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对话框，则将值modal-lg<xe:dialog>添加到dojo 属性 modalStyleClass（参见步骤 2）

于 2016-03-09T11:29:26.970 回答