PHP+MySQL+jQueryUI完美笔记
时间:2023-03-29 19:15:09
PHP
Demo下载地址:http://www.erdangjiade.com/js...效果图:完整代码如下:首先介绍jQuery库,拖拽插件jqueryui和弹出层插件fancybox:<脚本类型="text/javascript"src="jquery.js">然后我们读取notes表中的注释:$query=mysql_query("select*fromnotesorderbyiddesc限制0,50");while($row=mysql_fetch_array($query)){列表($left,$top,$zindex)=explode('|',$row['xyz']);$time=strtotime($row['addtime']);$notes.=''。$行['id']。'.'。htmlspecialchars($row['content'])。'——'.htmlspecialchars($行['名称'])。'
('.tranTime($time).')
';}添加便签:$("#addbtn").live('click',function(e){vartxt=$("#note_txt").val();varuser=$("#user").val();varcolor=$("#mycolor").val();if(txt==""){$("#msg").html("内容不能为空");$("#note_txt").focus();returnfalse;}if(user==""){$("#msg").html("请输入你的名字!");$("#user").focus();returnfalse;}varleft=0;vartop=0;vardata={'zIndex':++zIndex,'content':txt,'user':用户,'color':颜色,'left':left,'top':top};$.post('posts.php',data,function(msg){zIndex=zIndex++;//警报(zIndex);if(parseInt(msg)){varstr="
"+msg+"."+txt+"——"+user+"(刚刚)
";$(".container").append(str);make_draggable($('.note'));$.fancybox.close();}else{$("#msg").html(msg);}});e.preventDefault();});删除便签条:$(".note").find(".close").click(function(){varid=$(this).parents(".note").attr("data-id");$.get("ajax.php",{id:id},function(data){if(data==1){$("#note_"+id).fadeOut();}},"json")})posts.php后台PHP收到ajax请求后,校验数据合法性,将数据插入数据表,成功后返回插入的id值,返回给前台。$left=intval($_POST['left']);$top=intval($_POST['top']);$txt=stripslashes(trim($_POST['content']));$txt=htmlspecialchars($txt,ENT_QUOTES);$txt=mysql_real_escape_string(strip_tags($txt),$链接);//过滤HTML标签,转义特殊字符if(strlen($txt)<1||strlen($txt)>100){echo'内容长度在1到100个字符之间';出口;}$user=stripslashes(trim($_POST['user']));$user=htmlspecialchars($user,ENT_QUOTES);$user=mysql_real_escape_string(strip_tags($user),$link);if(strlen($user)<2||strlen($user)>30){echo'名称的长度在2到10个字符之间';出口;}$color=$_POST['color'];$time=date('Y-m-dH:i:s');$zIndex=$_POST['zIndex'];//堆叠顺序值$xyz=''.$左。'|'。$顶。'|'.$z索引;$query=mysql_query("insertintonotes(content,name,color,xyz,addtime)values('$txt','$user','$color','$xyz','$time')");if($query){echomysql_insert_id($link);}else{echo'Error!';}Demo下载链接:http://www.erdangjiade.com/js...