emka.web.id

hadapi dengan tenang jiwa, semua akan baik-baik saja

Home > Programming > jQuery > Belajar JQuery: Membuat Popup Window dengan JQueryPopupWindow

Belajar JQuery: Membuat Popup Window dengan JQueryPopupWindow

Popup Window adalah Window atau jendela dialog/program yang muncul diatas window utama. Popup Window ini sangat berguna untuk mengakomodir halaman baru yang kecil dan berisi informasi penting tapi tak ditampilkan di halaman utama. Dengan jQuery kita bisa membuat popup window dengan plugin jquery.popupwindow.

Download

Source Code

Berikut adalah contoh source code yang bisa anda pakai:

<!--more-->
<html>
<head>
	<title>PopUpWindow Example</title>
	<style type="text/css">
	body{font-family:Georgia; margin:10px;}
	pre{background-color:#000; color:#FFF; border:1px solid red; padding:10px;}
	a{text-decoration:none;}
	a:hover{background-color:#FFFCCC;}
	.download { float: right; margin-right: 150px;}
	</style>
  	<script type="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="jquery.popupwindow.js"></script>
   	<script type="text/javascript">
	var profiles =
	{

		window800:
		{
			height:800,
			width:800,
			status:1
		},

		window200:
		{
			height:200,
			width:200,
			status:1,
			resizable:0
		},

		windowCenter:
		{
			height:300,
			width:400,
			center:1
		},

		windowNotNew:
		{
			height:300,
			width:400,
			center:1,
			createnew:0
		},

		windowCallUnload:
		{
			height:300,
			width:400,
			center:1,
			onUnload:unloadcallback
		},

	};

	function unloadcallback(){
		alert("unloaded");
	};

   	$(function()
	{
   		$(".popupwindow").popupwindow(profiles);
   	});
	</script>

</head>
<body>
<p>Takes a link and will create a popupwindow based on the href of the link. You can over ride the default setting by passing your own settings or profile name in the REL attribute of the link.</p>
<dl>
	<dt>Default settings:</dt>

	<dd><a href="http://emka.web.id/" class="popupwindow">Example 1</a></dd>
</dl>

<dl>
	<dt>Custom settings:</dt>
	<dd><a href="http://emka.web.id/" class="popupwindow" rel="height:400,width:400">Example 1</a> - height:400,width:400</dd>
	<dd><a href="http://emka.web.id/" class="popupwindow" rel="height:550,width:750,toolbar:1,scrollbars:1,status:1,resizable:0,left:50,top:100">Example 2</a> - height:550,width:750,toolbar:1,scrollbars:1,status:1,resizable:0,left:50,top:100</dd>

</dl>

<dl>
	<dt>Using profiles:</dt>
	<dd><a href="http://emka.web.id/" class="popupwindow" rel="windowCallUnload">Example 1</a> - window800</dd>
	<dd><a href="http://emka.web.id/" class="popupwindow" rel="window200">Example 2</a> - window200</dd>
	<dd><a href="http://emka.web.id/" class="popupwindow" rel="windowCenter">Example 3</a> - windowCenter</dd>

</dl>

<dl>
	<dt>Same window:</dt>
	<dd><a href="http://emka.web.id/" class="popupwindow" rel="windowNotNew">Example 1</a> - windowNotNew</dd>
	<dd><a href="http://www.jquery.com" class="popupwindow" rel="windowNotNew">Example 2</a> - windowNotNew</dd>
</dl>

<dl>
	<dt>onUnload event:</dt>
	<dd><a href="http://emka.web.id/" class="popupwindow" rel="windowCallUnload">Example 1</a> - windowCallUnload</dd>
</dl>

Selamat mencoba!

Incoming search terms:

Tulisan Menarik Lainnya

0 Comments. Posted by on Tuesday, May 31, 2011 at 2:07 am.

Filed under jQuery, , , , , .

No Comments on “Belajar JQuery: Membuat Popup Window dengan JQueryPopupWindow”

You can track this conversation through its atom feed.

No one has commented on this entry yet.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>