Title: Dynamic Portal Widgets
Post by: zombie86 on April 25, 2022, 12:50:20 AM
Dear All,
hope you all doing well, and wish you a good day too.
I am currently trying to work with Portal Extension which is so lovely Extension to have.
but I have some concerns if you could help me with>
The Portal Panel depends on number of columns predefined and the widget should be fit to one column at a time :(
as for Dynamic Dashboards new Widgets has to be freely customized as for graphs probably.
so the desired layout should support block diagrams with dynamic width block levels, lets say each row consists of 5 blocks and widget width is variant between 1 to 5 blocks
attached an illustrated image from firewall dashboard for reference
Title: Re: Dynamic Portal Widgets
Post by: jarry on April 26, 2022, 08:49:50 PM
Please refer to this example. Make sure to download the newest file 'jquery.portal.js' from the site. <!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Portal - jQuery EasyUI</title>
<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" src="https://www.jeasyui.com/easyui/jquery.portal.js"></script>
<script>
$(function(){
$('#pp').portal({
dir:'h'
})
})
</script>
</head>
<body>
<h2>Horizontal Direction.</h2>
<div id="pp" style="height:500px;padding:5px">
<div style="height:40%">
<div title="title1" data-options="flex:'2 1 0'"></div>
<div title="title2" data-options="flex:'1 1 0'"></div>
<div title="title3" data-options="flex:'1 1 0'"></div>
</div>
<div style="height:60%">
<div title="title4"></div>
<div title="title5"></div>
<div title="title6"></div>
</div>
</div>
</body>
</html>
|