هل يمكن تخصيص النافذة الوسيطة الويكيت؟

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

سؤال

أحتاج إلى إضافة زر إلى شريط عنوان نافذة مشروط الويكيت. لا يمكنني العثور على أي شيء مفيد في واجهة برمجة تطبيقات الويكيت التي ستساعدني. هل هناك أي طريقة لتخصيص شريط العنوان بهذه الطريقة؟

هل كانت مفيدة؟

المحلول

وفقًا/apache/wicket/extension/ajax/markup/html/modal/res/modal.js ، لا يمكنك تعديل ديكور النافذة الوسيطة عن طريق وايكيت API لأن علامة النافذة المشروطة محددة بالكامل في JavaScript. لذلك كما هو الحال دائمًا ، يمكنك تحديد طريقة بسيطة ولكنها سيئة واستبدال Modal.js بمفردك ، أو بالكاد يمكنك تغيير نافذة الوسائط الحقيقية بعد العرض باستخدام JS لتعديل SPAN مع الفصل "W_CaptionText". أو قد تكون (أنا لا أختبرها) ، يمكنك تحديد رمز مخصص في خاصية التسمية التوضيحية وطلب أن لا تفلت من HTML Char الخاص في هذا التسمية التوضيحية. قد يكون يساعد.

نصائح أخرى

يمكنك تحقيق هذا النوع من التأثير بمساعدة 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/custommywindow.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>

كل ما تحتاجه:

/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>
....

يمكنك محاولة تجاوز وظيفة 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();
  }

}

كيفية إخفاء زر الإغلاق في نافذة الوسائط الخاصة بك في الويكيت؟ لقد وجدنا مثل هذا الحل:

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

في الواقع ، يمكنك إدراج أي فئة من النافذة المشروطة ، وتغييرها بطريقة ما. أتمنى أن يساعد شخص ما :)

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top