Wicket模态窗口可以定制吗?

我需要在Wicket模态窗口的标题栏中添加一个按钮。 我在Wicket API中找不到任何有用的东西可以帮助我。 有没有办法以这种方式自定义标题栏?

根据/org/apache/wicket/extension/ajax/markup/html/modal/res/modal.js你不能通过wicket api修改模态窗口装饰器,因为模态窗口标记完全在javascript中定义。 因此,你可以随时选择简单但不好的方法并用你自己的方式替换modal.js,或者你很难用show来改变模态窗口,使用js来修改带有“w_captionText”类的span。 或者可能(我不测试它)你可以在Caption属性中定义你自定义的代码并告诉wicket不要在这个标题中转义特殊的html字符。 可能有帮助。

你可以借助CSS实现这种效果。 创建自定义模式窗口(如果您不想创建自定义样式)并指定css资源。

package org.ru5.test; import org.apache.wicket.ResourceReference; import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow; import org.apache.wicket.markup.html.CSSPackageResource; import org.apache.wicket.markup.html.resources.CompressedResourceReference; import org.apache.wicket.model.IModel; public class CustomModalWindow extends ModalWindow { private static final long serialVersionUID = 1L; private static ResourceReference CSS = new CompressedResourceReference( CustomModalWindow.class, "res/custom-modal.css"); /** * Creates a new modal window component. * * @param id * Id of component */ public CustomModalWindow(final String id) { super(id); init(); } /** * Creates a new modal window component. * * @param id * Id of component * @param model * Model */ public CustomModalWindow(final String id, final IModel model) { super(id, model); init(); } private void init() { add(CSSPackageResource.getHeaderContribution(CSS)); } } 

/org/ru5/test/CustomModalWindow.html

    

你需要的一切:

/org/ru5/test/res/custom-modal.css

 .headBtn{position: absolute; z-index: 20001; top: 2px; left: 200px;} 

/org/ru5/test/TestPanelForTestWindow.html

 .... 
....

您可以尝试覆盖modal.js函数,或者只是在JS DOM的帮助下制作技巧。 希望这会有所帮助。

有点黑客,但有效:

 import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow; import org.apache.wicket.model.IModel; public class FixedModalWindow extends ModalWindow { private static final long serialVersionUID = 1L; public FixedModalWindow(String id) { super(id); setResizable(false); } public FixedModalWindow(String id, IModel model) { super(id, model); setResizable(false); } @Override public FixedModalWindow setResizable(boolean resizable) { // Cannot set resizable on the FixedModalWindow return this; } @Override public boolean isResizable() { return false; } @Override protected Object getShowJavascript() { // Hack in some JS to remove the onMove handlers StringBuffer showJS = new StringBuffer(); showJS.append(" "); showJS.append((String) super.getShowJavascript()); showJS.append("var popupWindow = Wicket.Window.get();\n"); showJS.append("var nullHandler = function() {};\n"); showJS.append("if(popupWindow != null) {\n"); showJS.append("popupWindow.bind(popupWindow.caption, nullHandler);\n"); showJS.append("popupWindow.bind(popupWindow.bottomRight, nullHandler);\n"); showJS.append("popupWindow.bind(popupWindow.bottomLeft, nullHandler);\n"); showJS.append("popupWindow.bind(popupWindow.bottom, nullHandler);\n"); showJS.append("popupWindow.bind(popupWindow.left, nullHandler);\n"); showJS.append("popupWindow.bind(popupWindow.right, nullHandler);\n"); showJS.append("popupWindow.bind(popupWindow.topLeft, nullHandler);\n"); showJS.append("popupWindow.bind(popupWindow.topRight, nullHandler);\n"); showJS.append("popupWindow.bind(popupWindow.top, nullHandler);\n"); showJS.append("}\n"); return showJS.toString(); } } 

如何在wicket的模态窗口中隐藏关闭按钮? 我们找到了这样一个解决方案:

 ModalWindow yourModal = new ModalWindow("yourModalID") { @Override public void show(AjaxRequestTarget pTarget) { super.show(pTarget); pTarget.appendJavascript(""// + "var thisWindow = Wicket.Window.get();\n"// + "if (thisWindow) {\n"// + "$('.w_close').attr('style', 'display:none;');\n"// + "}"// ); } } 

实际上,您可以从模态窗口插入任何类,并以某种方式更改它。 希望它可以帮助别人:)