Dynamic Portal Widgets

EasyUI Forum

April 29, 2024, 12:53:12 PM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > Dynamic Portal Widgets

Pages: [1]

« previous next »

Author

Topic: Dynamic Portal Widgets (Read 1400 times)

zombie86

Newbie

Posts: 24

Dynamic Portal Widgets

« 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 Sad

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


	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: Dynamic Portal Widgets

« Reply #1 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.

Code:

<!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>


	Logged

Pages: [1]

« previous next »