相信很多网友见过类似许愿墙的程序,用户可以在网页上贴个许愿的纸条,并且可以拖动到页面的任意位置上。今天我要给大家演示的是使用PHP+MySQL+jQuery实现一个工作当中用到的贴便签纸的功能。
<link rel="stylesheet" type="text/css" href="css/fancybox.css" /><script type="text/javascript" src="js/jquery.fancybox-1.3.1.pack.js"></script><a href="add_note.html" id="fancy"><img src="css/images/btn.gif" alt="新增便签" /></a><div class="popwin" style="width:420px"><h3 class="popup_title">新增便签</h3><div id="note_form"> <form id="add_form" action="#" method="post"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="posttable"> <tr> <td colspan="2">请输入内容: <span id="msg"></span></td> </tr> <tr> <td colspan="2"><textarea name="note_txt" id="note_txt" class="input" style="width:98%; height:80px"></textarea></td> </tr> <tr> <td width="50%">请输入姓名:</td> <td>背景色:</td> </tr> <tr> <td><input type="text" class="input" name="user" id="user" /></td> <td><ul id="color"> <li class="yellow cur"></li> <li class="blue"></li> <li class="green"></li> </ul><input type="hidden" id="mycolor" value="yellow" /></td> </tr> <tr> <td height="36" colspan="2" align="center"><input type="submit" id="addbtn" class="btn" value="确 定" /> <input type="button" class="btn" value="取 消" id="cancel" onclick="$.fancybox.close()" /></td> </tr> </table> </form></div></div>.popup_title{background:#e8f5fe; padding:4px}#note_form{padding:4px}#note_form p{line-height:24px}.input{border:1px solid #ccc; padding:2px}.posttable td{line-height:24px; padding:2px}#color li{float:left; width:20px; height:20px; margin-left:6px; cursor:pointer}#color li.cur{border:1px solid #369}.btn{width:68px; height:24px; background:url(images/btn_bg.gif) repeat-x; border:1px solid #9cf; cursor:pointer}#msg{padding:2px; margin-left:10px; color:#f30}首先,当点击“新增便签”按钮时,调用fancybox插件。$("#fancy").fancybox({ 'type':'ajax', 'modal':true, 'titleShow':false,});$("#color li").live('click',function(){ var color = $(this).attr("class"); $("#mycolor").val(color); $(this).css("border","1px solid #369"); $(this).siblings().css("border","1px solid #fff");});
$("#addbtn").live('click',function(e){ var txt = $("#note_txt").val(); var user = $("#user").val(); var color = $("#mycolor").val(); var data = { 'zIndex': ++zIndex, 'content': txt, 'user': user, 'color': color }; $.post('posts.php',data,function(msg){ zIndex = zIndex++; if(parseInt(msg)){ var str = "<div class='note "+color+"' style='left:0;top:0;z-index:"+zIndex+"'><span class='data'>"+msg+".</span>"+txt+"<p>——"+user+"(刚刚)</p></div>"; $(".demo").append(str); make_draggable($('.note')); $.fancybox.close(); }else{ $("#msg").html(msg); } }); });posts.phprequire_once('connect.php');$txt = stripslashes(trim($_POST['content']));$user = stripslashes(trim($_POST['user']));$color = $_POST['color'];$time = date('Y-m-d H:i:s');$zIndex = $_POST['zIndex'];$xyz = '0|0|'.$zIndex;$query = mysql_query("insert into notes(content,name,color,xyz,addtime)values('$txt','$user','$color','$xyz','$time')");if($query){ echo mysql_insert_id($link); //输出插入的ID值}else{ echo '出错了!';}
零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。