Internet Explorer Хак в JEasyUI

Иногда встречаются веб-приложения, которые  становятся ещё более удобными для пользователя, если их интерфейс выглядит так же, как в десктоп-приложениях. Это актуально для различных бухгалтерских, бизнес-приложений, в которых есть множество элементов пользовательского интерфейса. С фреймворком JEasyUI разработка web приложений превращается в легкое и увлекательное дело.

jQuery EasyUI фреймворк в веб-приложениях

В jQuery EasyUI фреймворке есть такие полезные компоненты, как панель, таблица, меню, выпадающий список, диалоговое окно, список в виде дерева и многие другие элементы.

Элементы jQuery EasyUI

Используя этот фреймворк, вам не придется писать много javascript кода. Поэтому ваша разметка станет ясной и легкой для понимания. Более того, в JEasyUI более 25 тем оформления, с которыми просто и приятно работать.

Что нужно, чтобы jQuery EasyUI работал в разных браузерах?

Есть 2 способа определения элементов:

  1. Посредством HTML5
  2. Используя JavaScript

Однако, у нас возникли некоторые проблемы в IE9, когда мы использовали второй вариант. У нас имелась разметка, состоящая из компонента «Панель», который содержал внутри себя поле ввода. Разметка была следующая:

<div id="P2" title="Portfolio Summary">
    @Html.Action("TreePopup", "Common",
         new { @treeTitle = "Select Portfolio",
               @treeData = "Common/GetTreeData?treetype=0",
               @valueField = "SelPortfolio" })
</div>

Данные, загружаемые в поле ввода с помощью Ajax выходили за пределы поля. Все параметры задавались программно с помощью JavaScript. Чтобы исправить ошибку, мы просто переписали определение элемента панели  с теми же параметрами на HTML5.

<div id="PortfolioPerformance" title="Portfolio Performance"
        style="height:350px;padding:10px;background:#fff;"
        data-options="closable:false,
        collapsible:true,
        minimizable:false,
        maximizable:false">
@Html.Action("TreePopup", "Common", new { @treeTitle = "Select Portfolio",
                                          @treeData = "Common/GetTreeData?treetype=0",
                                          @valueField = "SelPFPerformance" })
</div>

Как результат, панель стала выглядеть отлично во всех браузерах.