Question

我试图在网页上使用jEasyUI和jQueryUI。我想使用这里找到的easyui ribbon插件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>

Answer 1

似乎无法解决此问题。您只需使用jquery-easyui提供的对话框，并且如果您已经在使用jquery-easyui，请避免使用jquery-ui。这是其他人创建的小提琴：e http://jsfiddle.net/vmDP8/11/

在使用jquery-easyui时如何调用jquery-ui对话框？

1 个答案: