Я пытаюсь использовать jEasyUI и jQueryUI на веб-странице. Я хотел бы использовать подключаемый модуль ленты easyui, который можно найти здесь http://www.jeasyui.com/extension/ribbon.php, а также стандартные диалоги jQuery. Кажется, что библиотека jquery-easyui переопределяет стандартный метод jquery-ui $.dialog своей собственной версией. Можно ли одновременно использовать jquery-ui и jquery-easyui и выбирать, какие объекты вы хотите из любой библиотеки?
Я пытался просто сначала вызвать библиотеки easyui, а затем jquery-ui, но, похоже, это не имеет значения.
РЕДАКТИРОВАТЬ, ЧТОБЫ ДОБАВИТЬ ПРИМЕР КОДА
Желаемый результат: я хочу добавить кнопку на панель инструментов диалога, и мне нужны дескрипторы событий открытия и закрытия для диалога. Комментирование строк заголовка easyui возвращает к использованию jqueryui, но я, конечно, не могу использовать дополнительные элементы easyui, к которым я хочу получить доступ.
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="vendor/js/jquery-1.10.2.js"></script>
<script src="vendor/js/jquery-ui-1.10.4.custom.js"></script>
<!-- jquery-easyui stuff -->
<link rel="stylesheet" type="text/css" href="vendor/jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="vendor/jquery-easyui-1.4.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="vendor/jquery-easyui-1.4.3/demo/demo.css">
<script type="text/javascript" src="vendor/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<!-- jquery-easyui stuff -->
<link href="vendor/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet">
</head>
<body>
<div id="DialogDrawer" style="display:none;">
<div id="PrintingHolderDiv">
<div>
<label>Paper Size:</label>
<select id="PrintPageSize" onchange="PrintPaperSizeSelected()">
<option value=""></option>
<option value="A4">8.5" x 11" </option>
<option value="A3" selected>11" x 17" </option>
<option value="Plotter18">18" plotter </option>
<option value="Plotter24">24" plotter </option>
<option value="Plotter36">36" plotter </option>
<option value="Custom">Custom </option>
</select>
</div>
<div id="PrintPaperWidthDiv" class="block">
<label>Paper Width</label>
<input id="PrintPageWidth" type="number" value="17" oninput="PrintPageSizeUpdated();"></input>
</div>
<div id="PrintPaperHeightDiv" class="block">
<label>Paper Height</label>
<input id="PrintPageHeight" type="number" value="11" oninput="PrintPageSizeUpdated();"></input>
</div>
</div>
</div>
<script>
function PopupDialog(divID, dialogTitle, dialogWidth, dialogHeight){
// This function makes a dialog for the specified the specified dialog out of the ribbon
// Open the dialog and run the callback function
var q = $('#' + divID + 'HolderDiv').dialog({
// modal:true,
title: dialogTitle,
width: dialogWidth,
height: dialogHeight,
open: function(event, ui){
//// THIS EVENT ISN'T HIT WITH EasyUI dialog
//// THIS CODE WORKS WITH THE jquery-ui dialog
// Add the pop-out icon next to the close button in the dialog toolbar
$(".ui-dialog-titlebar").append("<img id='" + divID + "_NewWindowPopupImg' class='ui-icon ui-icon-help' src='Images/PopOut.png' style='padding-right: 40px; cursor:pointer;' title='Open sidebar in new window'>");
$('#' + divID + '_NewWindowPopupImg').click(
// Closure for this window
function(){
// do stuff...
}
);
},
close: function(event, ui) {
//// THIS EVENT ISN'T HIT WITH EasyUI dialog
$(this).dialog('destroy');
}
});
}
window.onload = function(){
PopupDialog('Printing', 'Print', 300, 400);
}
</script>
</body>
</html>
