Kali ini saya mencoba untuk membuat ketiga portfolio diantaranya SIMPEG, POS dan Rumah Sakit di dalam satu page.

Caranya cukup sederhana dengan menggunakan dhtmlxWindows dan method attachURL

 

Cuma dengan 1 file index.html yang isinya adalah sebagai berikut

<!DOCTYPE html>
<html>
<head>
	<title>Portfolio DHTMLX Combine</title>
	<script type="text/javascript" src="/../codebase/dhtmlx.js"></script>
	<link rel="stylesheet" type="text/css" href="/../codebase/dhtmlx.css">
	<style type="text/css">
		html,body {
				width: 100%;
				height: 100%;
				margin: 0px;
				overflow: hidden;	
			}		
	</style>
</head>
<body style="background-color:powderblue;">
	<script type="text/javascript">
		myWins = new dhtmlXWindows();

		function posWinShow() {			
			//kalau window ada bawa ke top, kalo blom create window
			if ( myWins.isWindow('pos') == true ) {
				myWins.window('pos').bringToTop();
			} else {
				var posWin = myWins.createWindow({
					id:"pos",
				    width:600,
				    height:400,
				    center:true,
				    text: "Point of Sales"
				});
				posWin.attachURL('../pos/index.php');
			}
		}

		function simpegWinShow() {
			//kalau window ada bawa ke top, kalo blom create window
			if ( myWins.isWindow('simpeg') == true ) {
				myWins.window('simpeg').bringToTop();
			} else {
				var simpegWin = myWins.createWindow({
					id:"simpeg",
				    width:600,
				    height:400,
				    center:true,
				    text: "SIMPEG"
				});
				simpegWin.attachURL('../pegawai-dhx/index.php');
			}
		}

		
		function rsWinShow() {
			//kalau window ada bawa ke top, kalo blom create window
			if ( myWins.isWindow('rs') == true ) {
				myWins.window('rs').bringToTop();
			} else {
				var rsWin = myWins.createWindow({
					id:"rs",
				    width:600,
				    height:400,
				    center:true,
				    text: "Rumah Sakit"
				});
				rsWin.attachURL('../tutorial/rs2/');
			}
		}
	</script>


	<div>		
		<figure style="max-width: 100px">
			<a href="#" onclick="posWinShow()">
				<img src="/pos.png" alt="jual beli"/>
				<figcaption> Point of Sales </figcaption>
			</a>
		</figure>		
	</div>

	<div> 		
		<figure style="max-width: 100px">
			<a href="#" onclick="simpegWinShow()">
				<img src="/simpeg.png" alt="simpeg"/>
				<figcaption> SIMPEG </figcaption>
			</a>	
		</figure>		
	</div>

	<div>		
		<figure style="max-width: 100px">
			<a href="#" onclick="rsWinShow()">
				<img src="/rs.png" alt="rumah sakit"/>
				<figcaption> Rumah Sakit </figcaption>
			</a>
		</figure>		
	</div>
	
</body>
</html>

 

DEMO

 

 

Add comment

Tutorial DHTMLX

15 Mar 2019 13:05
1. Konstruksi DHTMLX
22 Mar 2019 13:54
2. CRUD sederhana
15 Mar 2019 13:03
3. Toko Online
15 Mar 2019 13:02
4. Galeri Gambar
22 Mar 2019 13:53
5. Grafik
22 Mar 2019 13:52
6. Export Grid

Komponen DHTMLX - Javascript Web UI