Title: easyui + bootstrap
Post by: roberto on November 10, 2017, 06:32:43 PM
Hi,
both are fantastic tools, but don't work together. I found an article (https://www.ryadel.com/en/using-jquery-ui-bootstrap-togheter-web-page/) to solve a similar problem with jeasyui and bootstrap where the method tooltip exist in both but can have its name changed to uitooltip, por example, solving this conflict. My problem start when I try to use any easyui code inside a bootstrap modal dialog. Is there a (easy) way to solve this issue like in the mentioned article?
Tks
Title: Re: easyui + bootstrap
Post by: jarry on November 11, 2017, 06:41:17 AM
1. Use the 'noConflict' to let them work together. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript"> var $eui = $.noConflict(true); </script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
2. Use the $eui to create the EasyUI components. $(function(){ $eui('#dd').tooltip({ content: 'This is the tooltip message.' }); $eui('#pp').panel({ title:'easyui panel', width:400, height:100, content: 'panel' }); });
Here is the working example. http://code.reloado.com/okocok3/edit#javascript,html,live
Title: Re: easyui + bootstrap
Post by: roberto on November 12, 2017, 06:18:07 AM
Tank you! Just to be perfect: how to make the panel width 100%?
Title: Re: easyui + bootstrap
Post by: jarry on November 12, 2017, 08:10:07 PM
Set the panel with 'width' set to '100%' and then call 'resize' method after displaying the modal dialog. $(function(){ $eui('#pp').panel({ title:'easyui panel', width:'100%', height:100, content: 'panel' }); $('#exampleModal').on('shown.bs.modal', function(){ $eui('#pp').panel('resize'); }) });
Title: Re: easyui + bootstrap
Post by: chorauoc on July 15, 2018, 07:29:58 AM
Hi All, I just thought i would add something here , because i used this method and it worked fine until i use the extension called datagrid-detailview?. When i try to use this the + sign does not appears in the data-grid and error msg appears as "undefined call" in datagrid-detailview.js file. So here hw i resolve it (I thought to post this solution, because someone may face this issue) I have find and replaces all $ with $eui only in datagrid-detailview.js file and i used files as below (note that extension js file has moved below to the JQUERY file) <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript"> var $eui = $.noConflict(true); </script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
//This newly update js goes to here <script type="text/javascript" src="../javascript/datagrid-detailview.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> Hello, Admin jarry,
If you have another way of resolve this issue i would be really like to here it ;)
|