kali ini gue pengen posting bagaimana buat menu pop up dengan ajax. Sebagian orang mungkin belum tau apa itu menu pop up. Menu pop up yaitu menu untuk menampilkan form/tampilan web muncul di depan halamam web itu sendiri. Sebagai contohnya fasilitas pada melihat foto di facebook , pasti kalian sudah pada tau
Ini request dari salah satu sobat ane di kmpz..
ok deh daripada gue cuma ngomong *hoak...
langsung nyok kita coba tutorialnya...
Tapi untuk memudahkan pemahaman gue gue kasih dulu contoh tampilannya.
Untuk tampilan pop up nya apabila kita klik link lihat data maka akan tampil sebagai berikut...
Ini adalah sambungan dari postingan gue sebelumnnya yaitu "Tinymce dengan database" .
Kali ini yang kita ubah hanyalah pada file "form.php" saja, untuk file yang lainnya masih sama.
simpan ini dengan nama "form.php"
<?php
include "config.php";
//proses input berita ke database
if(isset($_POST['input'])){
$judul = $_POST['judul'];
$isi = $_POST['isi'];
//insert ke table
$post = "insert into inputdata values('','$judul','$isi')";
$postsukses = mysql_query($post) or die ("shit".mysql_error());
if ($postsukses){
echo "<h2><font color = 'green'>esa.inc :) </font></h2>";
}
else{
echo "<h2><font color = 'red'>Input berita gagal T_T</font></h2>";
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>esa dwi suryanta</title>
<!-- TinyMCE -->
<link href="thickbox/thickbox.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="thickbox/jquery.js"></script>
<script language="javascript" src="thickbox/thickbox.js"></script>
<script type="text/javascript" src="../bbb/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
<!-- /TinyMCE -->
</head>
<body >
<form method="post" name="formberita" >
<h3>esa dwi suryanta</h3>
<table width="70%" border="0" align="center">
<tr>
<td width="108">Judul </td>
<td width="445"><input name="judul" type="text" size="40" /></td>
</tr>
<tr>
<td> </td>
<td><textarea id="elm1" name="isi" rows="15" cols="60" ></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="input" value="Submit" /></td>
</tr>
</table>
</form><table border="0" class="menu" width="70%" align="center" bgcolor="#BFECB9" bordercolor="#FFFFFF" border="1" >
<tr>
<td align="center" width="261" height="32" onmouseover="hover(this,1)" onmouseout="hover(this,0)" <a href="lihat.php?width=450&height=230" class="thickbox">Lihat Data</td>
</tr>
</table>
</body>
</html>
Jadi untuk membuat menu pop up sangatlah amat mudah yaitu dengan plugin dari jquery dan tickbok. Kita hanya perlu memanggilnya di dalam head sbb:
<link href="thickbox/thickbox.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="thickbox/jquery.js"></script>
<script language="javascript" src="thickbox/thickbox.js"></script>
Sedangkan untuk membuat link untuk memanggil tickbox codenya sbb:
<td align="center" width="261" height="32" onmouseover="hover(this,1)" onmouseout="hover(this,0)" <a href="lihat.php?width=450&height=230" class="thickbox">Lihat Data</td>
Nah bukankah sangat gampang???
Untuk yang mau download source codenya silahkan download --->>
disiniudah dulu posting kali ini, saia mau ngerjain tugas dulu
smoga cerita kali ini bersafaat
slam naesa informatika
^_^
