Kann das Wicket modalen Fenster angepasst werden?

StackOverflow https://stackoverflow.com/questions/1385314

Frage

Ich brauche eine Schaltfläche, um die Titelleiste eines Wicket modalen Fenster hinzuzufügen. Ich kann nichts, die in dem Wicket-API finden, die mir helfen. Gibt es eine Möglichkeit die Titelleiste auf diese Weise anpassen?

War es hilfreich?

Lösung

Nach /org/apache/wicket/extension/ajax/markup/html/modal/res/modal.js können Sie nicht modal Fensterdekorateur von Wicket api ändern, da modale Fenster Markup vollständig in Javascript definiert. So wie immer können Sie einfach, aber schlecht aus und ersetzen modal.js von ihrem eigenen, oder man kann kaum wahr Art und Weise zu ändern modale Fenster nach Show js mit Spanne ändern mit Klasse „w_captionText“. Oder sein kann (ich bin es nicht getestet) Sie können Ihnen angepassten Code in Caption-Eigenschaft definieren und sagen zu Wicket nicht zu entkommen speziellen HTML-Zeichen ist in dieser Beschriftung. sein kann, es hilft.

Andere Tipps

Sie können diese Art von Effekt erreichen mit Hilfe von CSS. Erstellen Sie Ihre benutzerdefinierten modalen Fenster (falls Sie nicht Ihre benutzerdefinierten Stil erstellen) und CSS-Ressource angeben. 

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 außer Kraft zu setzen oder einfach nur einen Trick mit Hilfe von JS DOM machen. Hoffe, dass dies helfen würde.

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

}

Wie Schließen-Schaltfläche in Ihrem modalen Fenster in Wicket zu 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 es in irgendeiner Weise ändern. Hoffe, es hilft jemand:)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top