【发布时间】：2015-09-03 17:33:12
【问题描述】：
我正在尝试在网页上使用 jEasyUI 和 jQueryUI。我想使用在http://www.jeasyui.com/extension/ribbon.php 找到的easyui 功能区插件以及标准的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>
【问题讨论】：
-
举个具体的例子怎么样？否则你很可能会被否决或得到一般性的答案。
-
为什么不直接使用 jquery-easyui 对话框呢？我认为您在尝试使用这两个库时会遇到问题。
-
@B2K：感谢您的建议。我添加了一个例子。我对 jsfiddle 不够精通，无法设置一键式“这是我的问题”，所以这是我目前最好的。
-
@Maulzal：使用 jquery 对话框的主要原因是我可以处理打开/关闭事件并能够使用对话框工具栏进行操作。如果可以使用 easyui 轻松完成这些事情，那么我会考虑使用它的对话框。
标签： javascript jquery-ui jquery-easyui