Question

我正在使用bootstrapResponsiveConfiguration Domino服务器：带有Ext Lib版本的9.0.1 FP6 - ExtensionLibraryOpenNTF-901v00_17.20160428-0214

对话框控件（引导程序中的模态）不可拖动。如何使对话框控件可拖动？

＆＃13;

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
	<xe:applicationLayout id="applicationLayout1">
		<xp:panel>
			<xp:button id="button1" styleClass="btn-primary" value="Show Dialog">
				<i class="fa fa-user" />
				<xp:eventHandler event="onclick" submit="false">
					<xp:this.script><![CDATA[//getComponent("dialog1").show();
XSP.openDialog("#{id:dialog1}")]]></xp:this.script>
				</xp:eventHandler>
			</xp:button>
			<xe:dialog id="dialog1" title="Dialog Title">
				<xe:this.onShow>
					<![CDATA[$(".xsp-responsive-modal").removeClass("xsp-responsive-modal").addClass("my-responsive-modal");]]>
				</xe:this.onShow>
				<xp:table>
					<xp:tr>
						<xp:td>
							<xp:label value="Label"></xp:label>
						</xp:td>
						<xp:td>
							<xp:inputText></xp:inputText>
						</xp:td>
					</xp:tr>
				</xp:table>
				<xe:dialogButtonBar>
					<xp:button value="Cancel"></xp:button>
					<xp:button value="Save" styleClass="btn-primary"></xp:button>
				</xe:dialogButtonBar>
			</xe:dialog>
		</xp:panel>
		<xp:this.facets>
			<xe:navigator id="navigator1" xp:key="LeftColumn">
				<xe:this.treeNodes>
					<xe:basicLeafNode label="Link 1"></xe:basicLeafNode>
					<xe:basicLeafNode label="Link 2"></xe:basicLeafNode>
				</xe:this.treeNodes>
			</xe:navigator>
		</xp:this.facets>
		<xe:this.configuration>
			<xe:bootstrapResponsiveConfiguration productLogo="/car.png"
				placeBarName="New Application Name" placeBar="true" titleBar="false"
				invertedNavbar="true" collapseLeftColumn="true"
				collapseLeftMenuLabel="Menu Title" footer="false" legal="false">
				<xe:this.bannerUtilityLinks>
					<xe:loginTreeNode styleClass="logout"></xe:loginTreeNode>
					<xe:basicLeafNode label="#{javascript:@UserName();}" styleClass="username"></xe:basicLeafNode>
				</xe:this.bannerUtilityLinks>
				<xe:this.placeBarActions>
					<xe:basicLeafNode label="Link 1"></xe:basicLeafNode>
					<xe:basicLeafNode label="Link 2"></xe:basicLeafNode>
				</xe:this.placeBarActions>
			</xe:bootstrapResponsiveConfiguration>
		</xe:this.configuration>
	</xe:applicationLayout>	
</xp:view>

＆＃13;

我在样式表中添加了CSS，并将其包含在主题中：


    .my-responsive-modal {
        display: block;
        width: auto;
        left: 0;
        top: 0;
        z-index: 1050 !important;
    }

Answer 1

xsp-mixin.css中的.xsp-responsive-modal类在!important和left属性上使用top，阻止模式可拖动。

我通过将.xsp-responsive-modal类替换为不使用.my-responsive-modal的我自己的类!important来解决这个问题。

要替换类，我使用对话框的onShow事件：

<xe:this.onShow>
    <![CDATA[
        x$("#{id:dialog1}").removeClass("xsp-responsive-modal").addClass("my-responsive-modal");
    ]]>
</xe:this.onShow>

以下是.my-responsive-modal类：

.my-responsive-modal { /* copy of .xsp-responsive-modal with important removed from left and top to enable dragging in xe:dialog */
    display: block;
    width: auto;
    left: 0;
    top: 0;
    z-index: 1050 !important;
}

注意：x$()函数是Mark Roden的一个方便实用程序，可以在id中转义'：'，以便它们可以与JQuery一起使用（https://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jquery-selector-for-xpages）

Xpages Bootstrap模式 - 如何使其可拖动

1 个答案: