GWT изменяет размер текстовой области в IE Internet Explorer - PullRequest
Новая
       46

GWT изменяет размер текстовой области в IE Internet Explorer

0 голосов
/ 23 февраля 2019

Как мы можем сделать текстовую область изменяемой в IE в проекте GWT?

Текстовую область можно изменить с помощью CSS, но в IE это не работает: 

.gwt-TextArea {
    resize: vertical;
}

1 Ответ

0 голосов
/ 23 февраля 2019

Я нашел решение, используя метод JQuery resizable ().Чтобы использовать его в проекте GWT, я использовал JSNI (собственный интерфейс Javascript) для интеграции кода Javascript в ваш проект GWT.

Шаги

  1. Установите идентификатор элемента виджета, размер которого мы хотим изменить в GWT.
  2. Добавьте библиотеки JQuery на начальную страницу проекта GWT (index.html или index.jsp).
  3. Создать метод JSNI.Метод вызовет метод JQuery resizable () для идентификатора элемента, установленного на шаге 1.
  4. Вызовите свой метод JSNI в своем коде в какой-то момент после метода GWT.create () или uiBinder.createAndBindUi (this).

Пример

Шаг 1. Установите идентификатор элемента: 

private final String TEXT_AREA_ID = HTMLPanel.createUniqueId();

textArea.getElement().setId(TEXT_AREA_ID);

Шаг 2. На странице index.html / jspдобавьте это: 

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Шаг 3. Создайте свой метод JSNI: 

public class JSNIResizer
{
   public static native void resize(String textAreaId) /*-{
      // Internet Explorer. IE 11 uses 'trident'.
      var isIE = ($wnd.navigator.userAgent.match(/msie/i) || $wnd.navigator.userAgent.match(/trident/i));

        // Only apply this to IE browsers
        if (isIE) {

            var textArea = $wnd.$("#" + textAreaId);

            if (textArea) {
                textArea.resizable({
                    handles : 'n, s' // handle vertical resizing only.
                });

                // Optional: Adds a css style from jquery-ui.css
                textArea.addClass("ui-widget-content");
            }
        }
   }-*/;
}

Обратите внимание, что вы можете сделать это, если не хотите ограничивать его только вертикальным изменением размера: 

textArea.resizable();

Шаг 4. Назовите его с идентификатором элемента для изменения размера: 

JSNIResizer.resize(TEXT_AREA_ID);
...