Kann das Wicket-Modal-Fenster angepasst werden?

Ich muss der Titelleiste eines modalen Window-Fensters eine Schaltfläche hinzufügen. Ich kann nichts Nützliches in der Wicket API finden, die mir helfen wird. Gibt es eine Möglichkeit, die Titelleiste auf diese Weise anzupassen?Kann das Wicket-Modal-Fenster angepasst werden?

Quelle

2009-09-06 Yuval

Nach /org/apache/wicket/extension/ajax/markup/html/modal/res/modal.js können Sie modale Fenster Dekorator nicht durch Wicket API ändern, weil modales Fenster Markup vollständig in Javascript definiert. Also wie immer können Sie einfach, aber schlechte Weg wählen und ersetzen modal.js durch Ihre eigenen, oder Sie können kaum wahr Weg modalen Fenster nach dem Erscheinen mit js zu verändern span mit Klasse "w_captionText" ändern. Oder kann (ich bin nicht testen Sie) Sie können Sie benutzerdefinierte Code in Caption-Eigenschaft definieren und an Wicket, spezielle HTML-Zeichen in dieser Beschriftung nicht zu entkommen. Vielleicht hilft es.

Quelle

2009-09-08 14:10:16

Hmpf ... oh gut, danke trotzdem. – Yuval

Wenn du den einfachen Weg gegangen bist. Was genau würden Sie tun, um die modal.js zu überschreiben? –

Sie können diese Art von Effekt mit Hilfe von CSS erreichen. Erstellen Sie Ihr benutzerdefiniertes modales Fenster (falls Sie Ihren benutzerdefinierten Stil nicht erstellen) und geben Sie css resource an.

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

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org"> 
<body><wicket:panel><div wicket:id="content"></div></wicket:panel></body> 
</html>

Alles, was Sie brauchen:

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

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

/org/ru5/test/TestPanelForTestWindow.html

.... 
<div class="headBtn"> 
<input type="button" value="ok"> 
</div> 
....

Sie können versuchen, modal.js Funktion zu überschreiben oder nur einen Trick mit Hilfe von JS DOM machen. Hoffe, das würde helfen.

Quelle

2010-09-27 12:57:59 Ru5

bisschen wie ein Hack, aber funktioniert:

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(); 
    } 

}

Quelle

2010-10-16 21:48:17 equinox

Wie Schließen-Schaltfläche in Ihrem modalen Fenster in Wicket verbergen? Wir haben eine solche Lösung gefunden:

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"// 
        + "}"// 
      ); 
     } 
}

Eigentlich kann man einfügen unabhängig von Klasse von modalen Fenster, und ändern Sie es in gewisser Weise. Hoffe es hilft jemandem :)

Quelle

2014-04-18 06:55:47 Gytis

Kann das Wicket-Modal-Fenster angepasst werden?

Antwort

Verwandte Themen